Twitter Bootstrap adalah kode yang paling banyak di unduh di github. Kenalan yuk, jangan sampai kita nggak kenal sama toolkit yang dikembangkan oleh Twitter ini.Belum tau Framework Twitter Bootstrap? Mari berkenalan dengan Twitter Bootstrap!
Bootstrap adalah sebuah framework yang dapat menyelesaikan permasalahan dalam mendesain web. Slogan dari framework ini adalah “Sleek, intuitive, and powerful front-end framework for faster and easier web development”, yang berarti kita dapat mendesain sebuah website dengan lebih rapi, cepat dan mudah. Selain itu Bootstrap juga responsive terhadap banyak platform, artinya tampilan halaman website yang menggunakan Bootstrap ini akan tampak tetap rapi, baik versi mobile maupun desktop.
Saat ini penggunaan Bootstrap sudah meluas di kalangan desainer front-end web, perkembangannya pun masih terus berlangsung hingga sekarang. Penggunaannya pun tidak begitu rumit. Mudah, karna kita tinggal memanggil CSS dan JS yang tersedia lalu menuliskan class-class nya di kodingan kita aja gan.
Bootstrap memiliki 12-column responsive grid,
macam-macam components, JavaScript
plugins, typography, form controls, dan juga sebuah web-based Customizer untuk
membuat Bootstrap agan sendiri.
Agan tau twitter kan? nah twitter juga menggunakan CSS frameworks
ini gan. Jadi kalo agan pengen punya
tampilan yang “mahal” agan tinggal pake Bootstrap ini aja. Bootsrap bisa di
unduh melalui situs ini gan Bootstrap.
Silahkan download Bootstrap di situs yang di atas, lalu extract di folder yang mudah dijangkau (agar mudah mencarinya). Berikut adalah struktur dari file Bootstrap :
Sebelumnya kita harus tau, apa ngaruhnya pake bootsrap atau nggak. Untuk itulah agan langsung praktekkin langkah ini aja ya. Oh ya, agar lebih efisien alangkah baiknya membuat sebuah folder dengan nama latihan, dan di dalamnya ada folder yang tadi di extract dari bootstrap.
Sekarang kita akan membedakan website yang memakai bootstrap dan yang tidak memakai bootstrap. Pertama kita akan buat yang tidak memakai bootstrap, buka text editor agan. Selanjutnya buat sebuah file bernama latihan.html dan isikan file tersebut dengan syntax di bawah ini :
Lalu, save dan klik dua kali pada file tersebut. Maka hasilnya akan seperti berikut :
Sekarang buat file baru dengan nama index.html, kita akan membuat website dengan Bootstrap. Dan lihat perbedaannya. Ketikkan syntax di bawah :
Pada file diatas saya menambahkan tag-tag yang baru dari file yang sebelumnya. Pada tag meta, kodingan kita akan dibuat responsive. Dan kita juga telah memanggil file bootstrap.min.css dalam folder css di dalam folder bootstrap kita juga. Begitu juga dengan bootstrap.min.js yang
dipanggil dari folder js dalam folder bootstrap.
Lalu, simpan dan jalankan pada browser dan hasilnya seperti ini :
Apa yang beda?
Tentu tulisannya akan mengikuti gaya bootstrap. Dan ini keren ! Ciyus miapah. Selamat gan, selamat masuk di dunia modern ala bootstrap !
Saya berharap agan sedikit banyak sudah mengenal HTML,CSS dan Javascript. Jadi penggunaan istilah-istilah dalam buku ini akan lebih agan mudah mengerti.
Oke sekian pengenalan mengenai Framework Bootstrap. See you later!
Silahkan download Bootstrap di situs yang di atas, lalu extract di folder yang mudah dijangkau (agar mudah mencarinya). Berikut adalah struktur dari file Bootstrap :
Sebelumnya kita harus tau, apa ngaruhnya pake bootsrap atau nggak. Untuk itulah agan langsung praktekkin langkah ini aja ya. Oh ya, agar lebih efisien alangkah baiknya membuat sebuah folder dengan nama latihan, dan di dalamnya ada folder yang tadi di extract dari bootstrap.
Sekarang kita akan membedakan website yang memakai bootstrap dan yang tidak memakai bootstrap. Pertama kita akan buat yang tidak memakai bootstrap, buka text editor agan. Selanjutnya buat sebuah file bernama latihan.html dan isikan file tersebut dengan syntax di bawah ini :
<html>
<head>
<title>Web Tanpa Bootstrap</title>
</head>
<body>
<h1>Hello, ini website tanpa bootstrap.</h1>
<script src="http://code.jquery.com/jquery.js"></script>
</body>
</html>
Lalu, save dan klik dua kali pada file tersebut. Maka hasilnya akan seperti berikut :
Sekarang buat file baru dengan nama index.html, kita akan membuat website dengan Bootstrap. Dan lihat perbedaannya. Ketikkan syntax di bawah :
<html>
<head>
<title>Website dengan Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Bootstrap-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<h1>Hello, website ini menggunakan Bootstrap</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap-min.js"></script>
</body>
</html>
Pada file diatas saya menambahkan tag-tag yang baru dari file yang sebelumnya. Pada tag meta, kodingan kita akan dibuat responsive. Dan kita juga telah memanggil file bootstrap.min.css dalam folder css di dalam folder bootstrap kita juga. Begitu juga dengan bootstrap.min.js yang
dipanggil dari folder js dalam folder bootstrap.
Lalu, simpan dan jalankan pada browser dan hasilnya seperti ini :
Apa yang beda?
Tentu tulisannya akan mengikuti gaya bootstrap. Dan ini keren ! Ciyus miapah. Selamat gan, selamat masuk di dunia modern ala bootstrap !
Saya berharap agan sedikit banyak sudah mengenal HTML,CSS dan Javascript. Jadi penggunaan istilah-istilah dalam buku ini akan lebih agan mudah mengerti.
Oke sekian pengenalan mengenai Framework Bootstrap. See you later!
Hal ini sungguh sangat bermanfaat sekali...terimakasih telah berbagi...
BalasHapusIjin berbagi ya sobat...4 Desain Kursi Tamu Minimalis Modern Terbaru Yang Cantik, rumahminimalisok.com...terimakasih...