Cara Menerapkan Bootstrap Untuk Pemula - Apa kabar ni sahabat developer? Mungkin disini ada yang hobby bergelut di bidang web. Khususnya pada bagian web design. Kalau iya, anda tidak salah untuk mampir ke blog ini.
Banyak cara untuk membuat template web. Ada sebagian orang yang biasa menggunakan photoshop untuk membuat template web mereka. Juga ada yang biasa ngoding dengan CSS untuk membuat template sesuai dengan yang mereka inginkan. Selain photoshop dan css, ada ni yang belakangan ini yang sangat ngetren yaitu Framework Bootstrap. Kita tidak perlu capek-capek untuk ngoding dari awal demi membuat template web, karena bootstrap membantu pekerjaan kita cepat selesai.
Bootstrap ?
Bootsrap adalah frond-end framework yang luar biasa bagus demi mengedepankan mobile device (Handphone, Smartphone, dll). Framework menyediakan HTML, CSS, dan Javascript yang siap pakai dan mudah untuk mengembangkan tampilan web menjadi interaktif maupun responsive.
Bootstrap, Untuk Apa Digunakan ?
Bootstrap merupakan framework yang digunakan untuk membangun tampilan web secara responsive, yang dalam arti tampilan yang dibuat oleh bootstrap akan menyesuaikan ukuran layar, baik itu ukuran layar monitor, smartphone, tablet, maupun yang lainnya.
Belajar Bootstrap Untuk Pemula
Untuk belajar bootstrap, anda harus mempersiapkan beberapa hal. Diantaranya : bahan dan tools pendukung untuk melengkapi kegiatan belajar. Baik langsung saja kita ke tahap pembahasan cara menerapkan bootstrap untuk pemula
1. Anda Harus Mempunyai File-File Bootstrapnya
Kalau kita belum mempunyai file bootstrapnya, kita bisa mendownloadnya disitus resminya getbootstrap.com. Setelah situs terbuka, klik tombol Download Bootstap. Maka kita akan dialihkan ke halaman getbootstrap.com/getting-started/#download. Setelah itu, klik tombol Download Bootstrap. File yang terdownload adalah file zip. Setelah itu, extract-lah filenya agar berbentuk menjadi folder. Di dalam folder bootstrap yang sudah kita extract terdapat 3 folder, yakni : css, fonts, js.
2. Penerapan Sederhana Bootstrap
Pada tahap ini kita langsung terjun ke coding. Buatlah newfolder (terserah), lalu copy-kan 3 folder yang ada didalam bootstrap yang sudah di extract tadi ke newfolder yang baru kita buat. Lalu bukalah text editor (notepad, notepad++, edit plus, dan sebagainya). Lalu kita ketikkan coding seperti ini contohnya :
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>Hello World !!!</h1>
<p><button class="btn btn-success btn-lg">Click!!!</button></p>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Simpan sintaks diatas dengan nama misalnya : (tes.html). Simpannya harus didalam newfolder yang kita buat tadi. Berarti nanti didalam folder kita ada 3 folder dari bootsrap dan 1 file (tes.html).
3. Tampilkan Hasil di Browser
Pada tahap ini, kita akan melihat hasilnya. Double klik-lah file tes.html, lalu kita akan sama-sama melihat hasilnya. Gimana, cukup mudah bukan. Hasilnya pun terlihat seperti dibawah ini
Terlihat jelas bahwa tombol yang warna hijau itu adalah button. Maka bisa dilihat sintaks diatas pada bagian <button class="btn btn-success btn-lg">Click!!!</button>
Kita cukup mengetahui class-class apa saja yang ada pada bootstrap, lalu kita cukup melakukan pemanggilan class-nya saja. Mudah bukan ?
Demikianlah artikel sederhana tentang cara menerapkan bootstrap untuk pemula. Semoga memberi penambahan wawasan sama kita ya.
EmoticonEmoticon