1. Pengertian
Bootstrap adalah kerangka kerja front-end open source yang gratis dan terbuka untuk merancang situs web dan aplikasi web . Ini berisi template desain berbasis HTML dan CSS untuk tipografi , form, tombol, navigasi dan komponen antarmuka lainnya, serta ekstensi JavaScript opsional. Tidak seperti banyak kerangka web, ini hanya menyangkut pengembangan front-end saja.
2. Latar Belakang
Mengapa memakai bootstrap? Karena, bootstrap merupakan sebuah library css. Yang dimana di dalamnya sudah ada style css yang sangat lengkap. Tidak mungkin juga kita akan membuat style css sendiri, tanpa vendor karena itu memerlukan penyesuaian lagi bila menggunakan browser yang berbeda.
3. Maksud dan Tujuan
- Memahami bootstrap
- Menegtahui apa saja yang ada di bootstrap
- Mengerti bagaiamana penerapan bootstrap
- PC
- Text Editor
2 jam
D. Uraian Kegiatan
1. Menyiapkan bootstrap vendor yang akan digunakan
2. Membuat file index.html misalkan seperti dibawah ini
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<h1>Ini contoh enerapn bootstrap</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>/
3. Memasukkan link untuk memanggil bootstrap
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.theme.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.theme.min.css">
</head>
<body>
<div>
<h1>Ini contoh enerapn bootstrap</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.theme.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.theme.min.css">
</head>
<body>
<div class="container">
<h1>Ini contoh enerapn bootstrap</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
6. Selesai.
NB: Sedikit catatan ya, apabila masih kurang puas dengan bootstrap, tetap bisa menggunakan css sendiri. Akan tetapi, mungkin ada yang bertabrakan, pada akhir pemberian value/nilai css diberi kata "!important" -> penting. Jadi yang diutamakan yang important.
E. Dokumentasi
Pada gambar diatas tidak full satu layar akan tetapi 80% ditengah.
F. Temuan Masalah
-
G. Hasil yang Didapatkan
Pada element yang diberi bootstrap bisa berubah.
H. Referensi
https://translate.google.com/translate?hl=id&sl=en&u=https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)&prev=search
Tidak ada komentar:
Write komentar