CSS - Pengenalan Bootstrap

Pada materi ini, masih merupakan kelanjutan desain web responsive, yang salah satunya adalah bootstrap. Apa itu bootstrap? Kita sudah pernah membahas contoh pembuatan desain responsive dengan menggunakan bootstrap ini. Bootstrap adalah framework popular dari HTML, CSS dan JavaScript yang khusus didesain untuk pengembangan front-end web responsive. Karena sangat popular, hampir semua web developer menggunakan framework ini karena sangat mudah dan cepat, anda hanya cukup membuat aturan tambahan class tertentu untuk desain tertentu. Jadi bootstrap juga sering kali mengharuskan Anda untuk memiliki struktur HTML tertentu di halaman HTML Anda.

/photo/gray-laptop-computer-showing-html-codes-in-shallow-focus-photography-160107/

Disini hanya meminta Anda untuk menambahkan div ekstra di sana-sini dan berikan kelas tertentu sehingga CSS Bootstrap yang didefinisikan akan berlaku dengan benar. Namun harus diingat bahwa Kerangka JavaScript-nya didalamnya tidak boleh diabaikan juga. Bootstrap juga disebut kerangka kerja seluler pertama. Nah secara umum, istilah itu berarti Anda berurusan dengan bagaimana antarmuka pengguna Anda ditata pada perangkat seluler terlebih dahulu. Maka disini Anda akan belajar bagaimana mengeluarkan konten Anda, apa isi kontennya dan Anda harus berpikir, apa yang benar-benar penting dalam diri Anda untuk konten yang akan Anda resentasikan. Namun sebenarnya intinya, bootstrap memberi anda keluasan dalam mengembangkan website dengan mengubah tampilan bootstrap dengan hanya menambahkan class dan CSS sendiri.

Dan yang cukup menarik, Bootstrap tidak selalu merupakan kerangka kerja seluler pertama, Bootstrap memiliki file CSS yang terpisah dan sekumpulan kelas terpisah. Jika Anda menginginkan situs web Anda menjadi responsif atau pada dasarnya dapat dilihat di perangkat seluler juga dimana didalamnya terdapat folder css, font, dan js. Sekarang di mana anda bisa mendapatkannya? Yah, bisa dengan lakukan instalasi atau download di getbootstrap.com

Sekarang kita lanjut di pembahasan utama kita, bernama Twitter Bootstrap. Ini bukan sebuah software atau sesuatu yang mirip dengan media sosial twitter justru ini adalah framework css yang opensource pada awalnya dikembangkan oleh tim twitter untuk para web designer. Nanti anda akan temukan beberapa fitur twitter bootstrap dengan responsive design, menu dropdown, clean icons, dll yang anda bisa kembangkan sendiri.

<title>Halaman Test Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/stylesheet.css">

Pada gambar kita lihat terdapat file bootstrap.min.css, itulah framework CSS Bootstrap yang sebenarnya, kemudian yang kedua adalah styles.css dan itu lah style kita nantinya. Jika kita melihat style CSS, ini adalah file kosong, dan belum kita masukkan custom style kita di sana. Jadi, semua yang kita lakukan saat ini adalah mengandalkan pada kerangka Bootstrap.

Untuk lebih pahamnya anda bisa lihat fiturnya antara lain:

  • css/bootstrap.css: berisi style dasar seperti reset, layout, typography, button yang merupakan bawaan bootstrap.
  • css/bootstrap-responsive.css: berisi setting responsive desain dimana dipakai secara bersama bootstrap.css untuk membuat style bootstrap menjadi responsive.
  • css/bootstrap-min.css dan css/bootstrap-responsive-min.css: merupakan versi compressed dari bootstrap.css dan bootstrap-responsive.css
  • img/glyphicons-halflings.png dan img/glyphicons-halflings-white.png, merupakan icon yang digunakan pada bootstrap dengan teknik spriting.
  • js/bootstrap.js dan js/bootstrap-min.js: javascript untuk mengaktifkan berbagai fitur keren bawaan bootstrap.

Mungkin segini dulu pengenalan bootstrap atau lebih di kenal dengan twitter bootstrap, anda bisa mencoba menggunakan Bootstrap pada sebuah laman sederhana anda karena tidak ada cara lain untuk benar-benar mengerti penggunaanya selain anda harus mencoba dan menerapkan Bootstrap pada website yang sedang anda kembangkan.