Category Archives: bootstrap

Cara Menggunakan Bootstrap

1. Download File Bootstrap

Untuk memulainya, pertama-tama kita harus mendownload file Bootstrap terlebih di http://getbootstrap.com/getting-started/
 
Kemudian klik tombol Download Bootstrap yang paling kiri. FYI, di situ kan ada beberapa jenis file Bootstrap yang bisa didownload, untuk sementara abaikan saja dulu. Dua tombol sisanya itu merupakan pembahasan yang terpisah 😀
Setelah selesai mendownload maka kita akan mendapatkan sebuah file zip dengan nama bootstrap-3.3.6-dist.zip.

2. Ekstrak File Bootstrap

Selanjutnya ekstraklah file Bootstrap yang telah didownload tadi (bootstrap-3.3.6-dist.zip) kemudian simpan di sebuah folder tertentu. Akan muncul sebuah folder dengan nama bootstrap-3.3.6-dist dan di dalamnya ada beberapa folder lagi yaitu css, js dan fonts. Jika file Bootstrap yang kamu download sama versinya dengan saat tulisan ini dibuat, maka kurang lebih seperti berikut isi file bootstrap-3.3.6-dist.zip yang telah diekstrak tadi.
bootstrap-3.3.6-dist/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── 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

3. Buatlah Sebuah File

Selanjutnya, buatlah sebuah file sebagai bahan percobaan. Misalnya dengan nama index.html, simpan file tersebut di dalam folder bootstrap-3.3.6-dist tadi, kemudian tuliskan kode berikut:

<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 101 Template</title>

    
    <link href="css/bootstrap.min.css" rel="stylesheet">

    
    
    
  </head>
  <body>
    <div class="container">
      <h1>Hello, world!</h1>

      <p><button class="btn btn-primary btn-lg">SAMPLE BUTTON</button></p>
    </div>

    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
Kode di atas merupakan format standar Bootstrap. Yang perlu diperhatikan adalah:

1. Pastikan link stylesheet Bootstrap mengarah pada path yang tepat dimana file CSS Bootstrap berada, relative terhadap file html yang memanggilnya.

Karena kebetulan file index.html yang kita buat berada di dalam folder bootstrap-3.3.6-dist dan di dalamnya langsung bersisi file Bootstrap, maka kita tulis css/bootstrap.min.css.

2. Pastikan juga script JavaScript Bootstrap mengarah pada path yang tepat dimana file JavaScript Bootstrap berada, relative terhadap file html yang memanggilnya.

<script src="js/bootstrap.min.js"></script>
Karena pada contoh kita, file index.html yang kita buat di dalam folder bootstrap-3.3.6-dist dan di dalamnya sudah ada file Bootstrap, maka path-nya bisa kita tulis js/bootstrap.min.js. Jika nanti kamu membuat file index.html nya tidak seperti path yang kita buat di atas nggak usah masalah, tinggal disesuaikan saja path-nya.

3. Pastikan JQuery terpanggil

