.

Tuesday 2 September 2014

Apakah Bootstrap?


Bootstrap adalah koleksi alat (tool) untuk menghasilkan laman web dan aplikasi web. Ia mengandungi templat reka bentuk berasaskan HTML dan CSS untuk borang (form), butang (button),  navigasi dan komponen antara muka lain beserta pilihan sambungan (extension) JavaScript.

Bootstrap serasi dengan versi terbaru semua pelayar utama, tetapi grednya turun apabila digunakan pada pelayar lama seperti Internet Explorer 8. 

Sejak daripada versi 2.0, Bootstrap boleh menyokong reka bentuk web responsif. Ini bermaksud susun atur laman web boleh disesuaikan secara dinamik dengan mengambil kira ciri-ciri peranti yang digunakan seperti komputer, tablet dan telefon pintar. 

Bermula daripada versi 3.0, Bootstrap telah menerima pakai reka bentuk mudah alih pertama yang menekankan reka bentuk responsif secara lalai (default).

Bootstrap adalah sumber terbuka dan boleh didapati di GitHub. Pemaju (developer) digalakkan untuk mengambil bahagian dalam projek dan memberi sumbangan mereka kepada platform ini.

Bootstrap mengandungi :
  • Helaian Gaya CSS - Bootstrap menyediakan set helaian gaya yang memberikan definisi gaya asas untuk semua komponen HTML yang utama. Ia memberikan penampilan yang moden dan seragam bagi format teks, jadual (table), dan elemen-elemen borang (form).
  • Komponen yang boleh digunakan semula - Selain daripada elemen-elemen HTML yang biasa, Bootstrap mengandungi unsur - unsur antara muka lain yang biasa digunakan. Ini termasuk butang dengan ciri-ciri canggih (contohnya : butang yang berkumpulan ataupun butang dengan pilihan drop-down, senarai navigasi, tab mendatar dan menegak, navigasi "breadcrumb", muka surat (pagination) dan lain-lain), label, imej kecil (thumbnail), mesej amaran dan bar kemajuan (progress bar).
  • Komponen JavaScript - Bootstrap datang dengan beberapa komponen JavaScript dalam bentuk plugin jQuery. Elemen antara muka pengguna tambahan yang turut disediakan adalah seperti kotak dialog (dialog box), tip alatan (tooltip), dan "carousels".
Cara menggunakan :
  • Untuk menggunakan Bootstrap dalam halaman HTML, pemaju perlu memuat turun helaian gaya Bootstrap CSS terlebih dahulu dan masukkan pautan fail tersebut dalam fail HTML. Pemaju juga boleh menggunakan fail CSS dari helaian gaya LESS atau SASS yang dimuat turun dengan penyusun khas (special compiler).
  • Jika pemaju ingin menggunakan komponen JavaScript, mereka perlu memasukkan pautan ke perpustakaan jQuery (jQuery library) ke dalam dokumen HTML.
Tutorial Asas Bootstrap
  1. Muat turun Bootstrap dari Bootstrap


  2. Masukkan folder yang anda telah muat turun kedalam folder laman web anda.
  3. Kemudian masukkan pautan CSS dan jQuery kedalam fail HTML anda.
<html>
  <head>
    <link href="css/bootstrap.min.css" rel="stylesheet"></link>
    <link href="css/styles.css" rel="stylesheet"></link>
  </head>
  <body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
    </script>
    <script src="js/bootstrap.js"></script>
  </body>
</html>

0 comments:

Post a Comment