Kalau kamu melakukan sesuatu yang berhubungan dengan web, cobalah cari tahu tentang Bootstrap. Bootstrap adalah toolkit penting yang berisi kumpulan alat HTML, CSS dan JavaScript untuk membuat dan membangun halaman web dan aplikasi web. Ini adalah proyek yang gratis dan open source, di-hosting di GitHub, dan awalnya dibuat oleh (dan untuk) Twitter. Jika kamu belum tahu apa itu Bootstrap, atau kamu hanya ingin mencari tutorial bootstrap untuk mendapatkan gambaran yang lebih baik, kamu datang ke tempat yang tepat.

Jadi, kenapa belajar bootstrap?

Setelah rilis open source pada tahun 2011, Bootstrap menjadi populer dengan sangat cepat, dan tentu bukan tanpa alasan. Desainer web dan Web developer menyukai Bootstrap karena fleksibel dan mudah digunakan. Keuntungan utamanya adalah responsif berdasarkan desain, mempertahankan kompatibilitas browser yang luas, menawarkan desain yang konsisten dengan menggunakan komponen yang dapat digunakan ulang, dan sangat mudah untuk digunakan dan cepat dipelajari. Ini menawarkan ekstensibilitas menggunakan JavaScript, dengan dukungan bawaaan untuk plugin jQuery dan API JavaScript terprogram. Bootstrap dapat digunakan dengan IDE atau editor apapun, dan bahasa dan segi server teknologi apapun, dari ASP.NET hingga PHP sampai Ruby on Rails.

Dengan Bootstrap, Web developer dapat berkonsentrasi pada pekerjaan pengembangan, tanpa khawatir dengan desain, serta membuat situs web terlihat bagus dan berjalan dengan cepat. Sebaliknya, hal ini memberi desainer web dasar yang kuat untuk membuat tema Bootstrap yang menarik.

Mulai dengan Dasar-dasar Bootstrap

Bootstrap tersedia dalam dua bentuk; versi yang telah dikompilasi dan versi kode sumber. Versi kode sumber menggunakan LESS CSS preprocessor, tapi jika kamu lebih suka Sass, ada port Sass resmi dari Bootstrap. Untuk memudahkan penggunaan awal vendor CSS, Bootstrap menggunakan Autoprefixer.

Versi kode sumber dilengkapi kode sumber gaya yang ditulis dalam Less (atau Sass), semua JavaScript, dan dokumentasi yang menyertainya. Hal ini memungkinkan desainer dan pengembang lebih ambisius untuk mengubah dan menyesuaikan, sesuai selera mereka, dan membangun versi Bootstrap mereka sendiri. Tapi kalau kamu tidak terbiasa dengan Less (atau Sass) atau kamu tidak tertarik untuk mengubah kode sumber, jangan khawatir. Semua gaya dapat diganti dengan menggunakan gaya khusus.

Struktur File

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Ini adalah struktur file versi yang telah dikompilasi dari Bootstrap. Struktur Bootstrap cukup sederhana dan jelas. Ini termasuk file yang telah dikompilasi yang memungkinkan penggunaan yang cepat dalam proyek web apa pun. Selain file CSS dan JS yang dikompilasi dan diperkecil, ini juga menyertakan font dari Glyphicons, dan tema Bootstrap lebih opsional. Struktur ini dapat dengan mudah dimasukkan dalam struktur file proyek kamu hanya dengan memasukkan file Bootstrap persis seperti yang keluar dari arsip zip, atau jika lebih sesuai dengan proyek kamu, kamu dapat mengatur ulang file-file ini dan menempatkannya di mana pun kamu suka. Pastikan folder font Glyphicons berada pada level yang sama dengan folder CSS.

Template HTML Bootstraps

