Bootstrap adalah HTML, CSS dan Javascript Framwork yang paling terkenal dalam mengembangkan responsive website, Bootstrap dapat di download dan di gunakan secara bebas.
Bootstrap menyediakan html dan css design template untuk typography, forms, buttons, tables, navigation, modals, image carousels dan lainnya termasuk javascript.
dimana dengan menggukan botstrap kita dapat dengan mudah membuat responsive website.
apa responsive website? responsive website adalah website yang secara otomatis menyesuaikan agar terlihat bagus pada setiap perangkat yang mengaksesnya, dari yang kecil seperti HP sampai desktop.
sejarahnya bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter, dan di kenalkan sebagai open source product pada bulan agustus tahun 2011 di GitHub.
untuk mendapatkan Bootstrap dapat di download dari getbootstrap.com
file bootstrap terdiri dari file css, javascript dan fonts, kita bisa menggunakannya dengan cara meletakannya di folder project kita, di server lokal kalau menggunakan xampp di letakan di folder xampp >> htdocs, dan kita bisa juga meletakannya di web hosting kita.
jika kita tidak ingin download dan menggunakan file bootstrap di webserver kita sendiri, kita bisa menggunakannya melalui CDN (Content Delivery Network).
MaxCDN menyediakan CDN yang mendukung bootstrap.
Bootstrap menyediakan html dan css design template untuk typography, forms, buttons, tables, navigation, modals, image carousels dan lainnya termasuk javascript.
dimana dengan menggukan botstrap kita dapat dengan mudah membuat responsive website.
apa responsive website? responsive website adalah website yang secara otomatis menyesuaikan agar terlihat bagus pada setiap perangkat yang mengaksesnya, dari yang kecil seperti HP sampai desktop.
sejarahnya bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter, dan di kenalkan sebagai open source product pada bulan agustus tahun 2011 di GitHub.
untuk mendapatkan Bootstrap dapat di download dari getbootstrap.com
file bootstrap terdiri dari file css, javascript dan fonts, kita bisa menggunakannya dengan cara meletakannya di folder project kita, di server lokal kalau menggunakan xampp di letakan di folder xampp >> htdocs, dan kita bisa juga meletakannya di web hosting kita.
jika kita tidak ingin download dan menggunakan file bootstrap di webserver kita sendiri, kita bisa menggunakannya melalui CDN (Content Delivery Network).
MaxCDN menyediakan CDN yang mendukung bootstrap.
MaxCDN
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Keuntungan menggunakan bootstrap CDN adalah banyak pengguna sudah mendownload bootsrap dari MaxCDN ketika mengunjungi website yang lain jadi itu akan dimuat dari cache ketika mengunjungi website kita yang mana ini membuat loading lebih cepat.
Containers.
Bootstrap membutuhkan container sebagai wadah untuk menampung kontent website.
ada 2 class containers yang di gunakan di bootstrap.
1. .container
2. .container-fluid
perbedaannya adalah jika menggunakan .container class kontent web yang di dalamnya di sesuaikan dengan lebar container.
jika menggunakan .container-fluid class maka content web yang di dalamnya memenuhi lebar layar device.
berikut contoh nya :
Containers.
Bootstrap membutuhkan container sebagai wadah untuk menampung kontent website.
ada 2 class containers yang di gunakan di bootstrap.
1. .container
2. .container-fluid
perbedaannya adalah jika menggunakan .container class kontent web yang di dalamnya di sesuaikan dengan lebar container.
jika menggunakan .container-fluid class maka content web yang di dalamnya memenuhi lebar layar device.
berikut contoh nya :
Contoh Code :
<!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="css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h4>menggunakan bootstrap .container</h4>
<p>Bootstrap adalah HTML, CSS dan Javascript Framwork yang paling terkenal dalam mengembangkan responsive website, Bootstrap dapat di download dan di gunakan secara bebas.Bootstrap menye diakan html dan css design template untuk typography, forms, buttons, tables, navigation, modals, image carousels dan lainnya termasuk javascript.</p>
</div>
<hr>
<div class="container-fluid">
<h4>menggunakan bootstrap .container-fluid</h4>
<p>Bootstrap adalah HTML, CSS dan Javascript Framwork yang paling terkenal dalam mengembangkan responsive website, Bootstrap dapat di download dan di gunakan secara bebas.Bootstrap menye diakan html dan css design template untuk typography, forms, buttons, tables, navigation, modals, image carousels dan lainnya termasuk javascript.
</p>
</div>
</body>
</html>
<!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="css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h4>menggunakan bootstrap .container</h4>
<p>Bootstrap adalah HTML, CSS dan Javascript Framwork yang paling terkenal dalam mengembangkan responsive website, Bootstrap dapat di download dan di gunakan secara bebas.Bootstrap menye diakan html dan css design template untuk typography, forms, buttons, tables, navigation, modals, image carousels dan lainnya termasuk javascript.</p>
</div>
<hr>
<div class="container-fluid">
<h4>menggunakan bootstrap .container-fluid</h4>
<p>Bootstrap adalah HTML, CSS dan Javascript Framwork yang paling terkenal dalam mengembangkan responsive website, Bootstrap dapat di download dan di gunakan secara bebas.Bootstrap menye diakan html dan css design template untuk typography, forms, buttons, tables, navigation, modals, image carousels dan lainnya termasuk javascript.
</p>
</div>
</body>
</html>
dan hasilnya seperti gambar di bawah ini, klik untuk memperjelas gambar :
dan berikut contoh web sederhana menggunakan bootstrap : www.rahadikusuma.cf
Semoga Bermanfaat....!!
dan berikut contoh web sederhana menggunakan bootstrap : www.rahadikusuma.cf
Semoga Bermanfaat....!!
ARTIKEL TERKAIT :
Wahhh, bagus sekali kak, ini sangat bermanfaat untuk saya. Penjelasan tentang bootstrap yg kakak buat ini luar biasa sekali. Karena saya baru mulai belajar bootstrap-nya, mohon bimbingannya kak, agar saya bisa menjadi seperti kakak. Perkenalkan, nama saya Vivi Silvira dari STMIK Atma Luhur(https://www.atmaluhur.ac.id/)
BalasHapus