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)
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
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
Baca Juga
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
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
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.
Untuk lebih jelasnya sanggup anda lihat video Tutorial yang saya buat dibawah ini.
Sekian Dulu
Semoga Bermanfaat
Jangan lupa like comment and Subscribe blog dan channel youtube saya ya :D
Terimakasih
Contact Me
Google + : https://plus.google.com/u/0/+esaprasetio
Twitter : http://twitter.com/aphriell_art
IG : @aphriel_art
Pinterest : https://id.pinterest.com/esaprasetio/
Blog :
aprilartwork.blogspot.com for my artwork
aphriellart.blogspot.com for some tutorial
Email : aphriellart@gmail.com