Template dasar HTML Bootstrap akan terlihat seperti ini:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Penting untuk memulai HTML apapun dengan deklarasi HTML5 Doctype, sehingga browser mengetahui jenis dokumen apa yang dapat mereka harapkan. Head berisi tiga  <meta> tag penting harus dideklarasikan terlebih dahulu, dan tag head tambahan apapun harus ditambahkan setelahnya. Jika kamu ingin mendukung browser lama seperti IE8, kamu juga dapat menyertakan HTML5 shim di kepalanya, yang akan memungkinkan pengguna elemen HTML di browser lama, dan Respond.js, yang akan polyfill CSS3 Media Queries, di internet explorer versi lama.

<head>
  ...
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]

Walaupun, ini tidak terlalu penting kalau kamu hanya menargetkan browser modern.

File JavaScript ditambahkan ke akhir badan untuk memungkinkan halaman web terlihat sebelum JavaScript dijalankan. jQuery diperlukan untuk plugin Bootstrap, dan perlu dimuat sebelum  bootstrap.js. Kalau kamu tidak menggunakan salah satu fitur interaktif Bootstrap, kamu juga dapat menghilangkan file-file ini dari sumbernya.

Hal ini sepatutnya dilakukan untuk mendapatkan dasar layout Bootstrap dan menjalankannya. Setiap bagian dari Bootstrap dapat dengan mudah di kostumisasi dalam CSS. Tetapi jika itu bukan keahlian kamu, atau kamu menginginkan tampilan dan nuansa yang berbeda dari tema Bootstrap, ada banyak tema, open source dan premium yang tersedia di Bootswatch dan WrapBootstrap.

Template Bootstrap dan Komponen UI

Bootstrap dirangkai dengan template desain dasar HTML dan CSS yang menyertakan banyak komponen UI yang umum. Ini termasuk Tipografi, Tabel, Formulir, Tombol, Glyphicons, Dropdown, Tombol dan Grup Input, Navigasi, Pagination, Label dan Lencana, Peringatan, Bilah Kemajuan, Modals, Tab, Akordeon, Korsel, dan banyak lainnya.

Banyak dari yang telah disebut di atas menggunakan ekstensi dari JavaScript dan plugin jQuery.

Template Bootstrap ini tersedia sebagai kelas CSS yang diperhitungkan dengan baik yang dapat kamu terapkan ke HTML kamu untuk mendapat efek yang berbeda. Hal ini membuat penggunaan Bootstrap sangat nyaman. Dengan menggunakan nama kelas semantik seperti  .success,  .warning dan  .info, komponen ini mudah digunakan kembali dan diperpanjang. Tetapi sementara Bootstraps menggunakan nama kelas deskriptif yang memiliki arti, detail implementasinya tidak spesifik. Semua kelas dapat ditimpa dengan gaya dan warna khusus CSS, dan arti kelas akan tetap sama.

Sistem Grid Bootstrap

Sebelum kita mendalami komponen Bootstrap dan template desain, penting untuk menyebutkan salah satu fitur utama yang dikenalkan Bootstrap di versi ketiga; filosofi desain yang mengutamakan mobile, menghasilkan Bootstrap yang responsif berdasarkan desain. Hasil akhirnya adalah Bootstrap dengan skala yang mudah dan efisien berbasis kode tunggal, dari ponsel, tablet, hingga desktop.

Responsivitas ini dicapai menggunakan sistem grid Bootstrap yang dapat diterapkan untuk menskalakan hingga 12 kolom dengan tepat sesuai dengan ukuran perangkat atau viewport. Grid memberikan struktur pada layout, mendefinisikan pedoman horizontal dan vertikal untuk mengatur konten dan menegakkan margin. Grid juga menawarkan struktur intuitif bagi pengunjung, karena mudah untuk mengikuti aliran konten dari kiri ke kanan, atau kanan ke kiri yang bergerak ke bawah halaman. Sebelum grid, dan sebelum CSS sangat berguna, layout berbasis grid didapat menggunakan tabel, dimana konten akan diatur dalam set tabel. Saat CSS menjadi lebih matang, sejumlah kerangka kerja CSS untuk layout berbasis grid mulai muncul. Ini termasuk YUI grids, 960 GS, dan blueprints.

