Tentang Bootstrap

 

Apa Itu Bootstrap? Bagaimana Menggunakan Bootstrap?

 

Apa Itu Bootstrap?

         Bootstrap merupakan sebuah framework CSS dari twitter, yang menyediakan kumpulan komponen-komponen antarmuka dasar pada web yang telah dirancang sedemikian rupa untuk digunakan bersama-sama. Selain komponen antarmuka, Bootstrap juga menyediakan sarana untuk membangun layout halaman dengan mudah dan rapi, serta modifikasi pada tampilan dasar HTML untuk membuat seluruh halaman web yang dikembangkan senada dengan komponen-komponen lainnya.

Mengutip pengembang yang menciptakan Bootstrap, Bootstrap dibuat untuk memberikan sekumpulan perangkat yang dapat digunakan untuk membangun website sederhana dengan mudah.

Bootstrap is a very simple way to promote quick, clean and highly usable applications, providing a clean and uniform solution to the most common, everyday interface tasks developers come across. Mark Otto

        Lisensi yang digunakan oleh Bootstrap yaitu lisensi Apache 2.0, sebuah lisensi yang sangat terbuka sehingga kita dapat dengan bebas dan mudah menggunakan Bootstrap, tanpa perlu khawatir akan ancaman legal dari Twitter atau pihak lainnya.

Untuk Apa itu bootstrap?

Bootstrap dengan segala kelengkapannya yang dibutuhkan pada masalah design baik itu menggunakan css maupun javascript, sudah disajikan begitu mudah, menarik dan tentunya mampu menyelesaikan design secara cepat. Tampilan yang juga responsive pada banyak platform, tetap rapi baik pada tampilan versi desktop maupun pada versi mobile.

Penggunaan bootstrap sudah sampai pada design front-end web, dan itu masih akan terus berkembang sampai sekarang. Dengan penggunaan yang terbilang mudah, kita hanya memanggil CSS atau pun Javascript yang sudah disediakan kemudian menuliskannya pada koding kita dengan disesuaikannya class-class yang dibutuhkan. Kalau masih penasaran bisa download disini untuk bootstrapnya. Dan juga disini untuk download bootstrap offline guide.

Pada bootstrap terdapat struktur file seperti gambar dibawah.

Gambar-1. Struktur Bootstrap

Bagaimana Menggunakan Bootstrap?

Untuk memulai menggunakan Bootstrap, Anda harus mempersiapkan bahan dan tools pendukung untuk melengkapi kegiatan belajar tersebut.   Langkah-langkah yang dibutuhkan untuk menggunakan Bootstrap pada website yang akan kita kembangkan sangatlah sederhana. Sederhananya, penggunaan Bootstrap dapat dicapai dengan tiga langkah singkat, yaitu:

1. Download Bootstrap pada website resminya.
2. Lakukan ekstraksi file zip hasil download, dan
3. masukkan CSS Bootstrap pada file HTML anda.

Sangat sederhana, dan begitu selesai memasukkan Bootstrap pada file HTML, anda akan dapat melihat perubahan pada elemen-elemen HTML yang ada, tanpa harus melakukan apapun. Penasaran? Mari kita lihat langkah detil untuk menggunakan boostrap pada sebuah HTML sederhana.

1. Anda Harus memiliki file distribusi Bootstrap

Untuk menggunakan bootstrap, terlebih dahulu Anda harus mendownload resource file atau file distribusi yang disediakan oleh bootstrap di situs resminya getbootstrap.com. Pada halaman tersebut, terdapat tombol Download Bootstrap sebagaimana terlihat pada gambar diatas, langsung saja! klik tombol tersebut. Kemudian pilih lagi Download Bootstrap

Setelah didownload, kemudian extract menggunakan program seperti 7zip (Gratis) atau winRAR (shareware). Sebetulnya, Anda juga bisa membuka file tersebut dengan aplikasi bawaan windows dengan cara membuka file tersebut, kemudian copy seluruh file dan paste-kan ke folder lain.

2. Download jQuery Library Untuk Bekerja Offline

Untuk bisa mengaplikasikan bootstrap component seperti modal dialog, navigation bar dan lainnya yang membutuhkan boostrap JS, Bootstrap JS juga membutuhkan jQuery library agar bisa berjalan normal. Bootstrap tidak menyertakan jQuery di dalam file download-nya untuk itu, kita harus mendownloadnya secara terpisah. Hal ini dilakukan agar kita bisa bekerja dan menggunakannya secara offline (tanpa koneksi internet). Silahkan download jQuery library dengan menuju situs resmi jQuery Download, pilih jQuery 1.x kemudian, download dengan mengklik link Download the compressed, production jQuery 1.12.0

3. Anda harus memiliki code editor.

