Senin, 27 Juli 2015

Bootstrap Grid System

Mendesain dengan Menggunakan Bootstrap

Apa itu bootstrap-min.css?
Itu adalah versi kecilnya dari bootstrap.css. Dia dipanggil versi kecil karena tidak mempunyai ruang dan tidak mempunyai komentar sehingga mengurangi ukuran file. Dia akan berguna ketika projekmu selesai dan siap diproduksi.
Sistem Grid dalam Bootstrap
Bootstrap terdapat fitur yang sangat penting, yaitu grid system. Grid system membantu kita untuk membagi layar ke dalam baris dan kolom yang berbeda, sehingga akan menciptakan layout yang beraneka ragam. Dalam satu kolom, layar dapat dibagi menjadi 12 bagian. Tinggi kolom pada layar dapat sesuai dengan ukuran layar saat kita lihat, inilah yang disebut dengan responsive.
Berikut contoh pembuatan grid dengan 2 kolom yang sama lebarnya.
<html>
<head>
<meta name=”viewport” content=”width=device-width,initial-scale=1”>
<title>Belajar dengan Bootstrap</title>
<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.css”>
<script src=”js/bootstrap-min.js”></script>
</head>
<body>
<div class=”container”>
<div class=”row”>
<div class=”col-xs-6”><h1>kolom 1</h1></div>
<div class=”col-xs-6”><h1>kolom 2</h1></div>
</div>
</div>
</body>
</html>
Selain contoh diatas kita dapat membuat sebuah kolom didalam kolom(nesting) dimana tinggal menambahkan code yang sama ke dalam kelas kolom yang ingin di masukkan.

Minggu, 26 Juli 2015

Apa itu Bootstrap?

Perlu kita ketahui bahwa bootstrap memudahkan kita untuk membuat website yang responsive ke semua perangkat. Bootstrap adalah sebuah framework yang membantu pengembang untuk memulai dengan mudah proses pengembangan web.... Pengembang web yang lama biasanya dibuat pusing saat menggunakan CSS dan JavaScript, nah disini bootstrap datang untuk menghilangkan semua kesulitan itu. Bootstrap tidak hanya berguna bagi pengembang baru, tetapi pengembang yang sudah ahli juga dapat mengkombinasikan code mereka dengan bootstrap.
* Memulai dengan Bootstrap
Sebelum menggunakan bootstrap langkah pertama yang harus dilakukan adalah dengan mendownload file bootstrap di website resminya secara gratis. Secara umum bootstrap mempunyai 3 bagian utama:
- /css
- /js
- /fonts
Setelah mendownload bootstrap langkah selanjutnya yaitu mendownload jQuery lalu diletakkan didalam /js. Hal itu sudah cukup untuk bisa menciptakan website yang responsive. Mari kita mulai kerangka web dasar yang sederhana dengan menggunakan html... :)
<html>
    <head>
                <title>Cara Menggunakan Bootstrap</title>
                <meta http-equiv="Content-Type" content="width=device-width,initial-scale=1">
                <link href="css/bootstrap.min.css" rel="stylesheet">
                <link href="css/gaya.css" rel="stylesheet">
    </head>
    <body>
     <script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
    </body>
</html>