Untuk menggunakan sistem grid Bootstrap, beberapa aturan harus diikuti. Elemen kolom grid ditempatkan di dalam elemen baris, yang membuat grup kolom horizontal. Kamu dapat memiliki baris sebanyak yang kamu inginkan pada halaman, tetapi kolom harus merupakan turunan langsung dari baris. Dalam satu baris penuh, lebar kolom akan berupa kombinasi apapun yang dapat ditambah hingga 12, tetapi tidak wajib untuk menggunakan 12 kolom yang tersedia.

Baris harus ditempatkan, baik dalam pembungkus layout lebar tetap yang memiliki  .container kelas dan lebar 1170 piksel, atau dalam pembungkus layout penuh yang memiliki  .container-fluid kelas, dan yang memungkinkan baris di situ responsif.

Sistem grid Bootstrap memiliki 4 tingkatan kelas: xs untuk ponsel (<768px), sm untuk tablet (≥768px), md untuk desktop (≥992px), dan lg untuk desktop yang lebih besar (≥1200px). Ini pada dasarnya menentukan ukuran di mana kolom akan runtuh atau menyebar secara horizontal. Tingkatan kelas dapat digunakan dalam kombinasi apapun untuk mendapatkan layout yang dinamis dan fleksibel.

Misalnya, jika kita ingin mendapatkan dua baris, satu dengan dua kolom, dan satu dengan empat, kita dapat menulis:

<div class="row">
  <div class="col-md-6">First column</div>
  <div class="col-md-6">Second column</div>
</div>
<div class="row">
  <div class="col-md-3">First column</div>
  <div class="col-md-3">Second column</div>
  <div class="col-md-3">Third column</div>
  <div class="col-md-3">Fourth column</div>
</div>

Kita juga dapat menggunakan lebar kolom campuran:

<div class="row">
  <div class="col-md-9">Wider column</div>
  <div class="col-md-3">Smaller column</div>
</div>

Kita bahkan dapat menggeser kolom menggunakan offset, misalnya untuk membuat konten lebih sempit dan terpusat:

<div class="row">
  <div class="col-md-6 col-md-offset-3">Centered column</div>
</div>

Kolom dapat berkumpul. Mungkin ada kurang dari 12 kolom, dan seperti yang disebutkan di atas, kita dapat memilih kolom lebar penuh masing-masing dengan menggunakan .container  atau  .container-fluid  selubung.

<div class="container">
  <div class="row">
    <div class="col-md-8">
      Parent fixed-width column
      <div class="row">
        <div class="col-md-6">Nested column</div>
        <div class="col-md-6">Nested column</div>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">Fluid ..</div>
    <div class="col-md-4">.. and full-width ..</div>
    <div class="col-md-4">.. example</div>
  </div>
</div>

Jika kita menggabungkan tingkatan kelas yang berbeda, kita akan mendapatkan tampilan yang berbeda pada tampilan seluler dan desktop. Pada contoh dibawah ini, di desktop ada 4 kolom dalam satu baris, dan di seluler mereka akan memiliki tampilan lebar penuh dan bertumpuk satu sama lain.

<div class="row">
  <div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div>
  <div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div>
  <div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div>
  <div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div>
</div>

Ini memungkinkan untuk menonaktifkan respon halaman sepenuhnya. Pada dasarnya itu akan menonaktifkan aspek ‘situs web’ dari Bootstrap. Perlu diingat jika kamu menonaktifkan responsivitas, komponen, komponen apapun, seperti bilah navigasi tetap, tidak akan terlihat saat viewport lebih sempit daripada konten halaman. Untuk wadah non-responsif, berarti lebar 970px. Dalam hal ini juga, navbar tidak akan diciutkan dalam tampilan seluler seperti yang akan dijelaskan nanti.

Tipografi Bootstrap

Pengembang pemula sering menganggap HTML asli dan tidak bergaya akan terlihat sama di semua browser. Sayangnya, setiap browser memiliki lembar gaya ‘agen pengguna’ default yang diterapkan dalam HTML, dan tidak ada dua browser yang memiliki default yang sama. Misalnya ukuran font heading tidak konsisten di seluruh browser, sebagian daftar yang diurutkan dan yang tidak diurutkan meninggalkan margin yang lainnya meninggalkan padding, browser menerapkan batas dan padding khusus ke badan HTML, dan bahkan tombol dibuat secara berbeda di setiap browser. Untuk mengatasi seluruh inkonsistensi ini, aturan ‘reset’ CSS yang berbeda hadir untuk menentukan default gaya yang konsisten.

