Tutorial Bootstrap : Cara Memakai Grid Bootstrap Part 1

Sekilas perihal Bootstrap Twitter. Twitter Bootstrap yaitu sebuah alat bantu untuk membuat sebuah tampilan halaman website yang sanggup mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website.

Sesuai namanya, website yang dibentuk dengan alat bantu ini mempunyai tampilan halaman yang sama / menyerupai dengan tampilan halaman Twitter atau desainer juga sanggup mengubah tampilan halaman website sesuai dengan kebutuhan.

Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang sanggup membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun memakai JavaScript. (wikipedia)

Baca Juga

Pada kesempatan kali ini admin akan membuat beberapa tutorial Bootstrap dari dasar, sehingga sanggup memudahkan anda untuk memahami dan cara menggunakannya.

Cara Menggunakan Grid Pada Bootstra Twitter
Tutorial kali ini akan membahas bagaimana cara memanfaatkan grid yang sudah ada di Bootstrap Twitter dan mengaplikasikannya pada halaman html dengan membuat 3 kolom yang sama besar. Anda akan sanggup memahami dan mengerti memanfaatkan grid pada Bootstrap Twitter.

Sebelumnya anda sanggup mendownload file Bootstrap Twitter di Sini

Dan anda memerlukan aplikasi xampp untuk localhost sanggup anda download Disini
Pastikan anda mendownload Bootstrap dan Source code nya. Kemudian Ekstrak file tersebut dimanapun yang anda inginkan. Pada dikala tutorial ini dibentuk versi terakhir Bootstrap-3.3.7

yaitu sebuah alat bantu untuk membuat sebuah tampilan halaman website yang sanggup memperc Tutorial Bootstrap : Cara Menggunakan Grid Bootstrap Part 1

Didalam folder Bootstrap-3.3.7-dist terdapat folder "css","fonts","js"
Buat folder gres didalam htdocs (sebelumnya anda harus sudah menginstall aplikasi xampp) didalam directory C:\xampp\htdocs\ untuk nama folder terserah anda. Disini saya memberi nama folder dengan nama "latihan"

Copy folder "css","fonts","js" yang telah anda ekstrak ke folder C:\xampp\htdocs\latihan\
Buka Aplikasi text editor menyerupai Notepad, Notepad++, Wordpad, alangkah baiknya kalau memakai Adobe Dreamweaver.

Buat file CSS, dengan cara klik hidangan File > New > CSS > Ok
Masukkan source code berikut

Simpan didalam folder C:\xampp\htdocs\latihan\css\
Kemudian buat file html gres dengan nama grid1.html dengan cara File > New > Html > Ok
Masukkan source code berikut
Simpan didalam folder C:\xampp\htdocs\latihan\
Jalankan Aplikasi xampp, Start Mysql dan Apache

Yang terakhir buka browser anda, sanggup memakai browser apa saja, lalu ketik localhost/latihan/grid1.html pada Address bar lalu tekan tombol enter untuk melihat hasilnya

Jika anda sudah mengikuti step by step diatas maka balasannya akan menyerupai ini.