tutorial pengembangan web terbaru
 

Bootstrap Get Started

❮ Sebelumnya Berikutnya Bab ❯

Apa Bootstrap ?

  • Bootstrap adalah kerangka front-end gratis untuk pengembangan web lebih cepat dan lebih mudah
  • Bootstrap termasuk HTML dan CSS desain template berbasis tipografi, bentuk, tombol, tabel, navigasi, kata modal, komidi putar gambar dan banyak plugin JavaScript opsional lainnya, serta
  • Bootstrap juga memberikan Anda kemampuan untuk dengan mudah membuat desain responsif

Apa Desain Web Responsif?

desain web responsif adalah tentang menciptakan situs web yang secara otomatis menyesuaikan diri untuk terlihat baik pada semua perangkat, dari ponsel kecil untuk desktop besar.

Bootstrap Sejarah

Bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter, dan dirilis sebagai produk open source pada bulan Agustus 2011 pada GitHub.

Pada Juni 2014 Bootstrap adalah proyek No.1 di GitHub!

Mengapa Gunakan Bootstrap ?

Keuntungan dari Bootstrap :

  • Mudah digunakan: Siapa saja dengan pengetahuan hanya dasar dari HTML dan CSS dapat mulai menggunakan Bootstrap
  • Fitur responsif: Bootstrap 's responsif CSS menyesuaikan dengan ponsel, tablet, dan desktop
  • Pendekatan Mobile-pertama: Dalam Bootstrap 3, gaya mobile-first merupakan bagian dari kerangka inti
  • Kompatibilitas browser: Bootstrap kompatibel dengan semua browser modern (Chrome, Firefox, Internet Explorer, Safari, dan Opera)

Dimana Mendapatkan Bootstrap ?

Ada dua cara untuk mulai menggunakan Bootstrap di situs web Anda sendiri.

Kamu bisa:

  • Ambil Bootstrap dari getbootstrap.com
  • Sertakan Bootstrap dari CDN

download Bootstrap

Jika Anda ingin men-download dan tuan rumah Bootstrap sendiri, pergi ke getbootstrap.com , dan ikuti petunjuk di sana.

Bootstrap CDN

Jika Anda tidak ingin men-download dan meng-host Bootstrap sendiri, Anda dapat memasukkannya dari CDN (Content Delivery Network).

MaxCDN memberikan dukungan CDN untuk Bootstrap CSS 's dan JavaScript. Juga termasuk jQuery:

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Salah satu keuntungan dari menggunakan Bootstrap CDN :
Banyak pengguna sudah didownload Bootstrap dari MaxCDN ketika mengunjungi situs lain. Akibatnya, hal itu akan dimuat dari cache ketika mereka mengunjungi situs Anda, yang mengarah ke waktu loading lebih cepat. Juga, kebanyakan CDN's akan memastikan bahwa sekali pengguna meminta file dari itu, itu akan disajikan dari server terdekat mereka, yang juga mengarah ke waktu loading lebih cepat.

Buat Halaman Web Pertama Dengan Bootstrap

1. Tambahkan doctype HTML5

Bootstrap menggunakan elemen HTML dan properti CSS yang memerlukan doctype HTML5.

Selalu menyertakan DOCTYPE HTML5 pada awal halaman, bersama dengan atribut lang dan set karakter yang benar:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 3 adalah ponsel pertama

Bootstrap 3 ini dirancang untuk menjadi responsif terhadap perangkat mobile. gaya Mobile-pertama adalah bagian dari kerangka inti.

Untuk memastikan render yang tepat dan sentuhan zooming, tambahkan berikut <meta> tag dalam <head> elemen:

<meta name="viewport" content="width=device-width, initial-scale=1">

The width=device-width bagian set lebar halaman untuk mengikuti layar-lebar perangkat (yang akan bervariasi tergantung pada perangkat).

The initial-scale=1 bagian menetapkan tingkat zoom awal saat halaman pertama dimuat oleh browser.

3. Wadah

Bootstrap juga membutuhkan elemen yang mengandung untuk membungkus isi situs.

Ada dua kelas kontainer untuk memilih dari:

  1. The .container kelas menyediakan wadah lebar tetap responsif
  2. The .container-fluid kelas menyediakan wadah lebar penuh, yang mencakup seluruh lebar viewport

Catatan: Wadah tidak nestable (Anda tidak dapat menempatkan wadah di dalam wadah lain).

Dua Dasar Bootstrap Pages

Contoh berikut menunjukkan kode untuk dasar Bootstrap halaman (dengan wadah lebar tetap responsif):

Contoh

<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
Cobalah sendiri "

Contoh berikut menunjukkan kode untuk dasar Bootstrap halaman (dengan wadah lebar penuh):

Contoh

<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
Cobalah sendiri "

❮ Sebelumnya Berikutnya Bab ❯