Bootstrap a ni

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.

CSS reset, typography, leh link hrang hranga hman tur global styles te

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.

Default grid system 12 column a awm a, a chhanna tur twist a awm bawk

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 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, tablet landscape leh desktop te te, leh widescreen desktop lian tak tak te an ni.

  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 = "span12" > tih hi a ni 
  3.     Level 1 a awm a
  4.     <div class = "row" > tih hi 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

Fluid grid system 12 chhanna pe thei, percentage-a innghat column a awm

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

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

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.

Layouts Webpage siamna atana template bulpui ber berte

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 design Media zawhna leh device hrang hrang leh resolution hrang hrang

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 dah theih a ni
  5.   @media ( max - width : 767px ) { ... } a ni.     
  6.  
  7.   // Portrait tablet chu landscape leh desktop ah dah theih a ni
  8.   @media ( min - width : 768px ) leh ( max - width : 979px ) { ... }        
  9.  
  10.   // Desktop lian tak a ni
  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