Tips belajar CSS bootstrap

   

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 Javascripts.

     Bootstrap pertama kali dirilis tahun 2011 lalu dengan lisensi dari apache.lalu bagaimana mengunakan bootstrap ? 

Pertama - tama yang harus kita lakukan adalah dengan mengunjungi website dari bootstrap tersebut untuk memperoleh file yang kita butuhkan, alamatnya adalah bootstrap 3.3.2 

Kedua setelah terdownload file yang kita butuhkan extract file zip tersebut dan buka foldernya.

Ketiga lihat setiap isi file yang ada, yang kita butuhkan adalah dengan membuat file index untuk menampilkannya dibrowser. 

Baca Juga

• Tips belajar CSS bootstrap

dengan mengimport css yang telah disediakan bootstrap

            <link href="css/bootstrap.min.css" rel="stylesheet">

<div class="container">
    <h1>Apa Kabar Dunia?</h1>
    <!-- Small modal -->
<button class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-sm">Klik Aku</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
        </div>
        <div class="modal-body">
          Hai... salam kenal dari aku. Jika dialog ini muncul dan Anda bisa baca tulisan ini berarti Bootstrap berhasil di load 

dan terintegrasi dengan baik. Selamat Belajar
        </div>
      </div>
    </div>
  </div>
</div>

juga import jquery yang ada pada bootstrap tersebut dengan scripts sebagai berikut 

<script src="js/jquery-1.11.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

 perhatikan setiap scripts yang ada sesuaikan dengan penyimpanan pada folder anda. 

js yang tergaris bawah tersebut adalah nama folder penyimpanan jquery 

 sekian dahulu selamat belajar semoga sukses