Scaffolding · Bootstrap hmanga siam a ni in Mizo tawng a ni

HTML5 doctype a ngai a ni

Bootstrap hian HTML element thenkhat leh CSS property thenkhat HTML5 doctype hman ngai te a hmang thin. I project zawng zawng tan tirh lamah telh vek rawh.

<!DOCTYPE html> tih a ni
<html lang = "en" > tih hi a ni 
  ...
</html> tih a ni

Typography leh link te pawh a awm bawk

Bootstrap hian global display, typography leh link style hrang hrangte a set a. A bik takin, kan:

marginTaksa chungah chuan la chhuak rawh
Set background-color: white;a nibody
Kan typographic base atan , , leh attribute @baseFontFamilyte @baseFontSizehmang rawh@baseLineHeight
Global link color via set la, @linkColorlink underlines chauh on rawh:hover

Heng style te hi scaffolding chhungah hmuh theih a ni.less .

Normalize hmangin reset rawh

Bootstrap 2 hmang hian reset block hlui chu Normalize.css duhsak turin paih a ni a, hei hi Nicolas Gallagher -a project a ni a, HTML5 Boilerplate pawh a tichak bawk. Kan reset.less chhungah Normalize tam tak kan hman laiin , Bootstrap atan bik element thenkhat kan paih chhuak a ni.

Live grid entirnan

Default Bootstrap grid system hian column 12 a hmang a, chu chuan 940px wide container a siam a, responsive features enabled a ni lo. Responsive CSS file dah belh a nih chuan grid chu i viewport a zirin 724px leh 1170px wide-ah a insiamrem thei a ni. 767px viewport hnuaiah chuan column te chu fluid takin an inzawm a, vertical takin an stack thin.

1. a ni

2. 2.

3. A ni

4. 4.

5. 5.

9. A ni

Grid HTML bulpui ber a ni

Column pahnih layout awlsam tak atan chuan a siam la, column .rowzat tur dik tak add rawh .span*. Hei hi column 12 awmna grid a nih avangin, chu column 12 zinga pakhat zel chuan .span*a huam vek a, row tin atan (a nih loh leh parent-a column awm zat) 12 thleng a belh fo tur a 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

He entirnan hi kan pe a, kan nei a, kan nei .span4a .span8, total column 12 leh row kimchang tak siam a ni.

Column offset dan tur

.offset*Class hmangin column te chu dinglamah sawn rawh . Class tin hian column pakhat veilam margin chu column pum puiin an tipung a. Entirnan, column pali chungah .offset4a kal thei..span4

4. 4.

3 offset a ni 2

3 offset a ni 1

3 offset a ni 2

6 offset a ni 3

<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

Default grid hmanga i content nest tur chuan column awmsa chhungah column thar .rowleh set dah la . Nested row-ah hian a parent-a column awm zat zat belhkhawm tur column set a awm tur a ni..span*.span*

Level 1 ah a awm a

Level 2 a ni

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

Live fluid grid entirnan

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

1. a ni

4. 4.

8. A ni

6. 6.

12 a ni

A bulpui ber fluid grid HTML a ni

Row eng pawh "fluid" siam la .row, .row-fluid. Column class te chu a inang chiah chiah a, fixed leh fluid grid inkara flip awlsam tak a ni.

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

Fluid offsetting tih a ni

Fixed grid system offsetting ang bawkin a thawk a: .offset*column eng pawhah add la, chutiang column tam tak chuan offset rawh.

4. 4.

4 offset a ni 4

3 offset a ni 3

6 offset a ni 6

<div class = "row-a tui" > tih 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

Fluid nesting tih a ni

Fluid grid hmanga nesting hi a danglam deuh hlek a: nested column awm zat chu parent-in column awm zat nen a inmil tur a ni lo. Chu ai chuan nested column level tin chu reset a ni a, a chhan chu row tin hian parent column 100% a lak avangin.

Fluid 12 a ni

Tuihnai 6.

