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.

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

Baris bersarang harus menyertakan sekumpulan kolom yang menambahkan hingga jumlah kolom induknya. Misalnya, dua .span3kolom bersarang harus ditempatkan dalam file .span6.

<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>

Persen, bukan piksel

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

Baris cairan

Buat baris apa pun lancar hanya dengan mengubah .rowke .row-fluid. Kolom tetap sama persis, membuatnya sangat mudah untuk beralih antara tata letak tetap dan lancar.

Markup

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

Bersarang dengan kisi fluida sedikit berbeda: jumlah kolom bersarang tidak harus sesuai dengan induknya. Sebagai gantinya, kolom Anda disetel ulang di setiap level karena setiap baris menempati 100% dari kolom induk.

<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>

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 dalam satu file untuk membantu membuat proyek Anda lebih sesuai pada perangkat dan resolusi layar yang berbeda. Inilah yang termasuk:

Memerlukan tag meta

Untuk memastikan perangkat menampilkan halaman responsif dengan benar, sertakan tag meta area pandang.

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

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

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:

1. Gunakan versi responsif yang dikompilasi, bootstrap-responsive.css
2. Tambahkan @import "responsive.less" dan kompilasi ulang Bootstrap
3. Ubah dan kompilasi ulang responsive.less sebagai file 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 : 980px ) { ... }        
 
  // Desktop besar
  @media ( lebar min : 1200px ) { .. } _