Sebagai pengertian bootstrap di atas yaitu bootstrap berfungsi untuk membuat tampilan pada website lebih ringan dan responsive juga mendukung terhadap berbagai macam browser.
 |
| Bootstrap |
Web Design | Langkah Awal Sebelum Mempelajari Bootstrap - Sebelum kita mempelajari cara membuat template responsive kita mengenal terlebih dahulu apa itu bootstrap agar nanti kita bisa menyerap semuanya dengan baik.
Apa Itu Bootstrap?
Secara garis besar bootstrap adalah cara menyusun bagian-bagian pada pada template website agar bisa tampil lebih ringan, lebih cepat, dan tersusun dengan rapi pada saat website dibuka melalui berbagai tipe gadget. Bootstrap sendiri mencakup HTML, dan CSS dalam menyusun template dengan melingkupi font, form, tabel, tombol ataupun navigasi menu agar tersusun dengan rapi dan nyaman.
Untuk apa dan bagaimana cara membuat Bootstrap?
Sebagai pengertian bootstrap di atas yaitu bootstrap berfungsi untuk membuat tampilan pada website lebih ringan dan responsive juga mendukung terhadap berbagai macam browser. Untuk cara membuat bootstrap kita bisa mendownload file bootstrapnya dulu melalui getbootstarp.com atau bisa melalui CDN.
Berikut dasar yang wajib anda lakukan terlebih dahulu sebelum menambahkan perintah bootstrap yang lainnya, jika anda sudah memahami penulisan HTML dan CSS, maka akan dengan mudah menyerap materi Bootstrap ini.
Kita coba ingat-ingat dulu hal wajib pada HTML, jika kita hendak menuliskan sesuatu pada halaman web, sama seperti kita mau menulis pada selembar kertas, jika kita mau menulis tentu kita harus mempunyai selembar kertas, selembar kertas mempunyai batas atas, kiri, kanan, dan bawah. Dalam HTML juga demikian, nah agar menjadi selembar kertas maka kode yang wajib ada pada HTML adalah :
[<html>
<head>
<title></title>
</head>
<body>
Kita akan menulis di sini
</body>
</html>]
Kode wajib di atas baru menjadi selembar halaman, Maka begitu juga dengan Bootstrap, ada hal yang menjadi wajib ada saat penyusun Bootstrap pada halam website kita.
Memulai Pembuatan Bootstrap.
Ada 3 hal yang perlu kita lakukan dalam pembuatan halaman web bootstrap, untuk lebih jelasnya kita lakukan satu persatu.1. Memberikan kode HTML 5
Kita harus selalu memulai penulisan kode HTML 5 di dalam halaman website bootstrap kita, untuk menuliskan kode HTML 5 bisa anda lihat kode di bawah ini, dan bandingkan dengan kode HTML dasar di atas. Terdapat <!DOCTYPE html> dan < meta charset="utf-8">
[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html> ]
2. Masukkan kode Bootstrap Mobile 3
Kita masukkan kode berikut ini pada element viewport skala pada element <head> ,
[<meta name="viewport" content="width=device-width, initial-scale=1">]
- [message]
- Penjelasan :
- Width-device-width dimaksudkan agar halaman menyesuaikan dengan lebar dari gadget yang digunakan dan initial-scale=1 maksudnya pada saat website pertama kali loading menggunakan scala dasar 1 yaitu gadget laptop, pc, dan lainnya.
3. Masukkan Container
Container ini maksudnya yaitu bungkus dari semua yang tersusun pada halaman website, dan container ini menggunakan element <div class='container'> atau <div class='container-fluid'>. Dalam Bootstrap terdapa dua container yang bisa kita gunakan yaitu .container dan .container-fluid.
Untuk lebih lengkapnya penggabungan dari 3 hal yang wajib kita berikan pada halaman bootstrap bisa ada lihat pada kode di bawah ini.
Contoh Menggunakan Container
[<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Contoh Halaman Menggunakan container</h1>
<p> Ini adalah tulisan paragrap.</p>
</div>
</body>
</html>]
Contoh Menggunakan container-fluid
[<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Contoh Halaman Menggunakan container-fluid</h1>
<p> Ini adalah tulisan paragrap.</p>
</div>
</body>
</html> ]
Demikian Langkah Awal Sebelum Mempelajari Bootstrap.
Post A Comment: