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

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  

 
close

UNTUK SAAT INI, ARTIKEL BLOG AKAN DITUTUPI. SEGERA KELUAR/CLOSE TAB INI ATAU TEKAN DISINI. JIKA ANDA TETAP INGIN MEMBUKA ARTIKEL INI, SILAHKAN TEKAN TOMBOL CLOSE. DENGAN ANDA MEMBUKA ARTIKEL KEMBALI, TANGGUNG JAWAB SEPENUHNYA MILIK ANDA, SAYA SUDAH PERINGATI UNTUK MENUTUP TAB INI. TERIMA KASIH. - ADMIN