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.

HTML5 doctype a ngai a ni

Bootstrap hian HTML element leh CSS property te a hmang a, chu chu HTML5 doctype hman a ngai a ni. I project a Bootstrapped page zawng zawng bul tannaah hian dah tel ngei ang che.

  1. <!DOCTYPE html> tih a ni
  2. <html lang = "en" > tih hi a ni
  3. ...
  4. </html> tih a ni

Typography leh link te pawh a awm bawk

Scaffolding.less file chhungah hian basic global display, typography leh link style te kan set a. A bik takin, kan:

  • Taksa chunga margin chu la chhuak rawh
  • Set background-color: white;a nibody
  • Kan typographyic base atan , , leh attribute @baseFontFamilyte @baseFontSizehmang ang che@baseLineHeight
  • Global link color via set la, @linkColorlink underlines chauh on rawh:hover

Normalize hmangin reset rawh

Bootstrap 2 atang khan, traditional CSS reset chu a lo thang chho zel a, Normalize.css atanga elements te hmangin a lo thang chho zel a , Nicolas Gallagher project a ni a, HTML5 Boilerplate pawh a tichak bawk.

Reset thar hi reset.less ah hmuh theih a la ni a , mahse a tawi leh dik zawk nan element tam tak paih chhuah a ni.

1. a ni
1. a ni
1. a ni
1. a ni
1. a ni
1. a ni
1. a ni
1. a ni
1. a ni
1. a ni
1. a ni
1. a ni
4. 4.
4. 4.
4. 4.
4. 4.
8. A ni
6. 6.
6. 6.
12 a ni

Bootstrap-a default grid system pek hian column 12 a hmang a, chu chu 724px, 940px (responsive CSS tel lovin default), leh 1170px-a zau zawnga render out a ni. 767px viewport hnuaiah chuan column te chu fluid takin an inzawm a, vertical takin an stack thin.

  1. <div class = "row" > tih hi a ni
  2. <div class = "span4" > ... </div> tih hi a ni
  3. <div class = "span8" > ... </div> tih hi a ni
  4. </div> tih a ni

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


Column offset dan tur

4. 4.
4 offset a ni 4
3 offset a ni 3
3 offset a ni 3
8 offset a ni 4
  1. <div class = "row" > tih hi a ni
  2. <div class = "span4" > ... </div> tih hi a ni
  3. A rilru a buai em em a, a rilru a hah em em bawk a. > ... </ div >
  4. </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

Nested rows ah hian column set a awm tur a ni a, chu chu a parent column awm zat a belhkhawm tur a ni. Entirnan, nested .span3column pahnih chu a chhungah dah tur a .span6ni.

Level 1 a awm a
Level 2 a ni
Level 2 a ni
  1. <div class = "row" > tih hi a ni
  2. <div class = "span6" > tih hi a ni
  3. Level 1 ah a awm a
  4. <div class = "row" > tih hi a ni
  5. < div class = "span3" > Level 2 ah hian a awm a
  6. < div class = "span3" > Level 2 ah hian a awm a
  7. </div> tih a ni
  8. </div> tih a ni
  9. </div> tih a ni

Fluid column te a awm

1. a ni
1. a ni
1. a ni
1. a ni
1. a ni
1. a ni
1. a ni
1. a ni
1. a ni
1. a ni
1. a ni
1. a ni
4. 4.
4. 4.
4. 4.
4. 4.
8. A ni
6. 6.
6. 6.
12 a ni

Percents, pixels ni lovin

Fluid grid system hian fixed pixels ai chuan column zau zawng atan percentage a hmang zawk a ni. Kan fixed grid system ang bawka responsive variation a nei bawk a, key screen resolution leh device-te tan proportion dik tak a siamsak bawk.

Fluid row hrang hrang

Row eng pawh .rowchu .row-fluid. Column te chu a inang chiah chiah a, fixed leh fluid layout inkara flip chu super straightforward a ni.

Markup a ni

  1. <div class = "row-a tui" > tih a ni
  2. <div class = "span4" > ... </div> tih hi a ni
  3. <div class = "span8" > ... </div> tih hi a ni
  4. </div> tih a ni

Fluid nesting tih a ni

Fluid grids hmanga nesting hi a danglam deuh hlek a: nested column awm zat hi parent nen a inmil a ngai lo. Chu ai chuan i column te chu level tin ah reset a ni a, a chhan chu row tin hian parent column 100% a lak avangin.

