Mengenal Bootstrap

By | 6 October 2017
0 Comment

Bootstrap adalah framework HTML, CSS, dan JavaScript yang paling populer untuk mengembangkan situs web mobile pertama yang responsif, dan dapat didownload serta digunakan secara gratis. Dimana sudah disertakan desain template berbasis HTML dan CSS untuk tipografi, form, tombol, tabel, navigasi, modals, carousels gambar dan banyak lainnya, serta plugin JavaScript opsional, untuk pengembangan web lebih cepat dan mudah. Desain web yang responsif adalah tentang membuat situs web yang secara otomatis menyesuaikan diri agar terlihat bagus di semua perangkat, mulai dari ponsel kecil sampai desktop besar.

Bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter, dan dirilis sebagai produk open source pada bulan Agustus 2011 di GitHub. Pada bulan Juni 2014 bahkan menjadi proyek No.1 di GitHub! Beberapa kelebihan yang menjadikannya banyak digunakan, diantaranya:

  • Mudah digunakan: Siapa saja yang hanya memiliki pengetahuan dasar tentang HTML dan CSS
  • Fitur responsif: CSS responsif menyesuaikan ke ponsel, tablet, dan desktop
  • Pendekatan Mobile-first: dimana style mobile adalah bagian dari kerangka inti
  • Kompatibilitas dengan semua browser modern (Chrome, Firefox, Internet Explorer, Safari, dan Opera)

Ada dua cara untuk mulai menggunakan Bootstrap di situs web Anda sendiri, yaitu dengan mendownload dari getbootstrap.com atau menyertakan link dari CDN. Jika Anda ingin mendownload dan meng-host sendiri, buka getbootstrap.com, dan ikuti instruksi di sana. Jika Anda tidak ingin mendownload dan meng-host sendiri, Anda bisa memasukkannya dari CDN (Content Delivery Network). MaxCDN menyediakan dukungan CDN untuk CSS dan JavaScriptnya, juga harus menyertakan jQuery, seperti di bawah ini:

<! – Skrip CSS terbaru dan yang dikompilasi ->
<link rel = “stylesheet” href = “https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
<! – jQuery library ->
<script src = “https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”> </ script>
<! – Kompilasi JavaScript terbaru ->
<script src = “https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”> </ script>

Salah satu keuntungan menggunakan CDN adalah banyak pengguna sudah mendownload Bootstrap dari MaxCDN saat mengunjungi situs lain. Sehingga, akan diambil dari cache saat mereka mengunjungi situs Anda, yang menyebabkan waktu loading lebih cepat. Selain itu, sebagian besar CDN akan memastikan bahwa begitu pengguna meminta file dari situ, server tersebut akan dilayani dari server yang terdekat dengan mereka, yang juga menyebabkan waktu loading lebih cepat.

Bootstrap menggunakan jQuery untuk plugin JavaScript (seperti modals, tooltips, dll.). Namun, jika Anda hanya menggunakan bagian CSS-nya saja, Anda tidak memerlukan jQuery. Berikut ini beberapa hal yang perlu diperhatikan saat membuat halaman web menggunakan framework Bootstrap:

  • Menggunakan elemen HTML dan properti CSS yang memerlukan DOCTYPE HTML5
  • Karena dirancang untuk responsif terhadap perangkat mobile, style mobile-pertama adalah bagian dari kerangka inti. Untuk memastikan rendering dan sentuhan zoom yang benar, tambahkan tag <meta> berikut di dalam elemen <head>: <meta name = “viewport” content = “width = perangkat-lebar, skala awal = 1”>. Bagian width = device-width mengatur lebar halaman untuk mengikuti lebar layar perangkat (yang akan bervariasi tergantung pada perangkat). Skala awal = 1 bagian menetapkan tingkat pembesaran awal saat halaman pertama kali dimuat oleh browser.
  • Membutuhkan elemen yang mengandung unsur kontener untuk membungkus isi situs. Ada dua kelas kontainer untuk dipilih, yaitu: kelas .container menyediakan wadah lebar tetap responsif, dan kelas .container-fluida  menyediakan kontener lebar penuh, yang mencakup seluruh lebar area pandang. Kontener tidak sarang (Anda tidak bisa memasukkan kontener ke dalam kontener lain).




Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Kelas Container</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>My First Page</h1>
  <p>This part is inside a .container class.</p> 
  <p>The .container class provides a responsive fixed width container.</p>           
</div>
</body>
</html>

Demikianlah tutorial tentang pengenalan framework Bootstrap, semoga bermanfaat.

No related posts.