BOOTSTRAP
Dalam membangun sebuah web,
desain tampilan merupakan hal yang paling penting. Berbicara tampilan
desain, maka kita akan berbicara seni. Pada artikel ini saya akan
membahas slah satu framework CSS yang dapat digunakan para pengembang
web untuk mempermudah dalam membangun sebuah website dengan tampilan
yang menarik. Framework yang dibahas dalam artikel ini yaitu Bootstrap,
framework CSS yang dibangun oleh Twitter.
Kelebihan dari Bootstrap adalah responsive layout dan 12 column grid system. Dengan responsive layout maka aplikasi web yang didesain dengan menggunakan Bootstrap akan langsung menyesuaikan dengan lebar dari media perambahnya. Sehingga tampilan web akan tetap rapih dibuka dengan media apapun baik itu handphone, tablet, laptop ataupun PC desktop. Jadi, tampilan tidak akan terganggu dengan resolusi dari layar. Sedangkan 12-column grid system sederhananya adalah Bootstrap akan membagi lebar layar menjadi 12 bagian. Sehingga pembagian kolom per kolom tampilan web akan menjadi lebih mudah.
Disini saya mencoba membuat HTML berbasis css Bootstrap
Pertama saya akan beri tahu scripnya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap u/ Script Dasar Js</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet" style="text/css">
<script type="text/javascript">
alert("Selamat Datang Di AKN BOJONEGORO Bootstrap Tema - Javascript!");
</script>
</head>
<body>
<h1><span class="badge-warning">Bootstrap Tema</span> <small class="btn-danger">AKN BOJONEGORO</small></h1>
<!-- Javascript files harus ditaruh di bawah untuk meningkatkan performa web -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<div class="container">
<h1><a href="#">Bootstrap Tema AKN BOJONEGORO</a></h1>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Akredasi</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="hero-unit">
<h1>Perkuliahan AKN BOJONEGORO </h1>
<p>Perkuliahan yang bermutu ,Membimbing Mahasiswa untuk siap kerja untuk menghadapi masa depan agar bojonegoro"MATOH" bisa diwujudkan bersama -sama.</p>
<a href="#" class="btn btn-large btn-success">DAFTARKAN DIRI ANDA SEGERA</a>
</div>
<div class="row">
<div class="span4">
<p>BOJONEGORO CERDAS</p>
</div>
<div class="span8">
<p>BOJONEGORO MATOH</p>
</div>
</div>
<div class="row">
<div class="span4">
<ul class="nav nav-list">
<li class="nav-header">MENU UTAMA </li>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">PROFIL</a></li>
<li><a href="#">AKREDASI</a></li>
<li><a href="#">TENTANG</a></li>
<li><a href="#">KONTAK</a></li>
<li class="nav-header">KONTAK WAWASAN </li>
<li><a href="#">Google</a></li>
<li><a href="#">Yahoo!</a></li>
<li><a href="#">Bing</a></li>
<li><a href="#">Microsoft</a></li>
<li><a href="#">Gadgetic World</a></li>
</ul>
</div>
<div class="row">
<div class="span4">
<h4 class="muted text-center">AKN BOJONEGORO </h4>
<p> </p>
<a href="#" class="alert-info"><i class="icon-user"></i>SEGERA BERGABUNGLAH</a> </div>
<div class="span4">
<h4 class="muted text-center">MEMBANGUN MASA DEPAN </h4>
<p>Generasi penerus diharaapkan sanggung bekerja dengan kemampuan yang memumpuni dan teknik yang di industri yang semakin berkembang pesat maka lahirlah AKN BOJONEGORO untuk mewujudkanya </p>
<a href="#" class="btn btn-success"><i class="icon-user icon-white"></i>PDD DI LUAR POLINEMA </a>
</div>
<div class="span4">
<h4 class="muted text-center">PANTANG MUNDUR </h4>
<p>Ijazah langsung dari perguruan tinggi POLITEKNIK NEGERI MALANG ,Diharapkan di maraknya persaingan kota bojonegoro tidak akan kalah dengan bekerja sama dengan POLINEMA untuk mencerdaskan generasi penerus yaitu Pemuda - Pemudi Bojonegoro.</p>
<a href="#" class="btn btn-info">KONTAK</a>
<h4 class="muted text-center">WEBSITE: </h4>
<b><i><u><p>WWW.AKNBOJONEGORO.AC.ID.</p></u></i></b>
</div>
</div>
<hr>
<table width="200" border="1" bgcolor="#FFFFFF">
<tr>
<td><script language="JavaScript" type="text/javascript" src="Script/hari.js"></script>
<script language="JavaScript" type="text/javascript" src="Script/jam.js"></script></td>
</tr>
</table>
<!--Garis Batas-->
<div class="footer">
<center>
</center>
<b><p class="badge-success">©M.EDI SANTOSA TEKNIK INFORMATIKA 5 </p>
</b>
</div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-th-large"></i>Profil
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
</ul>
</li>
<li><a href="#">Akredasi</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Hasil Screanshoot dibawah:
gambar 3
