Anda di halaman 1dari 12

Bootstrap

Desain Web
Apa Itu bootstrap ?
Bootstrap adalah front-end framework yang solek, bagus dan luar biasa yang
mengedapankan tampilan untuk mobile device (Handphone, smartphone
dll.) guna mempercepat dan mempermudah pengembangan website.
Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah
untuk dikembangkan.
Untuk Apa itu bootstrap?
Bootstrap merupakan framework
untuk membangun desain web secara
responsif. Artinya, tampilan web yang
dibuat oleh bootstrap akan
menyesuaikan ukuran layar dari
browser yang kita gunakan baik di
desktop, tablet ataupun mobile
device.
Bagaimana Belajar Bootstrap untuk pemula?
Anda Harus memiliki file distribusi Bootstrap
(www.getbootstrap.com)
Download jQuery Library Untuk Bekerja Offline (www.jquery.com)
Anda harus memiliki code editor. ( Notepad ++)
Langkah membuat Bootstrap
Buat Folder Baru Buatlah folder baru, beri nama
misalkan "Belajar_Bootstrap".
Copy seluruh file Bootstrap ke dalam Folder
Baru Tersebut Copy folder css, img dan js yang ada
pada Bootstrap yang telah kita download tadi, ke
dalam folder baru tersebut (Belajar_Bootstrap)
Copy dan Gabungkan file jquery-
1.12.0.min.js yang telah kita download kedalam
folder js punya bootstrap tadi, hal ini dilakukan
untuk mempermudah proses pembelajaran.
Langkah membuat Bootstrap
Buat file htmlBuat file baru dengan notepadd++ kemudian copy code
snippet yang saya sediakan dibawah ini
Bagaimana Belajar Bootstrap untuk pemula?

Code di atas adalah code agar desain kita responsive. Dan perlu di perhatikan
pemanggilan bootstrap.js harus sesudah pemanggilan jquery.js , jadi jangan
sekali kali memanggil file bootstrap.js terlebih dahulu sebelum jquery.js kalau
javascript bootstrap ingin berjalan.
Container di bootstrap
Pertama.container container ini lebarnya tidak full
Kedua .container-fluid . container ini lebar nya full
<div class="container-fluid">
<h1>halaman pertama belajar bootstrap</h1>
<p>hallo. . ini adalah halaman pertamaku menggunakan bootstrap</p>
</div>
Column Bootstrap
Bootstrap menggunakan sampai dengan 12 column . yaitu column 3 ,
column 4 , column 6 , column 8 , column 12 . Itu sih sudah standard lebar
lebar yang biasanya kita gunakan saat desain website. Sebenarnya bisa saja
kita gunakan column 1 , column 2 dst jika di butuhkan.
Class Untuk Warna Text

Ada beberap warna background di bootstrap yg tersedia, kita tinggal


memanggil class nya sama seperti warna teks, hanya saja beda nama awalnya,
jika untuk text kita menggunakan .text-success
Tapi jika warna background, kita gunakan .bg-primary, .bg-success, bg-info,
bg-warning, and .bg-danger
Beberapa Class Typografi
Beberapa class typography di bootstrap
.lead
Untuk teks stand out
.small
Untuk teks kecil
.text-left
Untuk teks align kiri / rata kiri

Anda mungkin juga menyukai