Mengenal dan Memulai Dengan Menggunakan Bootstrap

Kali ini saya akan membahas dan menyinggung mengenai bootstrap. Apa sih itu Bootstrap? Bootstrap adalah framework gratis untuk membuat web atau mengembangkan dengan cepat dan mudah. Didalamnya sudah terdapat HTML dan CSS untuk membuat desain template dan tercantum didalamnya yaitu typography, form, button, tables, navigation, modal, carousel dan masih banyak lainnya. Bootstrap sudah mendukung semua device/responsive design.

Bootstrap mudah digunakan bahkan dapat digunakan bagi yang belum menguasai HTML dan CSS, mempunyai fitur dengan mendukung seluruh device dan mendukung dari berbagai browser.

Bootstrap dapat digunakan di lokal dan dapat didownload di situs resminya. jika tidak ingin menggunakan lokal maka anda tinggal menuliskan dengan menggunakan MaxCDN seperti dibawah ini.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Jika ingin menggunakan dilokalhost maka anda harus mendownloadnya lewat situs resminya getbootstrap.com, dapat dilakukan dengan memanggil seperti diatas dengan menggunakan hirarki link anda, dapat dilihat dibawah ini.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="..../bootstrap/3.3.5/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="..../js/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="..../bootstrap/3.3.5/js/bootstrap.min.js"></script>

Bootstrap 3 dibuat dengan hal yang terpentingnya/intinya untuk dapat mendukung di seleuruh device, dengan menambahkan kode dibawah ini dan menuliskannya di antara head dengan elemen <meta>.

<meta name="viewport" content="width=device-width, initial-scale=1">

width="device-width" berfungsi sebagai penyesuaian pada halaman web yang akan mengikuti besar layar.

Bootstrap mempunyai dua elemen untuk membungkus halaman web atau sering disebut container, dua elemen tersebut yaitu: .container dan .container-fluid.

class .container merupakan pembungkus dengan model fixed sedangkan class .container-fluid pembungkus dengan gaya lebar wide/full.