Perancah

Membutuhkan doctype HTML5

Bootstrap menggunakan elemen HTML dan properti CSS tertentu yang memerlukan penggunaan doctype HTML5. Sertakan di awal semua proyek Anda.

<!DOCTYPE html>
<html lang = "en" > 
  ...
</html>

Tipografi dan tautan

Bootstrap mengatur tampilan global dasar, tipografi, dan gaya tautan. Secara khusus, kami:

Hapus margindi tubuh
Tetapkan background-color: white;padabody
Gunakan @baseFontFamily, @baseFontSize, dan @baseLineHeightatribut sebagai dasar tipografi kami
Atur warna tautan global melalui @linkColordan terapkan garis bawah tautan hanya di:hover

Gaya ini dapat ditemukan di dalam scaffolding.less .

Setel ulang melalui Normalisasi

Dengan Bootstrap 2, blok reset lama telah dihapus dan digantikan oleh Normalize.css , sebuah proyek oleh Nicolas Gallagher yang juga mendukung HTML5 Boilerplate . Meskipun kami menggunakan banyak Normalize dalam reset.less kami , kami telah menghapus beberapa elemen khusus untuk Bootstrap.

Contoh jaringan langsung

Sistem grid Bootstrap default menggunakan 12 kolom , membuat container selebar 940px tanpa mengaktifkan fitur responsif . Dengan menambahkan file CSS responsif, kisi menyesuaikan menjadi lebar 724px dan 1170px tergantung pada area pandang Anda. Di bawah viewports 767px, kolom menjadi cair dan menumpuk secara vertikal.

HTML kisi dasar

Untuk tata letak dua kolom sederhana, buat .rowdan tambahkan jumlah .span*kolom yang sesuai. Karena ini adalah kisi 12 kolom, masing-masing .span*mencakup sejumlah 12 kolom tersebut, dan harus selalu menambahkan hingga 12 untuk setiap baris (atau jumlah kolom di induknya).

<div kelas = "baris" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Diberikan contoh ini, kita memiliki .span4dan .span8, membuat total 12 kolom dan satu baris lengkap.

Mengimbangi kolom

Pindahkan kolom ke kiri menggunakan .offset*kelas. Setiap kelas meningkatkan margin kiri kolom dengan seluruh kolom. Misalnya, .offset4bergerak .span4di atas empat kolom.

3 offset 2

3 offset 1

3 offset 2

6 offset 3

<div kelas = "baris" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

Kolom bersarang

Untuk menyarangkan konten Anda dengan kisi default, tambahkan kolom baru .rowdan kumpulan .span*kolom di dalam kolom yang sudah ada .span*. Baris bersarang harus menyertakan sekumpulan kolom yang menambahkan hingga jumlah kolom induknya.

Contoh

Di sini dua kolom bersarang .span4ditempatkan di dalam file .span8.

Level 1 kolom

Level 2

<div kelas = "baris" > 
  <div kelas = "span9" > 
    kolom tingkat 1
    <div kelas = "baris" > 
      <div class = "span6" > Level 2 </div> 
      <div class = "span3" > Level 2 </div> 
    </div>
  </div>
</div>

Contoh jaringan cairan hidup

Sistem grid fluid menggunakan persen, bukan piksel untuk lebar kolom. Ini memiliki kemampuan responsif yang sama dengan sistem jaringan tetap kami, memastikan proporsi yang tepat untuk resolusi dan perangkat layar utama.

HTML grid cairan dasar

Buat baris apa saja "cair" dengan mengubah .rowke .row-fluid. Kelas kolom tetap sama persis, sehingga mudah untuk beralih antara grid tetap dan fluid.

<div class = "baris-cairan" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Pengimbang cairan

Beroperasi dengan cara yang sama seperti offset sistem grid tetap: tambahkan .offset*ke kolom mana pun untuk diimbangi dengan banyak kolom itu.

4 offset 4

3 offset 3

6 offset 6

<div class = "baris-cairan" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

Bersarang cairan

Bersarang dengan kisi fluida sedikit berbeda: jumlah kolom bersarang tidak boleh cocok dengan jumlah kolom induk. Sebagai gantinya, setiap tingkat kolom bersarang disetel ulang karena setiap baris menempati 100% dari kolom induk.

Cairan 12

Cairan 6

<div class = "baris-cairan" > 
  <div kelas = "span12" > 
    Level 1 kolom
    <div class = "baris-cairan" > 
      <div class = "span6" > Level 2 </div> 
      <div class = "span6" > Level 2 </div> 
    </div>
  </div>
</div>

Tata letak tetap

Menyediakan tata letak lebar tetap umum (dan opsional responsif) dengan hanya <div class="container">diperlukan.

