Sistem grid standar anu disayogikeun salaku bagian tina Bootstrap nyaéta grid 940px-lega, 12-kolom .

Éta ogé ngagaduhan opat variasi responsif pikeun sababaraha alat sareng résolusi: telepon, potret tablet, bentang méja sareng desktop leutik, sareng desktop layar lebar ageung.

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

Sapertos anu dipidangkeun di dieu, tata perenah dasar tiasa didamel ku dua "kolom," masing-masing ngalangkungan sajumlah 12 kolom dasar anu kami definisikeun salaku bagian tina sistem grid kami.

Kalayan sistem grid statik (non-cair) dina Bootstrap, nyarang gampang. Pikeun nyarang eusi anjeun, cukup tambahkeun kolom anyar .rowsareng set dina .span*kolom anu tos aya .span*.

Contona

Baris sarang kedah kalebet sakumpulan kolom anu nambihan kana jumlah kolom indungna. Contona, dua .span3kolom nested kudu ditempatkeun dina hiji .span6.

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

Persen, sanés piksel

Sistem grid cairan ngagunakeun persen pikeun rubak kolom tinimbang piksel tetep. Éta ogé gaduh variasi responsif anu sami sareng sistem grid tetep kami, mastikeun proporsi anu pas pikeun résolusi layar konci sareng alat.

Jajaran cairan

Jieun cairan baris sagala saukur ku ngarobah .rowkana .row-fluid. Kolom tetep sami, janten gampang pisan pikeun flip antara perenah tetep sareng cairan.

Markup

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

Nyarang sareng jaringan cairan rada béda: jumlah kolom anu disarangkeun henteu kedah cocog sareng indungna. Sabalikna, kolom anjeun direset dina unggal tingkat sabab unggal baris nyandak 100% tina kolom indungna.

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

Variabel dina KURANG

Diwangun kana Bootstrap mangrupakeun sakeupeul variabel pikeun ngaropéa sistem grid standar 940px, documented luhur. Sadaya variabel pikeun grid disimpen dina variables.less.

Kumaha carana ngaropea

Ngarobah grid hartina ngarobah tilu @grid*variabel jeung recompiling Bootstrap. Robah variabel grid dina variables.less sareng nganggo salah sahiji tina opat cara anu didokumentasikeun pikeun nyusun ulang . Upami anjeun nambihan langkung seueur kolom, pastikeun pikeun nambihan CSS pikeun anu aya dina grid.less.

Tetep responsif

Kustomisasi grid ngan tiasa dianggo dina tingkat standar, grid 940px. Pikeun ngajaga aspék responsif tina Bootstrap, Anjeun ogé bakal kudu ngaluyukeun grids di responsive.less.

perenah maneuh

Tata letak standar sareng saderhana 940px-lega, dipuseurkeun pikeun situs wéb atanapi halaman anu disayogikeun ku hiji <div class="container">.

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

Susunan cairan

<div class="container-fluid">méré struktur kaca fléksibel, min- jeung max-lebar, sarta sidebar kénca-leungeun. Éta saé pikeun aplikasi sareng dokumén.

<div class = "wadah-cairan"> class = "wadah-cairan" >
  <div class = "baris-cairan" > 
    <div class = "span2" > 
      <!--Eusi sidebar-->
    </div>
    <div class = "span10" > 
      <!--Eusi awak-->
    </div>
  </div>
</div>

Alat anu dirojong

Bootstrap ngadukung sababaraha patarosan média dina hiji file pikeun ngabantosan proyék anjeun langkung pas dina alat sareng résolusi layar anu béda. Ieu naon anu kalebet:

Merlukeun meta tag

Pikeun mastikeun alat nembongkeun kaca responsif leres, kaasup viewport meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> name = "viewport" eusi = "lebar = lebar alat, skala awal = 1.0" > 

Naon maranehna ngalakukeun

Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

• Modify the width of column in our grid
• Stack elements instead of float wherever necessary
• Resize headings and text to be more appropriate for devices

Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

1. Use the compiled responsive version, bootstrap-responsive.css
2. Add @import "responsive.less" and recompile Bootstrap
3. Modify and recompile responsive.less as a separate file

Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

  // telepon Lansekap tur handap
  @media ( max - rubak : 480px ) { ... }     
  // telepon bentang ka tablet potret
  @media (max-width: 768px) { ... }
  // Portrait tablet to landscape and desktop
  @media (min-width: 768px) and (max-width: 980px) { ... }
  // Large desktop
  @media (min-width: 1200px) { .. }