Scaffolding siam a ni

Bootstrap hi responsive 12-column grid hmanga siam a ni. Chu system hmanga fixed- leh fluid-width layout te pawh kan dah tel bawk.

Default 940px grid a ni

1. a ni

4. 4.

8. A ni

6. 6.

12 a ni

Bootstrap-a tel anga default grid system pek chu 940px-wide, 12-column grid a ni .

Device leh resolution hrang hrang atan responsive variation pali a nei bawk a, chungte chu phone, tablet portrait, table landscape leh desktop te te, leh widescreen desktop lian tak tak te an ni.

<div class = "row" > tih hi a ni 
  <div class = "span4" > ... </div> tih hi a ni 
  <div class = "span8" > ... </div> tih hi a ni 
</div> tih a ni

Heta kan hmuh ang hian, "column" pahnih hmangin basic layout siam theih a ni a, chu chuan kan grid system-a kan tarlan foundational column 12 zinga engemaw zat a huam vek a ni.

Column offset dan tur

4. 4.

4 offset a ni 4

3 offset a ni 3

8 offset a ni 4

<div class = "row" > tih hi a ni 
  <div class = "span4" > ... </div> tih hi a ni 
  A rilru a buai em em a, a rilru a hah em em bawk a. > ... </ div > 
</div> tih a ni

Nesting column hrang hrang te

Bootstrap-a static (non-fluid) grid system hmang hian nesting a awlsam hle. I content nest tur chuan column awmsa chhungah column thar .rowleh set dah mai rawh..span*.span*

Entirna

Level 1 a awm a

Level 2 a ni

<div class = "row" > tih hi a ni 
  <div class = "span12" > tih hi a ni 
    Level 1 a awm a
    <div class = "row" > tih hi a ni 
      <div class = "span6" > Level 2 </div> ah hian a awm a 
      <div class = "span6" > Level 2 </div> ah hian a awm a 
    </div> tih a ni
  </div> tih a ni
</div> tih a ni

Grid siam dan tur

A danglam thei	Default value a ni	Hrilhfiahna
`@gridColumns`	12 a ni	Column awm zat
`@gridColumnWidth`	60px a ni	Column tin zau zawng
`@gridGutterWidth`	20px a ni	Column inkar ah negative space a awm
`@siteWidth`	Column leh gutter zawng zawng sum chhiar chhuah	`.container-fixed()`Mixin zau zawng set turin column leh gutter awm zat a chhiar thin

LESS-a variable awmte

Bootstrap chhungah hian default 940px grid system siam dan tur variable tlemte dah a ni a, a chungah hian kan ziak tawh a ni. Grid atana variable zawng zawng chu variable.less ah dah vek a ni.

Customize dan tur

Grid siam danglam tih awmzia chu @grid*variable pathum thlak danglam leh Bootstrap recompiling tihna a ni. Grid variable te chu variable.less ah thlak la , recompile tur kawng pali documented zinga pakhat hmang rawh . Column dang i dah belh dawn a nih chuan grid.less-a awmte tan CSS kha add ngei ang che.

Chhanna pe thei reng

Grid customization hian default level, 940px grid ah chauh a thawk thei. Bootstrap a responsive aspects te maintain tur chuan responsive.less ah grids te pawh i customize a ngai bawk ang.

Layout tihfel a ni

Default leh simple 940px-wide, centered layout chu website emaw page emaw pakhat chauh pek chhuah tan chauh a <div class="container">ni .

<taksa> tih a ni
  <div class = "container" > tih hi a ni 
    ...
  </div> tih a ni
</body> tih a ni

Fluid awm dan tur

<div class="container-fluid">page structure flexible tak, min- leh max-width te a pe a, veilam sidebar a pe bawk. Apps leh docs atan a tha hle.

<div class = "container-a tui" > tih a ni 
  <div class = "row-a tui" > tih a ni 
    <div class = "span2" > tih hi a ni 
      <!--Sidebar chhunga thu awmte-->
    </div> tih a ni
    <div class = "span10" > tih hi a ni 
      <!--Taksa chhunga thil awmte-->
    </div> tih a ni
  </div> tih a ni
</div> tih a ni

Devices supported te pawh a awm bawk

Bootstrap hian media query tlemte a support a, chu chuan i project te chu device hrang hrang leh screen resolution hrang hrangah a inmil zawk theih nan a pui thei a ni. Hetah hian a telte chu hetiang hi a ni:

Lehkhathem	Layout zau zawng	Column zau zawng	Gutter zau zawng
Smartphone te pawh a awm	480px leh a hnuai lam a ni	Fluid column, a zau zawng fixed a awm lo
Portrait tablet te pawh a awm bawk	480px atanga 768px thleng a ni	Fluid column, a zau zawng fixed a awm lo
Landscape tablet te pawh a awm bawk	768px atanga 940px thleng a ni	44px a ni	20px a ni
Hlawhchhamna	940px leh a chung lam a ni	60px a ni	20px a ni
Display lian tak a ni	1210px leh a chung lam a ni	70px a ni	30px a ni

Eng nge an tih thin

Media query hian condition engemaw zat—ratios, widths, display type, etc—a innghat custom CSS a phal a, mahse a tlangpuiin min-widthleh max-width.

Kan grid a column zau zawng chu siam danglam rawh
A tulna hmunah chuan float ai chuan elements stack rawh
Device hrang hrang tana inmil zawk turin heading leh text te size thlak danglam rawh

Media zawhnate hmangin

Bootstrap hian heng media query te hi automatic in a dah tel lo a, mahse hriatthiam leh add hi a awlsam hle a, setup tlem ber a ngai a ni. Bootstrap-a responsive features te dah tel theihna tur option tlemte i nei a:

Compiled responsive version, bootstrap-responsive.css chu hmang rawh
@import "responsive.less" tih kha add la, Bootstrap chu recompile leh rawh
Responsive.less chu a hranpaa siam danglam leh recompile

Engvangin nge a telh mai loh vang? Thudik tak sawi ila, engkim hi chhanna pek a ngai lo. Developer te chu he feature hi paih chhuak tura fuih ai chuan enable hi kan ngaihtuah tha ber.

  // Landscape phone leh a hnuai lam
  @media ( max - width : 480px ) { ... } a ni.     
 
  // Landscape phone atanga portrait tablet ah dah theih a ni
  @media ( max - width : 768px ) { ... } a ni.     
 
  // Portrait tablet chu landscape leh desktop ah dah theih a ni
  @media ( min - width : 768px ) leh ( max - width : 940px ) { ... }        
 
  // Desktop lian tak a ni
  @media ( min - a zau zawng : 1200px ) { . }.