<div class = "row-a tui" > tih a ni 
  <div class = "span12" > tih hi a ni 
    Fluid 12 a ni
    <div class = "row-a tui" > tih a ni 
      A rilru a buai em em a, a rilru a hah em em bawk a . 6 < / div > 
      A rilru a buai em em a, a rilru a hah em em bawk a . 6 < / div > 
    </div> tih a ni
  </div> tih a ni
</div> tih a ni

Layout tihfel a ni

Common fixed-width (leh optionally responsive) layout a pe a, a <div class="container">mamawh chauh a pe bawk.

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

Fluid awm dan tur

Fluid, two-column page siam la, <div class="container-fluid">—application 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

Responsive features hman theihna tur

I project ah hian responsive CSS on la, <head>i document chhungah meta tag dik tak leh stylesheet dang dah belh rawh. Customize page atanga Bootstrap i compile tawh chuan meta tag chauh i dah tel a ngai a ni.

<meta hming = "viewport" content = "a zau zawng=device-a zau zawng, initial-scale=1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Lu a ti sang a!Bootstrap hian tun dinhmunah hian default-in responsive features a dah lo a, engkim hi responsive a ngai lo. Developer te chu he feature hi paih chhuak tura fuih ai chuan a tul angin enable mai mai hi kan ngaihtuah tha ber.

Responsive Bootstrap chungchang

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
Display lian tak a ni	1200px leh a chung lam a ni	70px a ni	30px a ni
Hlawhchhamna	980px leh a chung lam a ni	60px a ni	20px a ni
Portrait tablet te pawh a awm bawk	768px leh a chunglam a ni	42px a ni	20px a ni
Phone atanga tablet thleng	767px leh a hnuai lam a ni	Fluid column, a zau zawng fixed a awm lo
Phone te pawh a awm	480px leh a hnuai lam a ni	Fluid column, a zau zawng fixed a awm lo

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

Utility class hrang hrangah chhanna pek theih a ni

Mobile-friendly development chak zawk neih nan heng utility class te hi device hrang hranga content entir leh thup nan hmang la. A hnuaia tarlan te hi class awmsa leh media query layout pek (device hmanga label) a an nghawng dan table a ni. Anni chu responsive.less.

Pawl	Phone te pawh a awm767px leh a hnuai lam a ni	Tablet te pawh a awm979px atanga 768px thleng a ni	Desktop te pawh a awmHlawhchhamna
`.visible-phone`	Hmuh theih	Thuhruk	Thuhruk
`.visible-tablet`	Thuhruk	Hmuh theih	Thuhruk
`.visible-desktop`	Thuhruk	Thuhruk	Hmuh theih
`.hidden-phone`	Thuhruk	Hmuh theih	Hmuh theih
`.hidden-tablet`	Hmuh theih	Thuhruk	Hmuh theih
`.hidden-desktop`	Hmuh theih	Hmuh theih	Thuhruk

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. Responsive utilities hi table nen hman loh tur a ni a, chutiang a nih avang chuan support a ni lo.

Responsive utilities test case a awm bawk

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

Scaffolding siam a ni

Khawvel pum huap settings

HTML5 doctype a ngai a ni

Typography leh link te pawh a awm bawk

Normalize hmangin reset rawh

Grid system hmasa ber a ni

Live grid entirnan

Grid HTML bulpui ber a ni

Column offset dan tur

Nesting column hrang hrang te

Fluid grid system hmanga siam a ni

Live fluid grid entirnan

A bulpui ber fluid grid HTML a ni

Fluid offsetting tih a ni

Fluid nesting tih a ni

Layout hrang hrangte

Layout tihfel a ni

Fluid awm dan tur

Responsive design a ni

Responsive features hman theihna tur

Responsive Bootstrap chungchang

Devices supported te pawh a awm bawk

Utility class hrang hrangah chhanna pek theih a ni

Engtikah nge hman tur

Responsive utilities test case a awm bawk

A hmuh theih...

Thup a ni a...