Fluid 12 a ni
Tuihnai 6.
Tuihnai 6.
  1. <div class = "row-a tui" > tih a ni
  2. <div class = "span12" > tih hi a ni
  3. Level 1 a awm a
  4. <div class = "row-a tui" > tih a ni
  5. <div class = "span6" > Level 2 </div> ah hian a awm a
  6. <div class = "span6" > Level 2 </div> ah hian a awm a
  7. </div> tih a ni
  8. </div> tih a ni
  9. </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

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 .

  1. <taksa> tih a ni
  2. <div class = "container" > tih hi a ni
  3. ...
  4. </div> tih a ni
  5. </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.

  1. <div class = "container-a tui" > tih a ni
  2. <div class = "row-a tui" > tih a ni
  3. <div class = "span2" > tih hi a ni
  4. <!--Sidebar chhunga thu awmte-->
  5. </div> tih a ni
  6. <div class = "span10" > tih hi a ni
  7. <!--Taksa chhunga thil awmte-->
  8. </div> tih a ni
  9. </div> tih a ni
  10. </div> tih a ni

Responsive hmanrua te

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 chu mawhphurhna nei takin hmang la, i mobile audience-te tan bul tanna atan chauh hmang ang che. Project lian zawk tan chuan media query layer ni lovin dedicated code base ngaihtuah thin ang che.

Devices supported te pawh a awm bawk

Bootstrap hian file pakhatah media query tlemte a support a, hei hian 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
Smartphone atanga tablet thlenga hman theih a ni 767px leh a hnuai lam a ni Fluid column, a zau zawng fixed a awm lo
Portrait tablet te pawh a awm bawk 768px leh a chunglam a ni 42px a ni 20px a ni
Hlawhchhamna 980px leh a chung lam a ni 60px a ni 20px a ni
Display lian tak a ni 1200px leh a chung lam a ni 70px a ni 30px a ni

Meta tag a ngai a ni

Device-te’n responsive page an lantir dik theih nan viewport meta tag kha dah tel bawk ang che.

  1. <meta hming = "viewport" content = "a zau zawng=device-a zau zawng, initial-scale=1.0" >

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:

  1. Compiled responsive version, bootstrap-responsive.css chu hmang rawh
  2. @import "responsive.less" tih kha add la, Bootstrap chu recompile leh rawh
  3. Responsive.less chu file hran angin siam danglam leh recompile theih a ni

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.

  1. /* Landscape phone leh a hnuai lam */
  2. @media ( max - width : 480px ) { ... } a ni.
  3.  
  4. /* Landscape phone atanga portrait tablet ah */
  5. @media ( max - width : 767px ) { ... } a ni.
  6.  
  7. /* Portrait tablet atanga landscape leh desktop ah */
  8. @media ( min - width : 768px ) leh ( max - width : 979px ) { ... }
  9.  
  10. /* Desktop lian tak */ .
  11. @media ( min - a zau zawng : 1200px ) { ... }

Utility class hrang hrangah chhanna pek theih a ni

Eng nge an nih

Mobile-friendly development chak zawk neih nan heng basic utility class te hi device hrang hranga content entir leh thup nan hmang la.

Engtikah nge hman tur

A tlem berah hmang la, site khata version hrang hrang siam loh tur. Chu ai chuan, device tinte presentation tihpun nân hmang zâwk ang che.

Entirnan, <select>mobile layout-ah nav atan element i entir thei a, mahse tablet emaw desktop emaw-ah erawh i entir lo.

Class te tanpui tur a ni

Hetah hian kan support class te table leh media query layout pek tawh (device hmanga labeled) a an nghawng dan table tarlan a ni. Anni chu responsive.less.

Pawl Phone te pawh a awm480px leh a hnuai lam a ni Tablet te pawh a awm767px leh a hnuai lam a ni Desktop te pawh a awm768px leh a chunglam a ni
.visible-phone Hmuh theih
.visible-tablet Hmuh theih
.visible-desktop Hmuh theih
.hidden-phone Hmuh theih Hmuh theih
.hidden-tablet Hmuh theih Hmuh theih
.hidden-desktop Hmuh theih Hmuh theih

Test case a ni

A chunga class te hi test turin i browser size thlak la, device hrang hrangah load rawh.

A hmuh theih...

Green checkmarks hian i viewport hman mek ah hian class a lang tih a tarlang.

  • Biakhlatna✔ Phone hmangin
  • Tablet a ni✔ Tablet a ni
  • Desktop ah a awm✔ Desktop hmanga en theih a ni

Thup a ni a...

Hetah hian green checkmarks hian i viewport hman mek ah hian class a thup tih a tarlang a.

  • Biakhlatna✔ Phone hmangin
  • Tablet a ni✔ Tablet a ni
  • Desktop ah a awm✔ Desktop hmanga en theih a ni