Apa itu Bootstrap

[wp_ad_camp_1]

Bootstrap adalah HTML, CSS, dan JavaScript framework yang paling banyak diminati oleh para web desainer. Dengan Menggunakan Bootstrap, Pengerjaan sebuah project dalam sebuah team menjadi lebih mudah. Mengapa demikian? Karena dengan Bootstrap, penamaan class sudah dibakukan. Seorang desainer hanya tinggal menggunakan nama class tersebut di setiap TAG HTML yang ia gunakan.

Cara Mendownload Bootstrap

Bootstrap bersifat OpenSource. Siapa saja boleh mendownload dan menggunaannya. Anda bisa mendownload Bootstrap melalui link Resminya seperti d bawah ini:

[wp_ad_camp_2]

file Hasil download tersebut kemudian Anda extract dan disertakan di root folder web Anda.

Cara menggunakan Bootstrap

Jika kita telah mempunyai Web HTML dengan coding seperti dibawah ini:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
</body>
</html>

 

Untuk merubah agar bisa menggunakan, bootstrap, Anda tinggal menyisipkan di bagian head beberapa baris untuk loading style dan javascript bootstrap sebagai berikut :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Mengenal Bootstrap Grid System

Grid system adalah dasar dari web responsive. Dengan Grid system, web akan memiliki kemampuan untuk mendeteksi media (Gadget) yang digunakan, lebar resolusi layar dan kemudian menyesuaikan tampilan untuk layar tersebut.

Ada dua nama class container yang digunakan sebagai dasar dari sebuah Grid system di Bootstrap:

  • Class container : Digunakan untuk lebar layar normal. Biasa digunakan untuk isi / content web
    Cara Penggunaan:
    <div class="container">
       <div class="row">
      ...
      </div>
    </div>
  • Class container-fluid : Digunakan untuk lebar layar Ful Screen (lebar layar penuh). Biasa digunakan untuk Judul, header, footer.
    Cara Penggunaan:
    <div class="container-fluid">
       <div class="row">
      ...
      </div>
    </div>

Bootstrap support untuk 4 Media dan masing-masing dibagi menjadi 12 Grid yaitu :

  • Extra small devices (Smart Phone), yaitu media dengan lebar layar kurang dari 768px. Nama Class yang digunakan untuk media ini adalah .col-xs-xx
  • Small devices (Tablets), yaitu media dengan lebar layar antara 768px sampai 991px. Nama Class yang digunakan untuk media ini adalah .col-sm-xx
  • Medium devices (Desktop), yaitu media dengan lebar layar antara 992px sampai 1199px. Nama Class yang digunakan untuk media ini adalah .col-md-xx
  • Large devices (Desktop), yaitu media dengan lebar layar 1200px ke atas. Nama Class yang digunakan untuk media ini adalah .col-lg-xx
Catatan:

xx dalam nama class diatas adalah angka 1 sampai 12 yang menunjukkan lebar kolom di masing masing media

Contoh :

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Hasil:

.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

[wp_ad_camp_2]

Incoming search terms:

(Visited 684 times, 2 visits today)