Perancah

Bootstrap dibangun di atas grid 12 kolom yang responsif. Kami juga menyertakan tata letak lebar tetap dan lancar berdasarkan sistem itu.

Kotak 940px default

Sistem grid default yang disediakan sebagai bagian dari Bootstrap adalah grid 12 kolom dengan lebar 940px .

Ini juga memiliki empat variasi responsif untuk berbagai perangkat dan resolusi: ponsel, potret tablet, lanskap meja dan desktop kecil, dan desktop layar lebar besar.

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

Seperti yang ditunjukkan di sini, tata letak dasar dapat dibuat dengan dua "kolom", masing-masing mencakup sejumlah 12 kolom dasar yang kami definisikan sebagai bagian dari sistem grid kami.

Mengimbangi kolom

4 offset 4

3 offset 3

8 offset 4

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

Kolom bersarang

Dengan sistem grid statis (non-fluid) di Bootstrap, bersarang menjadi mudah. Untuk menyarangkan konten Anda, cukup tambahkan satu .rowset .span*kolom baru di dalam kolom yang ada .span*.

Contoh

Level 1 kolom

Level 2

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

Kustomisasi kisi

Variabel	Nilai default	Keterangan
`@gridColumns`	12	Jumlah kolom
`@gridColumnWidth`	60px	Lebar setiap kolom
`@gridGutterWidth`	20px	Ruang negatif antar kolom
`@siteWidth`	Jumlah yang dihitung dari semua kolom dan talang	Menghitung jumlah kolom dan talang untuk mengatur lebar `.container-fixed()`mixin

Variabel dalam KURANG

Dibangun ke dalam Bootstrap adalah beberapa variabel untuk menyesuaikan sistem grid 940px default, didokumentasikan di atas. Semua variabel untuk grid disimpan dalam variabel.less.

Bagaimana menyesuaikan

Memodifikasi grid berarti mengubah ketiga @grid*variabel dan mengkompilasi ulang Bootstrap. Ubah variabel grid dalam variabel.less dan gunakan salah satu dari empat cara yang didokumentasikan untuk mengkompilasi ulang . Jika Anda menambahkan lebih banyak kolom, pastikan untuk menambahkan CSS untuk yang ada di grid.less.

Tetap responsif

Kustomisasi kisi hanya berfungsi pada tingkat default, kisi 940px. Untuk mempertahankan aspek responsif dari Bootstrap, Anda juga harus menyesuaikan kisi-kisi di responsive.less.

Tata letak tetap

Default dan sederhana, lebar 940px, tata letak terpusat untuk hampir semua situs web atau halaman yang disediakan oleh satu file <div class="container">.

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

Tata letak cairan

<div class="container-fluid">memberikan struktur halaman yang fleksibel, lebar minimum dan maksimum, dan bilah sisi kiri. Ini 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>

Perangkat yang didukung

Bootstrap mendukung beberapa kueri media 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
Smartphone	480px dan di bawah	Kolom fluida, tidak ada lebar tetap
Tablet potret	480px hingga 768px	Kolom fluida, tidak ada lebar tetap
tablet lanskap	768px hingga 940px	44px	20px
Bawaan	940px dan lebih tinggi	60px	20px
Layar besar	1210px dan lebih tinggi	70px	30px

Apa yang mereka lakukan

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

Menggunakan kueri media

Bootstrap tidak secara otomatis menyertakan kueri media ini, tetapi memahami dan menambahkannya sangat mudah dan memerlukan pengaturan minimal. Anda memiliki beberapa opsi untuk menyertakan fitur responsif Bootstrap:

Gunakan versi responsif yang dikompilasi, bootstrap-responsive.css
Tambahkan @import "responsive.less" dan kompilasi ulang Bootstrap
Ubah dan kompilasi ulang responsive.less sebagai yang terpisah

Mengapa tidak memasukkannya saja? Sejujurnya, tidak semuanya harus responsif. Alih-alih mendorong pengembang untuk menghapus fitur ini, kami pikir yang terbaik adalah mengaktifkannya.

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