Apa sih Boostrap itu?
Bootstrap merupakan sebuah toolkit yang dikembangkan oleh Twitter untuk mempermudah web developer dalam mendesain tampilan aplikasi. Bootstrap juga menyediakan sarana untuk membangun layout halaman dengan mudah dan rapi serta modifikasi pada tampilan dasar HTML untuk membuat seluruh halaman website yang dikembangkan senada dengan komponen-komponen lainnya. Bootstrap dibuat untuk memberikan sekumpulan perangkat yang dapat digunakan untuk membangun website sederhana dengan mudah.
Pembuatan Web dari bootstrap tergolong mudah hanya perlu men-download file dari getbootstrap kemudian mengekstraksi file zip hasil download selanjutnya masukkan CSS Bootstrap tersebut pada file HTML. Pada bootstrap mendukung grid system yang desain 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 yang digunakan. 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 sesuai keingian kita.
Bootstrap merupakan sebuah toolkit yang dikembangkan oleh Twitter untuk mempermudah web developer dalam mendesain tampilan aplikasi. Bootstrap juga menyediakan sarana untuk membangun layout halaman dengan mudah dan rapi serta modifikasi pada tampilan dasar HTML untuk membuat seluruh halaman website yang dikembangkan senada dengan komponen-komponen lainnya. Bootstrap dibuat untuk memberikan sekumpulan perangkat yang dapat digunakan untuk membangun website sederhana dengan mudah.
Pembuatan Web dari bootstrap tergolong mudah hanya perlu men-download file dari getbootstrap kemudian mengekstraksi file zip hasil download selanjutnya masukkan CSS Bootstrap tersebut pada file HTML. Pada bootstrap mendukung grid system yang desain 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 yang digunakan. 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 sesuai keingian kita.
berikut bootstrap yang sudah saya buat beserta codingnya
<body><nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="well">Home</a></li>
<li role="presentation"><a href="#">About</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Program Study<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li role="presentation"><a href="widows">S1 Teknik Informatika</a></li>
<li role="presentation"><a href="#">S1 Sistem Informasi</a></li>
<li role="presentation"><a href="#">D3 Manajemen Informatika</a></li>
</ul>
</li>
<li role="presentation"><a href="#">Dosen</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Pendaftaran Mahasiswa Baru<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li role="presentation"><a href="#">Form Pedaftaran Online</a></li>
<li role="presentation"><a href="#">Syarat Pedaftaran</a></li>
<li role="presentation"><a href="#">Biaya</a></li>
</ul>
</li>
<li role="presentation"><a href="#">Contact</a></li>
</ul>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
Untuk menganti BG (Background) sendiri saya meggunakan :<title>Change BG</title><link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<style type="text/css">
.jumbotron {
position: relative;
background: url(IMG/unisbank1.PNG) center;
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}
</style>
Berikut tampilan Body dari Boostrap :
<div class="jumbotron">
<div class="container">
<h1>UNIVERSITAS STIKUBANK</h1>
<p>FAKULTAS TEKNOLOGI INFORMASI</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Home</h2>
<p>Potongan Sumbangan Pengembangan Kampus selama Dies Natalis
<br>Dalam rangka peringatan Dies Natalis ke-48, Panitia Penerimaan Mahasiswa Baru Unisbank</br>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>About</h2>
<p>Setiap sektor kehidupan tidak terbebas dari ketergantungan terhadap teknologi informasi yang memerlukan otomatisasi diberbagai bidang,dengan kebutuhan perangkat lunak menjadi sangat penting.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Program Study</h2>
<p>S1 Teknik Informatika Terakreditasi‘B’,<br>S1 Sistem Informasi Terakreditasi‘B’<br>D3 Manajemen Informatika Terakreditasi'B' dengan fasilitas-fasilitas yang memadai.</br>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<footer>
<p>© Hamba Sahaya</p>
</footer>
Twitter Bootstrap tercatat sebagai kode yang paling banyak di download di Github sekarang ini, komunitasnya pun semakin banyak dan terus berkembang. Tools yang berkaitan dengan kostumasi twitter bootstrap pun sangat banyak. Selamat mencoba!! :D
0 comments:
Post a Comment