Mengenal Framework bootstrap untuk web design

Framework Bootstrap adalah framework yang digunakan oleh banyak web designer di dunia saat ini, bootstrap juga dikenal dengan sifatnya yang responsive dan open source, sehingga banyak programmer yang menyukainya selain bootstrap masih terdapat framework-framework untuk web desain yang lain seperti skeleton, groundwork, Foundation 3, dan lain lain. tetapi kali ini kita hanya membahas tentang cara menggunakan bootstrap.

Mengenal Framework untuk web design bootstrap
Framework bootstrap

ketika tulisan ini dibuat boostrap berada di versi 3.3.7 dan telah terdapat versi 4 beta nya. banyak web besar yang menggunakan framework ini sebutlah contohnya adalah twitter. berikut ini alasan dan keuntungan jika kita menggunakan boostrap

  1. Penggunaannya dapat menghemat waktu dalam mendesain layout sebuah web
  2. tampilan yang terkesan cantik, menarik dan modern membuatnya banyak disuka
  3. Mobile friendly, dapat menyesuaikan tampilan dalam segala jenis ukuran media seperti laptop, monitor, smarphone.
  4. ringan karena telah dibuat secara terstruktur

STRUKTUR FRAMEWORK BOOSTRAP

sebelum memulai menggunakan framework ini sebaiknya kita mengenal bentuk struktur dari filenya sehingga benar cara penggunaannya ketika kita menggunakan framework ini.

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

kamu dapat download source code dari website resminya. gunakan google  😆 , ada 2 cara mudah yang dapat kita lakukan untuk menggunakan framework yang satu ini, yaitu online dan offline

CARA PENGGUNAAN ONLINE

untuk versi online kamu dapat menggunakan CDN nya, link CDN tersebut sebaiknya kamu gunakan sebelum tag html </head> dan jangan lupa menggunakan jquery sebagai tambahan

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js">
<!-- 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">

<!-- JQUERY -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js">

<!-- 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>

CARA PENGGUNAAN OFFLINE

untuk penggunaan offline yang saya juga gunakan adalah terlebih dahulu kamu download source code tersebut di web aslinya. Setelah download kemudian kamu extraxt akan terdapat 3 folder didalamnya yaitu css, fonts, dan js ( baca struktur bootstrap ).  jika kita gunakan html maka dokumentnya akan seperti ini

<!DOCTYPE html> 
<html>
<head>
	<title>Mengenal Boostrap | ringkas.us</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
	<h1>HELLO WORLD</h1>
	<button class="btn btn-primary">BUTTON BOOTSTRAP</button>
</body>
</html>

sebenarnya jika kamu telah berhasil sampai ketahap ini kamu telah dapat menggunakan boostrap sebagai tool untuk mempermudah web desain kamu, untuk fungsi class lainnya kamu dapat membacanya di dokumentasi di web resminya.  demikian dasar cara penggunaan boostrap semoga bermanfaat

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.