Sekilas tentang Bootstrap Twitter. Twitter Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website.
Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan.
Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat 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 menggunakan JavaScript. (wikipedia)
Pada kesempatan kali ini admin akan membuat beberapa tutorial Bootstrap dari dasar, sehingga dapat 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 menciptakan 3 kolom yang sama besar. Anda akan dapat memahami dan mengerti memanfaatkan grid pada Bootstrap Twitter.
Sebelumnya anda dapat mendownload file Bootstrap Twitter di Sini
Dan anda memerlukan aplikasi xampp untuk localhost bisa anda download Disini
Pastikan anda mendownload Bootstrap dan Source code nya. Kemudian Ekstrak file tersebut dimanapun yang anda inginkan. Pada saat tutorial ini dibuat versi terakhir Bootstrap-3.3.7
Didalam folder Bootstrap-3.3.7-dist terdapat folder "css","fonts","js"
Buat folder baru 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 seperti Notepad, Notepad++, Wordpad, alangkah baiknya jika menggunakan Adobe Dreamweaver.
Buat file CSS, dengan cara klik menu File > New > CSS > Ok
Masukkan source code berikut
Pada kesempatan kali ini admin akan membuat beberapa tutorial Bootstrap dari dasar, sehingga dapat 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 menciptakan 3 kolom yang sama besar. Anda akan dapat memahami dan mengerti memanfaatkan grid pada Bootstrap Twitter.
Sebelumnya anda dapat mendownload file Bootstrap Twitter di Sini
Dan anda memerlukan aplikasi xampp untuk localhost bisa anda download Disini
Pastikan anda mendownload Bootstrap dan Source code nya. Kemudian Ekstrak file tersebut dimanapun yang anda inginkan. Pada saat tutorial ini dibuat versi terakhir Bootstrap-3.3.7
Didalam folder Bootstrap-3.3.7-dist terdapat folder "css","fonts","js"
Buat folder baru 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 seperti Notepad, Notepad++, Wordpad, alangkah baiknya jika menggunakan Adobe Dreamweaver.
Buat file CSS, dengan cara klik menu File > New > CSS > Ok
Masukkan source code berikut
Simpan didalam folder C:\xampp\htdocs\latihan\css\
Kemudian buat file html baru 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, bisa menggunakan browser apa saja, kemudian ketik localhost/latihan/grid1.html pada Address bar kemudian tekan tombol enter untuk melihat hasilnya
Jika anda sudah mengikuti step by step diatas maka hasilnya akan seperti ini.
Untuk lebih jelasnya bisa anda lihat video Tutorial yang saya buat dibawah ini.
Sekian Dulu
Semoga Bermanfaat
Jangan lupa like comment and Subscribe blog dan channel youtube aku 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
