Bootstrap hi responsive 12-column grid hmanga siam a ni. Chu system hmanga fixed- leh fluid-width layout te pawh kan dah tel bawk.
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.
- <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
Bootstrap-a static (non-fluid) grid system hmang hian nesting a awlsam hle. I content nest tur chuan column awmsa chhungah column thar .row
leh set dah mai rawh..span*
.span*
- <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
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 |
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.
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.
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.
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
<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
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 |
Media query hian condition engemaw zat—ratios, widths, display type, etc—a innghat custom CSS a phal a, mahse a tlangpuiin min-width
leh max-width
.
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:
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 ) { . }.