Code editor penting sekali untuk memanipulasi file yang akan kita kembangkan khususnya file HTML, CSS dan Javascript sebagaimana file tersebut terdapat pada bootstrap. Anda juga bisa menggunakan Code Editor dari kami yang dibuat untuk tes atau uji coba kode. Jangan pernah menggunakan Word processor (Microsoft Word, dll) ataupun notepad untuk memanipulasi file-file tersebut. Karena aplikasi tersebut tidak cocok dan terdapat banyak kekurangan yang akan membingungkan kita sendiri nantinya.

Ada banyak sekali code editor yang tersebar di internet yang dapat kita gunakan baik yang gratis maupun yang berbayar. Sebagai pemula, mungkin kita bisa memulai dengan menggunakan Notepad++. Aplikasi ini gratis dan banyak digunakan oleh developer. Download aplikasi Notepad++

Setelah semua dipersiapkan saatnya memulai untuk belajar bootstrap. Baik, ikuti tahap-tahapnya berikut ini:

1. Buat Folder Baru

Buatlah folder baru, beri nama misalkan "Belajar_Bootstrap".

2. Copy seluruh file Bootstrap ke dalam Folder Baru Tersebut

Copy folder css, fonts dan js yang ada pada Bootstrap yang telah kita download tadi, ke dalam folder baru tersebut (Belajar_Bootstrap)

3. Copy file jQuery ke dalam folder js

Copy dan Gabungkan file jquery-1.12.0.min.js yang telah kita download kedalam folder js punya bootstrap tadi, hal ini dilakukan untuk mempermudah proses pembelajaran.

4. Buat file html

Buat file baru dengan notepadd++ kemudian copy code snippet yang saya sediakan dibawah ini, kemudian save dan berilah nama seperti: index.html atau default.html dan simpanlah file tersebut ke folder "Belajar_Bootstrap" yang telah dibuat diatas. Berikut kodenya:

<!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 3.3.6 Starter Template - by dul.web.id</title>

    <!-- Bootstrap -->

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

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[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]-->

  </head>

  <body>

    <!-- AWAL CONTENT  -- hapus dari sini kebawah (sampai AKHIR CONTENT) -->

    <div class="container">

      <h1>Apa Kabar Dunia?</h1>

      <!-- Small modal -->

      <button class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-sm">Klik Aku</button>

      <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

        <div class="modal-dialog modal-sm">

          <div class="modal-content">

            <div class="modal-header">

              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

              <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>

            </div>

            <div class="modal-body">

              Hai... salam kenal dari <strong>dul</strong>. Jika dialog ini muncul dan Anda bisa baca tulisan ini berarti Bootstrap berhasil di load dan terintegrasi dengan baik. Selamat Belajar

            </div>

          </div>

        </div>

      </div>

    </div>

    <!-- AKHIR CONTENT - dari sini kebawah jgn dihapus -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="js/jquery-1.12.0.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

  </body>

</html>

Saatnya untuk Uji Coba

Buka file html yang telah dibuat dengan code snippet diatas, buka dengan browser terbaru misalkan Google Chrome atau Firefox jangan gunakan internet explorer. Jika file Bootstrap.css berhasil diload maka tombol button akan memiliki style ala bootstrap seperti ini:

Kita coba lagi apakah bootstrap.js berhasil di load dengan cara mengklik tombol

tersebut. Apabila muncul dialog box, maka bootstrap.js berhasil di load dan siap digunakan sebagai template. Gunakan template ini untuk setiap materi pembelajaran bootstrap dan hapuslah AWAL CONTENT sampai AKHIR CONTENT untuk memulai file baru kosong tanpa konten.

Tidak mau repot? Pengen Instant? Download Aja!

Nggak mau ngikutin step-step yang sudah diuraikan diatas. Baik, dul akan share link download siap saji yang bisa digunakan untuk memulai belajar bootstrap. Ini adalah bootstrap v3.2.0 3.3.0 3.3.1 3.3.5 3.3.6 yang didalamnya sudah dul berikan template seperti diatas. Download disini

 

Langkah Selanjutnya Apa?

Langkah selanjutnya mungkin Anda harus sering-sering mengunjungi situs resmi bootstrap di getbootstrap.com dan mempelajari dokumentasi yang telah disediakan. disini, kami sediakan tutorial bootstrap berbahasa Indonesia secara bertahap. Nantikan Artikel menarik lainnya mengenai Bootstrap.

 

Sumber :

·         http://dul.web.id/bootstrap/3/tuts-tips/belajar-bootstrap-untuk-pemula.php, 

·         https://bertzzie.com/post/31/bootstrap-sebuah-framework-css-dari-twitter,

http://jagowebsite8089.blogspot.co.id/2015/05/apa-itu-bootstrap.html