Bootstrap membawa lebih banyak barang ke tabel selain reset CSS asli. Muncul dengan normalize.css, alternatif HTML5-siap untuk reset CSS, dan juga memiliki beberapa default yang dirancang dengan baik. Misalnya, Bootstrap menetapkan default global  font-size  ke 14px, dengan tinggi garis 1,428. Font default diubah menjadi Helvetica/Arial, dengan fallback sans serif. Semua gaya ini diterapkan ke  <body> dan semua paragraf dengan tambahan bahwa  <p>  (paragraf) menerima margin bawah setengah tinggi garis yang dihitung (10px secara default). Selain default ini, ada juga gaya yang dapat disesuaikan untuk tag HTML standar yang menghadirkan lebih banyak konsistensi pada teks, seperti teks yang disorot, ( <mark>), teks yang dihapus (<del> dan <s>), teks yang digarisbawahi (<u>), teks kecil (<small>), dan teks tebal (<strong>). Kelas perataan membantu mengatur konten pada halaman dengan lebih mudah menggunakan kelas  .text-left, .text-center, .text-right, .text-justify dan .text-nowrap. Ada juga gaya yang telah ditentukan untuk blok kutipan, dengan opsi sebaris, hanya untuk beberapa nama.

Satu hal menarik yang juga dimungkinkan oleh Bootstrap adalah kamu dapat menggunakan, misalnya, gaya heading dengan menggunakan tag  <h1>, atau kelas  .h1 . Yang terakhir akan cocok dengan gaya heading <h1> , tetapi memungkinkan teks ditampilkan sebaris.

Formulir

Formulir telah berkembang pesat selama bertahun-tahun, dan saat ini penggunaan formulir web adalah salah satu aktivitas paling umum yang dilakukan saat menjelajahi web. Sementara HTML5 memperkenalkan sejumlah atribut formulir baru, tipe input, dan elemen pembantu lainnya, browser belum banyak meningkatkan bentuk secara visual. Ini adalah salah satu keunggulan Bootstrap, karena menyelaraskan dan menata label dan input, memvalidasi formulir, dan menampilkan pesan kesalahan, bisa jadi rumit tanpa bantuan.

Pertama, Bootstrap menyetel semua elemen input tekstual, seperti  <input>,  <textarea> dan <select>, ke lebar 100% dari elemen formulir induk. Ini juga memberi kamu kemampuan untuk memilih antara formulir sebaris, yang akan membuat beberapa label dan bidang input di baris yang sama, dengan menggunakan  .form-inline kelas, atau formulir horizontal, yang menggunakan grid untuk menyelaraskan setiap input di barisnya sendiri, dengan menggunakan class  .form-horizontal. Dan jika kamu perlu menempatkan teks biasa di sebelah label formulir, alih-alih bidang input, kamu bisa memberinya  .form-control-static kelas agar cocok dengan tampilan visual formulir.

Mungkin fitur terbesar yang dibawa Bootstrap dalam formulir adalah gaya validasi untuk status kesalahan, peringatan, dan keberhasilan. Ini dapat diterapkan menggunakan kelas  .has-warning ,  .has-error, dan  .has-success , berturut-turut. Gabungkan ini dengan ikon yang dapat ditempatkan dalam formulir input, kita bisa mendapatkan efek validasi formulir yang cepat dan efektif, bahkan tanpa menggunakan pesan teks kesalahan.

Cuplikan kode berikut akan menghasilkan bidang input dengan tanda @, untuk menunjukkan bahwa kita sedang mencari email, dan dengan ikon peringatan dan garis kuning yang menunjukkan bahwa ada sesuatu yang salah di bidang input.