<tubuh>
  <div class = "wadah" > 
    ...
  </div>
</tubuh>

Tata letak cairan

Buat halaman dua kolom yang lancar dengan <div class="container-fluid">—bagus untuk aplikasi dan dokumen.

<div class = "container-fluid" > 
  <div class = "baris-cairan" > 
    <div kelas = "span2" > 
      <!--Konten bilah sisi-->
    </div>
    <div kelas = "span10" > 
      <!--Isi isi-->
    </div>
  </div>
</div>

Mengaktifkan fitur responsif

Aktifkan CSS responsif dalam proyek Anda dengan menyertakan tag meta yang tepat dan lembar gaya tambahan di dalam <head>dokumen Anda. Jika Anda telah mengkompilasi Bootstrap dari halaman Kustomisasi, Anda hanya perlu menyertakan tag meta.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Perhatian! Bootstrap tidak menyertakan fitur responsif secara default saat ini karena tidak semuanya harus responsif. Alih-alih mendorong pengembang untuk menghapus fitur ini, kami pikir yang terbaik adalah mengaktifkannya sesuai kebutuhan.

Tentang Bootstrap responsif

Kueri media memungkinkan CSS khusus berdasarkan sejumlah kondisi—rasio, lebar, jenis tampilan, dll—tetapi biasanya berfokus di sekitar min-widthdan max-width.

Ubah lebar kolom di kisi kami
Tumpuk elemen alih-alih mengapung di mana pun diperlukan
Ubah ukuran judul dan teks agar lebih sesuai untuk perangkat

Gunakan kueri media secara bertanggung jawab dan hanya sebagai awal untuk audiens seluler Anda. Untuk proyek yang lebih besar, pertimbangkan basis kode khusus dan bukan lapisan kueri media.

Perangkat yang didukung

Bootstrap mendukung beberapa kueri media dalam satu file untuk membantu membuat proyek Anda lebih sesuai pada perangkat dan resolusi layar yang berbeda. Inilah yang termasuk:

Label	Lebar tata letak	Lebar kolom	lebar selokan
Telepon	480px dan di bawah	Kolom fluida, tidak ada lebar tetap
Ponsel ke tablet	767px dan di bawah	Kolom fluida, tidak ada lebar tetap
Tablet potret	768px ke atas	42px	20px
Bawaan	980px dan lebih tinggi	60px	20px
Layar besar	1200px dan lebih tinggi	70px	30px

/* Ponsel lanskap dan bawah */
@media ( max - lebar : 480px ) { ... }     
 
/* Ponsel lanskap ke tablet potret */
@media ( max - lebar : 767px ) { ... }     
 
/* Potret tablet ke lanskap dan desktop */
@media ( min - lebar : 768px ) dan ( max - lebar : 979px ) { ... }        
 
/* Desktop besar */
@media ( min - lebar : 1200px ) { ... }

Kelas utilitas responsif

Untuk pengembangan ramah seluler yang lebih cepat, gunakan kelas utilitas ini untuk menampilkan dan menyembunyikan konten menurut perangkat. Di bawah ini adalah tabel kelas yang tersedia dan pengaruhnya pada tata letak kueri media tertentu (diberi label oleh perangkat). Mereka dapat ditemukan di responsive.less.

Kelas	Telepon767px dan di bawah	Tablet979px hingga 768px	DesktopBawaan
`.visible-phone`	Terlihat	Tersembunyi	Tersembunyi
`.visible-tablet`	Tersembunyi	Terlihat	Tersembunyi
`.visible-desktop`	Tersembunyi	Tersembunyi	Terlihat
`.hidden-phone`	Tersembunyi	Terlihat	Terlihat
`.hidden-tablet`	Terlihat	Tersembunyi	Terlihat
`.hidden-desktop`	Terlihat	Terlihat	Tersembunyi

Kapan harus menggunakan?

Gunakan secara terbatas dan hindari membuat versi yang sama sekali berbeda dari situs yang sama. Sebagai gantinya, gunakan untuk melengkapi presentasi setiap perangkat.

Kasus uji utilitas responsif

Ubah ukuran browser Anda atau muat pada perangkat yang berbeda untuk menguji kelas di atas.

Terlihat di...

Tanda centang hijau menunjukkan bahwa kelas terlihat di area pandang Anda saat ini.

TeleponTelepon
TabletTablet
DesktopDesktop

Tersembunyi di...

Di sini, tanda centang hijau menunjukkan bahwa kelas disembunyikan di area pandang Anda saat ini.

TeleponTelepon
TabletTablet
DesktopDesktop

Pengaturan global