Pengenalan Bootstrap 3 Untuk Front-End Web

Bootstrap 3 Untuk Front-End Web

Apa itu Bootstrap?

Bootstrap adalah framework open source untuk pengembangan web agar lebih mudah dan cepat. Bootstrap termasuk template untuk mendesain tampilan berbasis HTML dan CSS untuk bagian typografi, formulir, tombol, tabel, navigasi, modal, carousel gambar, serta lainnya, serta plugin opsional. Bootstrap juga memberikan kita kemudahan dalam mendesain tampilan yang responsive.

Apa itu Responsive Web Design ?
Adalah teknik dalam membuat situs web yang secara otomatis menyesuaikan diri agar terlihat bagus di semua perangkat, dari ponsel kecil hingga desktop besar.

Bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter, dan dirilis sebagai produk open source pada Agustus 2011 di GitHub.

Pada Juni 2014 Bootstrap adalah proyek No.1 di GitHub!

Apa Keuntungan Menggunakan Bootstrap?

Keuntungan dari Bootstrap:

1. Mudah digunakan: Siapa saja yang hanya memiliki pengetahuan dasar tentang HTML dan CSS dapat mulai menggunakan Bootstrap
2. Fitur responsif: CSS responsif Bootstrap menyesuaikan ke ponsel, tablet, dan desktop
3. Pendekatan mobile-first: Di Bootstrap 3, gaya mobile-first adalah bagian dari kerangka kerja inti
4. Kompatibilitas browser: Bootstrap kompatibel dengan semua browser modern (Chrome, Firefox, Internet Explorer, Safari, dan Opera)

Bagaimana cara mendapatkan Bootstrap?

Untuk mendapatkan bootstrap ada 2 cara mendapatkannya, yaitu :

• Mengunduhnya source code dari situs resminya di getbootstrap.com.
• Menggunakan link eksternal dari CDN.

Untuk mengunduh bootstrap silahkan download melalui situs resminya menggunakan link diatas dan ikuti petunjuk disana untuk lebih lengkapnya.

Jika kita tidak mau repot mengunduh source code dari bootstrap, kita bisa menggunakan link link eksternal dari CDN(Content Delivery Network). MaxCDN menyediakan dukungan CDN untuk CSS dan JavaScript Bootstrap. Juga termasuk jQuery. Adapun untuk menggunakan link eksternal dari CDN bisa menggunakan link dibawah ini.

MaxCDN

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">


<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>


<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Satu keuntungan menggunakan Bootstrap CDN:
Banyak pengguna telah mengunduh Bootstrap dari MaxCDN ketika mengunjungi situs lain. Akibatnya, itu akan diambil dari cache ketika mereka mengunjungi situs Anda, yang mengarah ke waktu pemuatan yang lebih cepat. Juga, sebagian besar CDN akan memastikan bahwa setelah pengguna meminta file dari itu, itu akan dilayani dari server terdekat dengan mereka, yang juga mengarah pada waktu pemuatan yang lebih cepat.

Sekian untuk hari ini. Simak tutorial berikutnya.

Share this post