Posted by : alimshare Minggu, 19 Oktober 2014

Sedang pengen share cara penggunaan bootstrap di web , siapa tau bisa bermanfaat dan sekaligus buat bahan pengingat klo kapan-kapan lupa cara pakenya :D



Nah , langsung aja deh penjelasannya ...
Untuk menggunakan Bootstrap kita bisa menggunakan dengan 2 cara , yaitu :


1. Akses langsung ke internet.
Untuk cara yang satu ini sangat mudah dalam penggunaannya , tetapi kekurangnya kita harus terkoneksi ke internet karena kita mengakses file-file bootstrapnya secara langsung via Internet.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
2. Download file nya dan kita akses melalui file lokal kita .
Cara yang kedua ini sedikit lebih ribet dari cara yang pertama , karena kita harus menyesuaikan projek kita dengan lokasi file bootstrap yang sudah kita download .
    Berikut ini akan saya coba sampaikan beberapa langkah-langkah yang kita perlukan untuk melakukan instalasi Bootstrap ke projek kita .
-   Download File Bootstrap di http://getbootstrap.com/getting-started/#download

Struktur file bootstrap
  - Buat file contoh , untuk mempermudah silahkan meniru contoh code HTML dibawah ini :


  - Selanjutnya simpan file kita di folder bootstrap yang barusan kita download , maka kurang lebih letaknya akan seperti ini :
index.html merupakan nama file yang barusan kita buat dengan menggunakan kode HTML diatas.   
Nah setelah dijalankan di browser , maka hasilnya kurang lebih akan seperti gambar dibawah :

 
Nah demikian , panduan singkat dari saya tentang panduan instalasi Bootstrap ke projek kita , untuk lebih dalam tentang Bootstrap silahkan teman-teman eksplorasi sendiri di Official Website nya :


Nah , demikian post dari saya tentang Instalasi Bootstrap nya , jika ada pertanyaan , kritik dan saran , silahkan disampaikan , jangan sungkan untuk menyampaikan pendapat

Terima Kasih .

{ 6 komentar... read them below or Comment }

  1. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  2. Bang, saya punya projek nih. waktu temen saya bikin di laptopnya pake bootstrap, susunan UI nya rapi. Tapi waktu pindah ke laptop saya, susunannya hancur. Padahal sama2 konek internet, konek dengan jaringan wifi yang sama, dan di jam yang sama. Apakah itu karena saya belum install bootstrap atau bagaimana?

    BalasHapus
    Balasan
    1. Terima Kasih untuk pertanyaannya ,

      untuk masalah mas alief sebenernya bisa macam2 mas penyebabnya. pertanyaan dari saya, bagaimana cara akses bootstrap nya ?
      apakah via internet / source pada file lokal ?

      tapi di beberapa kasus resolusi komputer kadang memang mempengaruhi susunan content di dalam website ketika menggunakan bootstrap. jadi definisi berantakannya mungkin bisa lebih di perjelas lagi mas alief ? :D

      Hapus
    2. Terima kasih sudah menanggapi pertanyaan saya.
      Untuk akses sourcenya di file lokal pc saya. Jadi yang dimaksud berantakan itu waktu teman saya bikin di pcnya dia, itu sesuai yg diinginkan dia. Waktu setelah filenya saya copy ke pc saya, susunannya berubah semua seperti tombol submit yang harusnya ada tapi malah jadi gak ada tombolnya cuma ada tulisan submit doang, terus seperti yang harusnya ada bagian footer untuk tulisan copyright malah jadi footernya naik ke bagian body.

      Hapus
    3. jika berantakan seperti yang disampaikan mas alief, saya rasa memang karena bootstrap belom terinstall dengan baik pak projeknya.

      mungkin dari mas aliefnya bisa dicek terlebih dahulu .
      - pada browser tekan Ctrl+U untuk view source dari program.
      - lalu cek library2 bootstrap nya . apakah sudah benar2 terakses dengan baik atau tidaknya.

      semoga bisa membantu . :)

      Hapus
  3. Apakah penggunaan bootstrap lebih mudah di bandingkan dengan Code Igneter?

    BalasHapus

- Copyright © alimshareinfo.blogspot.com -Metrominimalist- Powered by Blogger - Designed by Johanes Djogan -