<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning">Email address input field with warning</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputWarning" aria-describedby="inputGroupWarningStatus">
  </div>
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupWarningStatus" class="sr-only">(warning)</span>
</div>

Gambar dan Ikon

Gambar di Bootstrap dapat dibuat responsif dengan memberikan kelas.img-responsive . Ini akan menerapkan max-width:100%; height:auto;  dan display:block; pada gambar yang bersangkutan, sehingga dapat diskalakan ke elemen induk.

Selain membuat gambar menjadi responsif, kita dapat dengan mudah menambahkan efek. Misalnya, sudut membulat diterapkan dengan kelas  .img-rounded, dan gambar dapat dibentuk menjadi lingkaran dengan menggunakan  .img-circle, atau menjadi gambar mini dengan menggunakan kelas .img-thumbnail.

Bootstrap dirangkai dengan lebih dari 260 glyph dalam format font, dari set Glyphicons Halflings. Jan Kovařík, penulis dan perancang Glyphicons, telah menyediakannya untuk Bootstrap secara gratis dan di bawah lisensi yang sama dengan Bootstrap. Ikon font memiliki lebih banyak keunggulan dibandingkan dengan gambar raster biasa, salah satunya adalah mereka dapat diskalakan. Mereka juga dapat dengan mudah di kostumisasi hanya dengan menggunakan CSS, memanipulasi ukuran atau warna, atau bahkan menambahkan bayangan, sangatlah mudah.

Tombol, Grup Tombol, dan Dropdown Tombol

Tombol adalah salah satu hal yang dibuat dengan sangat berbeda oleh setiap browser. Jika kamu ingin memiliki desain yang konsisten di semua browser, hal ini berpotensi menjadi masalah besar. Untungnya, Bootstrap juga memiliki solusi untuk masalah ini. Dan selain membuatnya konsisten, ada banyak variasi untuk dimainkan. Kamu dapat menerapkan kelas .btn ke  <a> dan elemen <input>. Kamu juga dapat mengelompokkan serangkaian tombol menjadi satu baris menggunakan class .btn-group pada induknya <div>. Dengan bantuan JavaScript, kamu dapat membuat tombol radio dan kotak centang bergaya. Atau kamu dapat mengubah tombol menjadi menu tarik-turun dengan menempatkannya dalam sebuah  .btn-group, dan menyediakan markup menu yang tepat dari daftar item tidak berurut.

Navbars

Bilah navigasi atau navbar, adalah komponen Bootstrap yang dirancang khusus untuk membangun menu navigasi utama situs web. Di layar besar, ditampilkan secara horizontal, dan di layar kecil atau seluler (di bawah 768px), berubah menjadi menu tarik-turun “hamburger”. Navbar adalah daftar item menu sebaris yang tidak berurutan, dengan elemen HTML tambahan yang ditambahkan sesuai keinginan. Di antara kemungkinan penambahan adalah pencitraan (baik teks atau logo), item formulir seperti bilah pencarian, dan menu dropdown. Dua gaya yang tersedia untuk dipilih dari luar kotak: terang dan gelap. Item di navbar dapat disejajarkan ke kiri atau kanan dengan menerapkan kelas .navbar-left atau .navbar-right , secara berurutan.

Navbar dapat memiliki 4 aturan posisi yang berbeda. Posisi float default memiliki ruang buffer di sekitarnya; navbar statis lebar-penuh menggulir ketika pengguna menggeser halaman ke bawah, dan navbar tetap, yang dapat berada di bagian atas atau bawah jendela, selalu terlihat di halaman, dimanapun menggilirnya.

Kesimpulan

Hal-hal yang telah disebutkan sebelumnya hanya mencakup beberapa komponen Bootstrap yang menempatkan Bootstrap di depan kerangka kerja, pustaka, dan toolkit serupa. Dengan Bootstrap, cukup beberapa kelas CSS sederhana diperlukan untuk membangun front end yang sepenuhnya responsif, cantik, cepat, dan mudah. Ini adalah langkah awal yang bagus untuk proyek besar atau startup kamu berikutnya.

Sumber: toptal.com