Tentang BOOTSTRAP
https://im-informatika.blogspot.com/2014/11/tentang-bootstrap_22.html
Tentang 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. 1. Cara Import Bootstrap ke Halaman Web
Pertama, download bootstrap di getbootstrap. Setelah download letakkan css bootstrap dalam folder project website yang akan agan buat. Setelah itu panggil ke dalam website menggunakan link rel, pastikan css bootstrap berada pada bagian teratas. Jangan ada import file css diatas bootstrap.
<link rel="stylesheet" href="css/bootstrap.css">
Pada script di atas, bootstrap.css saya letakkan pada folder css yang berada 1 direktori dengan index.html. Apabila agan ingin menggunakan bootstrap pada website yang online di internet, agan bisa menggunakan CDN dari bootstrap untuk diimport di halaman website agan. Berikut cara menggunakan bootstrap dari CDN.
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Dengan kode di atas, agan bisa import css bootstrap di website agan. Namun file css bootstrap tidak berada di server yang agan gunakan. Menurut saya kode tersebut cocok digunakan untuk custom css di blogger. Karena kita tidak memiliki tempat untuk upload file css sendiri :D.
Setelah belajar cara import bootsrap, sekarang kita mencoba beberapa library bootstrap yanga ada.
2. Cara Menggunakan Bootstrap
Untuk menggunakan bootstrap sebenarnya mudah, kita tinggal buat sebuah tag html yang diikuti dengan nama class. Berikut contoh form dengan bootstrap
<input type="text" class="form-control" placeholder="Text input">
Selengkapnya tentang contoh penggunaan bootstrap bisa dilihat pada halaman dokumentasi bootstrap.
3. Tips dan Trik Menggunakan Bootstrap
Tadi sempat saya singgung, bahwa import bootstrap pada halaman atas. Karena css teratas akan di tumpuki oleh script yang ada di bawahnya. Oleh karena itu saya sarankan untuk import bootstrap pada bagian teratas karena apabila ada sesuatu yang kurang cocok dengan style default bootstrap kita bisa dengan mudah untuk menumpuki / override.
Misal untuk Heading 1 / H1 di bootstrap secara default 36px, dengan menggunakan override ini, kita bisa dengan mudah merubah H1 menjadi ukuran 30px. Dan style tersebut kita import tepat berada di bawah import bootstrap.
Berikut kode susunan external css yang biasanya saya gunakan dalam membuat layout website. Import bootstrap di bagian atas, dan custom css yang berada di bawahnya.
<head> <title>Lintas Informatika</title> <link rel="stylesheet" href="css/bootstrap.css"/> <link rel="stylesheet" href="css/style.css"/> <style></style> </head>
Kita tidak perlu lagi mengatur berbagai macam parameter CSS yang kadang membingungkan. Bootstrap termasuk salah satu framework yang mudah digunakan dan memiliki dokumentasi yang lengkap. Jadi cocok digunakan untuk agan - agan yang belajar membuat halaman website yang bisa tetap enak dilihat pada perangkat mobile dengan resolusi kecil (responsive) :). sekian dulu, semoga bermanfaat. sampai jumpa dipostingan berikutnya :)
