Agen Sabung Ayam – Twitter Bootstrap secara sederhana adalah kumpulan atau library yang memanfaatkan CSS dan Javascript, termasuk didalamnya penggunaan jQuery, yang dapat dimanfaatkan sebagai Framework ataupun template awal pada proses pengembangan tampilan / interface halaman website yang sedang kita buat.

Twitter Bootstrap HTML CSS Javascript jQuery
Twitter Bootstrap memanfaatkan HTML, CSS dan jQuery

Definisi Twitter Bootstrap secara lebih dalam

Berikut adalah terjemahan bebas untuk twitter bootstrap yang diambil dari halaman Wikipedia;

Twitter Bootstrap merupakan framework untuk antar muka web yang bersifat open-source terdiri dari diantaranya adalah template desain HTML dan CSS untuk typography, forms, buttons, navigasi, layout atau grid juga ekstensi untuk javascript

Twitter Bootstrap fokus untuk mengembangkan framework di sisi depan atau antar muka web saja dan merupakan salah satu framework yang paling digemari dan memiliki kelompok pengguna yang luas karena secara langsung dapat mempercepat proses desain sebuah situs web.

Kemudahan yang bisa kita dapatkan dengan menggunakan Twitter Bootstrap Framework

Beberapa kemudahan yang akan kita dapatkan dengan memanfaatkan Twitter Bootstrap Framework diantaranya adalah sebagai berikut;

  • Responsiveness yang terintegrasi, fitur responsive grid yang dapat kita gunakan membuat kita dapat mengembangkan desain antar muka baik untuk tampilan Desktop ataupun Handphone dengan layar yang lebih kecil secara bersamaan dengan pendekatan Mobile First.
  • Template Elemen HTML yang lumayan lengkap, beberapa setup CSS dasar sepertinya contohnya dalam form dan table sudah disediakan oleh Twitter Bootstrap sehingga banyak sekali waktu yang dapat kita hemat untuk mempercantik tampilan antar muka situs web kita.
  • Proses Pengerjaan Desain yang konsisten, hal ini akan memudahkan kita dalam memeriksa ulang pekerjaan kita, atau memeriksa pekerjaan orang lain yang berada di dalam satu tim dengan kita.
  • Kemudahan untuk melakukan Modifikasi dan Tambahan, tambahan desain ataupun modifikasi terhadap framework sangat mudah untuk kita lakukan.
  • Kompatibilitas teknologi web dan Browser, pengembangan Twitter Bootstrap memperhatikan masalah kompatibilitas berbagai versi baik HTML maupun CSS dan Javascript di browser yang populer digunakan, sehingga kita perlu lagi membuang waktu untuk memeriksa apakah tampilan yang kita desain konsisten di browser lainnya.
  • Dokumentasi yang Lengkap dan mudah dibaca, dokumentasi lengkap yang disediakan di situs Twitter Bootstrap sangat memudahkan kita untuk merujuk penggunaan dari fitur yang disediakan.

Pemahaman yang komprehensif mengenai Twitter Bootstrap akan secara langsung memberikan manfaat berupa kemudahan bagi kita dalam proses pengerjaan sebuah situs web.

Panduan Penggunaan Twitter Bootstrap Framework

Twitter Bootstrap dapat dipelajari dengan sangat mudah apabila kita sudah memiliki pengetahuan atas HTML, CSS dan sedikit mengenai Javascript, penggunaan lengkap untuk setiap fitur yang disediakan dapat dilihat di situs utama mereka http://getbootstrap.com/ atau melalui kumpulan panduan di situs W3C yang dapat anda akses di http://www.w3schools.com/bootstrap/.

Artikel ini adalah artikel pembukaan dari kumpulan panduan Twitter Bootstrap dalam Bahasa Indonesia yang nantinya akan dapat anda akses melalui halaman untuk tag Twitter Bootstrap di situs ini, atau melalui form pencarian.

Melalui artikel ini kita akan mempelajari bagaimana untuk bisa menggunakan Twitter Bootstrap Framework di dalam proses pengembangan antar muka situs web yang sedang kita kerjakan. Contoh yang kontekstual untuk memudahkan pemahaman akan juga dilampirkan di sini.

Memanggil file CSS dan Javascript Twitter Bootstrap ke dalam file HTML kita

File Twitter Bootstrap yang harus kita panggil apabila kita ingin mulai menggunakan framework tersebut adalah sebagai berikut;

  • File CSS Twitter Bootstrap
  • File Javascript jQuery
  • File Javascript Twitter Bootstrap

Di atas adalah tiga file (minimal) yang harus kita panggil agar kita dapat memanfaatkan kemudahan yang ditawarkan oleh Twitter Bootstrap. Daftar tersebut dalam urutan yang sesuai, penting untuk diperhatikan bahwa library jQuery harus dipanggil sebelum kita memanggil library Javascript dari Twitter Bootstrap.

