Bootstrap Seri-1: Persiapkan Dirimu!!!

Kebutuhan Minimum

Apa Bootstrap?

Supaya tulisan saya laku, banyak dibaca netizen, topic yang akan saya bahas kali ini tidak terlalu berat, Bootstrap. Hehehe.

Dikutip dari websitenya getbootstrap.com, “Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.”

Jadi Bootstrap ini merupakan framework HTML dan CSS, tujuan dari adanya framework sendiri adalah untuk mempercepat pekerjaan. Karena ini merupakan framework HTML dan CSS, front-end programmer lah yang sering memanfaatkan keandalannya. Tapi, tidak menutup kemungkinan back-end programmer juga memanfaatkannya. Tidak hanya tampilan statis saja yang disediakan framework ini, anda juga bisa menambahkan tampilan yang dinamis, atau ada sedikit animasinya, karena di framework ini disediakan juga plugin Javascript. Bagusnya lagi, framework ini  mendukung web responsive, yaitu tampilan akan berubah ukurannya tergantung pada resolusi layar device yang digunakan pengguna ketika membuka web dari browsernya.

Template Dasar

Pertama yang harus anda pahami adalah template dasar dari bootstrap itu sendiri. Anda bisa langsung mengetahuinya dengan membuka langsung websitenya pada menu Getting Started.

 <!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 101 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>

Perhatikan pada snippet code diatas, pada baris ke 4 hingga 6 terdapat tag meta. Tag ini berfungsi untuk memberikan info pada browser, bahwa [baris 4] halaman yang sedang diakses menggunakan character berbasiskan utf-8, [baris 5] tampilannya benar-benar compatible dengan  Internet Explorer, dan [baris 6] halaman ini mendukung responsive web.

Karena kita menggunakan framework bootstrap maka file yang terkait bootstrap, CSS dan JS, harus diimport ke halaman ini. Pada baris 9 file css bootstrap.min.css di import sedangkan pada baris 15 file js bootstrap.min.js diimport. Ada satu file js lagi yang perlu di import, jquery.min.js. File ini harus diimport karena boootstrap.min.js tidak akan bisa jalan tanpa file ini. Ada semacam dependency atau ketergantungan antara jquery.min.js dan bootsrap.min.js. Bootstrap.min.js bergantung pada jquery.min.js. Oleh karena itu, urutan mengimport file tersebut terlabih dahulu harus jquery.min.js daripada bootsrap.min.js.

Instal Bootstrap

Untuk perkenalan bootstrap sampai disini, tidak perlu banyak basa-basi, langsung saja ke inti dari pembahasan ini. Download terlebih dahulu file zip di link https://github.com/twbs/bootstrap/archive/v3.3.4.zip . Package file zip ini merupakan paket lengkap, di dalamnya selain ada file core nya bootstrap juga ada example, dokumentasi, file less (bentuk mentahan css yang bisa dijalankan sesudah dilakukan kompilasi), dan lain-lain.

Langsung saja, kita praktek. Saya menggunakan editor Sublime (http://www.sublimetext.com/2). Ikuti langkah-langkah berikut:

  1. Buatlah folder baru, dengan nama myboots, di dalam folder tersebut buat 4 folder baru lagi yaitu: js, css, fonts, dan img. Catatan: Usahakan memisahkan jenis file atau ekstensi yang berbeda dalam beberapa folder supaya mudah dibaca jika proyek yang anda kerjakan diserahkan orang lain. Struktur folder tersebut bisa anda lihat disini. Selanjutnya, buat file index.html tepat di bawah folder myboots               .boot1
  2. Sekarang berpindah ke file zip yang baru anda download, extract file tersebut. Masuklah ke folder dist, di dalamnya anda akan melihat folder js, css, dan fonts, anda copy paste file bootstrap.min.css, bootstrap.min.js, dan semua isi folder fonts ke folder css, js, dan fonts secara berurutan di folder myboots, folder yang anda buat di langkah 1.
  3. Copy paste template bootstrap yang sudah saya tampilkan sebelumnya di atas di file index.html dengan menggunakan Sublime. Selanjutnya, buka file tersebut menggunakan browser kesayangan anda.
  4. Untuk mengetes apakah file yang harus di import ke halaman index.html sudah benar, anda bisa menggunakan browser google chrome dengan menggunakan inspect element dengan cara klik kanan – inspect element. Pilih tab network. Jika semua berwarna hitam dan tidak ada yang berwarna merah berarti anda sudah berhasil.
  5. Biasanya, anda gagal ketika mengeload jquery.min.js, hal itu dikarenakan anda tidak sedang terkoneksi dengan internet. Perhatikan pada template di baris 14, file tersebut diambil dari sebuah link web sehingga jika tidak ada internet maka anda tidak bisa mengambil fie tersebut. Kegagalan yang disebabkan selain kasus di atas, kemungkinan besar anda salah path atau file nya belum disimpan di folder yang disebutkan sebelumnya.boot2

Sekian penjalasan Bootstrap untuk seri pertama. Terima kasih atas kunjungannya dan tetap ikuti seri-seri berikutnya.

About irul

Kadang bisa serius amat. Tapi kebanyakan sih sukanya bercanda.

Posted on 22/04/2015, in programming and tagged , , . Bookmark the permalink. 3 Komentar.

  1. Mantap bung irul !!
    Ditunggu lanjutan postingan bootstrapnya :)

  1. Ping-balik: Seri-1 Bootstrap: Persiapkan Dirimu! : IlmuKomputer.Com

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: