Bootstrap CSS

Panditho Mahenda Rantin on December 1st, 2014

Belajar Bootstrap

Disini saya akan memberikan cara bagaimana menggunakan framework css Bootstrap, pertama – tama, saya akan menjelaskan apa itu framework, framework css.

Sebagai web developer, pasti sudah sering mendengar kata framework, yang paling sering di dengar adalah PHP framework dan Javascript Framework. Framework adalah sekumpulan fungsi, class, atau coding yang siap Digunakan. Tujuan adanya framework adalah mempercepat proses development dan membuat standarisasi coding. Hal lain tentang framework adalah untuk mempermudah kita untuk mendevelop suatau web atau aplikasi, kenapa ? karena semuanya sudah terstruktur dan sudah diatur, sehingga kita tidak harus coding dari awal lagi.

Dalam artikel ini saya akan membahas CSS Framework. Nah apa itu CSS Framework ? CSS framework adalah library CSS yang digunakan untuk membuat standarisasi layout dan desain dari website. Dengan CSS framework kita bisa membuat Front-end website dengan cepat mengingat layout dan tampilan sudah disediakan, tinggal bagaimana kita bereksplorasi imajinasi kita sendiri.

  Bootstrap CSS

Nah, langsung saja masuk ke tutorial Belajar Bootstrap CSS , pada tutorial Bootstrap CSS ini saya menggunakan Framework CodeIgniter yang sudah di pos sebelum nya. Siapkan terlebih dahulu file bootstrap nya, kalian  bisa download Bootstrap CSS di sini. Jika sudah, ekstrak dan copy file bootstrap nya ke folder htdocs masing-masing. kalau sudah di buat di folder htdocs masing – masing, mari kita masuk ke intinya langsung.

1. Buatlah Folder baru didalam htdocs, beri nama belajar_bootstrap.

Bootstrap CSS

Bootstrap CSS

2. Lalu masuk ke folder bootstrap yang di download tadi dan copy folder dist ke dalam folder belajar_bootstrap tadi.

002 Bootstrap CSS

002 Bootstrap CSS

3. Jika sudah, seperti yang saya bilang tadi, saya menggunakan framework php CodeIgniter, jadi saya harus mengcopy terlebih dahulu framework php nya, bagi yang sudah baca tutorial sebelum nya tentang Membuat Hello World di CodeIgniter pasti sudah tidak kaget dengan hal ini. Bagi kalian yang menggunakan Framework yang sama seperti saya, Seperti biasa, copy File codeIgniter nya terlebih dahulu. Kalau sudah di copy file CI (CodeIgniter) nya, maka harus nya seperti ini, jika sudah , maka langsung saja ke codingan nya.

003 Bootstrap CSS

4. Seperti Biasa, kalian harus mengonfig terlebih dahulu framework php nya. bagi

yangbelum tau, maka cek artikel ini  Membuat Hello World di CodeIgniter .

5. Jika sudah di config framework php nya, mari kita langsung terjun ke inti sebenarnya.

6. Salin lah codingan ini ke text editor kalian masing – masing di dalam index.php di dalam folder view. disini saya menggunakan sublime text. kenapa saya menyuruh untuk menyalin? kenapa tidak saya sertakan codingan nya langsung di post ini ? karena kalau mau jago coding yaa harus mandiri, dan jika ada error kalian harus berjuang untuk mencari letak error tersebut, bukan hanya sekedar copy paste saja, belajar lah dari kesalahan, jadikan error itu sebagai guru kalian :) , oke kita lanjut lagi..

004 Bootstrap CSS

004 Bootstrap CSS

7. Jika sudah, maka tampilan nya akan seperti ini.

Bootstrap CSS

Bootsstrap CSS

Sekian Tutorial dari saya, jika ada pertanyaan, atau kurang jelas, silahkan komen saja,

[contact-form][contact-field label='Name' type='name' required='1'/][contact-field label='Email' type='email' required='1'/][contact-field label='Keluhan / Problem' type='text'/][contact-field label='Comment' type='textarea' required='1'/][/contact-form]

Incoming search terms:

  • azza dan azael
  • belajar bootstrap#
  • belajar codeigniter bootstrap
  • JohnCMd and Bootstrap css
  • membangun web dengan boostrap pdf
  • tutorial bootstrap lengkap pdf

Tags:

Leave a Reply