Tiga file (CSS, jQuery JS, JS) yang minimal harus dipanggil ke dalam file HTML agar kita bisa mulai memanfaatkan Twitter Bootstrap harus dipanggil secara berurutan.

Cara yang termudah untuk memanggil ke-tiga file tersebut ke dalam file html kita adalah dengan menggunakan Content Delivery Network (CDN) yang banyak tersedia. Artinya file tersebut akan kita panggil dari file HTML kita namun tetap disimpan di Server CDN yang kita gunakan, hasilnya baru akan bisa kita lihat apabila workstation yang kita gunakan terkoneksi dengan internet (untuk mendownload di background ke-tiga file tersebut).

Memanggil Twitter Bootstrap melalui Content Delivery Network

Sesuai dengan urutan di atas, maka di dalam file HTML kita harus memanggil ke-tiga file tersebut, berikut adalah yang kita tuliskan ke dalam file HTML kita, termasuk di dalam-nya URL untuk CDN yang kita gunakan (MAXCDN untuk Twitter Bootstrap dan Google Hosted Libraries untuk jQuery Javascript). Peletakkan lebih detilnya di dalam file HTML kita akan dijelaskan lebih lanjut.

 <!-- Latest compiled and minified CSS Twitter Bootsrap-->
 	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <!-- jQuery library -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <!-- Latest compiled JavaScript -->
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Sesuai dengan komentar yang diberikan di dalam kode HTML tersebut di atas, dapat diperhatikan bahwa file CSS Twitter Bootstrap dipanggil terlebih dahulu, baru kemudian file library jQuery dan terakhir file Javascript Twitter Bootstrap. jQuery harus dipanggil terlebih dahulu karena Javascript Twitter Bootstrap dikembangkan diatas jQuery.

File tambahan (opsional) yang dapat kita panggil di file HTML kita

Selain ketiga file tersebut di atas ada beberapa file lain yang juga dapat kita panggil di dalam file HTML yang sedang kita kerjakan untuk mempermudah proses desain yang sedang kita lakukan, file tersebut diantaranya;

  • File CSS untuk themes standard Twitter Bootstrap, modifikasi yang sifatnya pengembangan yang apabila ingin kita manfaatkan juga harus kita panggil. Informasi Basic Template dan contohnya ini dapat dipelajari lebih lanjut di http://getbootstrap.com/getting-started/#template
  • File CSS kita sendiri yang nantinya akan berisi modifikasi / kostumasi ataupun tambahan terhadap framework 

Selain kedua file tambahan tersebut kita juga akan harus menambahkan script Javascript tambahan sesuai dengan komponen Javascript yang akan kita gunakan. Sebagai contoh untuk menggambarkan posisi pemanggilan file tersebut di dalam sebuah halaman HTML dapat dilihat sebagai berikut;

<!doctype HTML>
  <html lang="id">
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- Latest compiled and minified CSS Twitter Bootsrap-->
      	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <!-- Custom CSS -->
	<link rel="stylesheet" href="custom.css">

</head>
    <body>
       <!-- Kode HTML -->

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
       <!-- Latest compiled JavaScript -->
       <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
         // fungsi javascript tambahan ataupun fungsi javascript twitter bootstrap yang ingin kita gunakan
       </script>
    </body>
  </html>

Perhatikan bahwa file CSS dipanggil dalam head HTML sementara untuk Javascript dipanggil terakhir sebelum tutupan body HTML, hal ini direkomendasikan untuk kita gunakan. Juga pada contoh tersebut kita memanggil file modifikasi CSS milik kita sendiri (custom.css) dan tidak memanggil atau menggunakan file CSS Basic Template dari Twitter Bootstrap.

Buat file css terpisah contohnya custom.css yang dapat kita pakai untuk memodifikasi class Twitter Bootstrap ataupun class CSS milik kita sendiri

File custom.css kita panggil setelah file css dari Twitter Bootstrap agar kita bisa melakukan modifikasi misalnya terhadap class yang sudah didefinisikan oleh Twitter Bootstrap.

Di dalam contoh di atas juga ditampilkan bahwa sebaiknya kita memberikan informasi meta viewport tambahan di dalam head untuk menentukan skala awal tampilan dan lebar dari tampilan viewport yang berguna untuk mengatur responsiveness dari desain kita baik untuk tampilan layar lebar maupun tampilan layar kecil.

Lebih Jauh menggunakan Twitter Bootstrap

Tentunya setelah kita berhasil memanggil Twitter Bootstrap ke dalam file HTML kita akan masih banyak proses yang harus kita lewati untuk menghasilkan sebuah situs web dengan tampilan yang rapih dan sejauh mungkin sesuai dengan standar teknologi web saat ini.

Ikuti terus artikel-artikel yang akan diterbitkan dalam tag Twitter Bootstrap di situs ini untuk mempelajari proses pemanfaatan Twitter Bootstrap di dalam desain kita.

Link

Advertisements