Bootstrap membutuhkan JQuery agar berjalan dengan sempurna. Karena JavaScript-nya Bootstrap tidak akan bekerja jika tidak ada JQuery. So, pastikan JavaScript-nya terpanggil dengan baik. Sebagai contoh di atas, kita panggil JQuery langsung dari library-nya Google:
Sebenernya kamu bisa juga sih memanggil JQuery-nya offline (karena mungkin aplikasi kamu tidak harus online) yaitu dengan download file JQuery-nya terlebih dahulu, itu bebas-bebas saja.
Jika semuanya sudah aman, silahkan buka file index.html yang tadi dibuat dengan menggunakan browser. Jika tampilannya sudah seperti berikut, maka itu artinya kamu telah berhasil menginstall Bootstrap pada halaman web yang kamu buat.
Pengertian Bootstrap, fungsi dan juga kelebihannya – Bootstrap adalah sebuah library framework CSS yang dibuat khusus untuk bagian pengembangan front-end website. Bootstrap juga merupakan salah satu framework HTML, CSS dan javascript yang paling populer di kalangan web developer yang digunakan untuk mengembangkan sebuah website yang responsive. Sehingga halaman website nantinya dapat menyesuaikan sesuai dengan ukuran monitor device (desktop, tablet, ponsel ) yang digunakan pengguna disaat mengakses website website dari browser. Pada mulanya bootstrap bernama “Twitter Blueprint” yang dikembankan oleh Mark Otto dan Jacob Thornton di Twitter sebagai kerangka kerja untuk mendorong konsistensi di alat internal.
Dengan menggunakan Bootstrap seorang developer dapat dengan mudah dan cepat dalam membuat front-end sebuah website. Anda hanya perlu memanggil class-class yang diperlukan, misalnya membuat tombol, grid, tabel, navigasi dan lainnya.
Bootsrap telah menyediakan kumpulan komponen class interface dasar yang telah dirancang sedemikian rupa untuk menciptakan sebuah tampilan yang menarik dan ringan. Selain komponen class interface, bootsrap juga memiliki grid yang berfungsi untuk mengatur layout pada halaman website. Selain itu developer juga dapat menambahkan class dan CSS sendiri, sehingga memungkinkan untuk membuat desain yang lebih variatif. Salah satu contoh website yang menggunakan framework bootsrap yaitu twitter. Bootstrap sendiri sebenarnya dikembangkan oleh developer twitter sehingga bootsrap sering juga disebut dengan “ twitter bootsrap “.
Bootstrap sendiri sudah kompatibel dengan versi terbaru dari beberapa browser seperti google chrome, firefox, internet explorer, dan safari browser. Meskipun beberapa browser ini tidak didukung pada semua platform.


Keunggulan Bootstrap
Keuntungan terbesar menggunakan Bootstrap adalah dilengkapi dengan perangkat gratis untuk membuat layout web yang fleksibel dan responsif serta komponen antarmuka yang umum. Selain itu, dengan menggunakan API dari Bootstrap Anda dapat membuat komponen antarmuka tingkat lanjut seperti Scrollspy dan Typeaheads tanpa menulis satu baris JavaScript.
Berikut adalah beberapa keuntungan lainnya, mengapa Anda harus memilih Bootstrap:

  • Hemat banyak waktu
    Anda dapat menghemat banyak waktu dan usaha menggunakan template dan komponen Bootstrap yang telah ditentukan dan berkonsentrasi pada pekerjaan pengembangan lainnya.
  • Fitur responsif
    Dengan menggunakan Bootstrap, Anda dapat dengan mudah membuat desain yang responsif. Fitur responsif Bootstrap membuat halaman web Anda tampil lebih baik pada perangkat dan resolusi layar yang berbeda tanpa adanya perubahan markup.
  • Desain yang konsisten
    Semua komponen Bootstrap merupakan template dan gaya desain yang sama, sehingga desain dan tata letak halaman web Anda konsisten selama Anda melakukan pengembangan website.
  • Mudah digunakan
    Bootstrap sangat mudah digunakan. Siapa saja yang memiliki pengetahuan dasar tentang HTML dan CSS dapat memulai pengembangan dengan Bootstrap.
  • Kompatibel dengan semua browser
    Bootstrap dibuat dengan browser modern dan kompatibel dengan semua browser populer seperti Mozilla Firefox, Google Chrome, Safari, Internet Explorer, dan Opera.
  • Open Source
    Gratis untuk diunduh dan digunakan.
  • Dokumentasi yang lengkap
    Bootstrap tidak hanya menawarkan styling untuk hampir setiap elemen yang dibutuhkan aplikasi situs web atau web biasa, namun juga menyediakan dokumentasi yang sangat lengkap dengan contoh dan demo yang membuatnya lebih mudah bagi pengguna baru sekalipun.

Selain itu, Bootstrap membutuhkan jQuery untuk berbagai komponennya. jQuery adalah perpustakaan JavaScript yang sangat populer dan banyak digunakan, yang menyederhanakan dan menambahkan kompatibilitas ke semua browser.