Echafodaj

Egzije HTML5 doctype

Bootstrap sèvi ak sèten eleman HTML ak pwopriyete CSS ki mande pou sèvi ak HTML5 doctype. Mete li nan kòmansman tout pwojè ou yo.

<!DOCTYPE html>
<html lang = "en" > 
  ...
</html>

Tipografi ak lyen

Bootstrap etabli ekspozisyon mondyal debaz, tipografi, ak estil lyen. Espesyalman, nou:

Retire marginsou kò a
Mete background-color: white;sou labody
Sèvi ak @baseFontFamily, @baseFontSize, ak @baseLineHeightatribi yo kòm baz tipografik nou an
Mete koulè lyen mondyal la atravè @linkColorepi aplike souliye lyen sèlman sou:hover

Ou ka jwenn estil sa yo nan scaffolding.less .

Reyajiste atravè Nòmalize

Avèk Bootstrap 2, ansyen blòk reset la te abandone an favè Normalize.css , yon pwojè Nicolas Gallagher ak Jonathan Neal ki pouvwa tou HTML5 Boilerplate . Pandan ke nou itilize anpil nan Normalize nan reset.less nou an , nou te retire kèk eleman espesyalman pou Bootstrap.

Egzanp kadriyaj vivan

Sistèm kadriyaj Bootstrap default la itilize 12 kolòn , sa ki fè yon veso ki gen 940 px lajè san yo pa pèmèt karakteristik repons yo . Avèk dosye CSS reponn a ajoute, kadriyaj la adapte yo dwe 724px ak 1170px lajè tou depann de Viewport ou. Anba 767px viewports, kolòn yo vin likid epi pile vètikal.

Debaz kadriyaj HTML

Pou yon senp layout de kolòn, kreye yon .rowepi ajoute kantite ki apwopriye nan .span*kolòn. Kòm sa a se yon griy 12-kolòn, chak .span*spans yon kantite nan 12 kolòn sa yo, epi yo ta dwe toujou ajoute jiska 12 pou chak ranje (oswa kantite kolòn nan paran an).

<div class = "ranje" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Bay egzanp sa a, nou gen .span4ak .span8, fè pou 12 kolòn total ak yon ranje konplè.

Kolòn konpanse

Deplase kolòn sou bò dwat yo lè l sèvi avèk .offset*klas yo. Chak klas ogmante maj gòch yon kolòn pa yon kolòn antye. Pou egzanp, .offset4deplase .span4sou kat kolòn.

3 konpanse 2

3 konpanse 1

3 konpanse 2

6 konpanse 3

<div class = "ranje" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

Kolòn nidifikasyon

Pou fè nich kontni ou a ak kadriyaj default la, ajoute yon nouvo .rowak seri .span*kolòn nan yon .span*kolòn ki deja egziste. Ranje nich yo ta dwe gen ladan yon seri kolòn ki ajoute jiska kantite kolòn paran li yo.

Nivo 1 kolòn

Nivo 2

<div class = "ranje" > 
  <div class = "span9" > 
    Nivo 1 kolòn
    <div class = "ranje" > 
      <div class = "span6" > Nivo 2 </div> 
      <div class = "span3" > Nivo 2 </div> 
    </div>
  </div>
</div>

Egzanp kadriyaj likid vivan

Sistèm kadriyaj likid la sèvi ak pousantaj olye pou yo piksèl pou lajè kolòn. Li gen menm kapasite yo reponn ak sistèm kadriyaj fiks nou an, asire pwopòsyon apwopriye pou rezolisyon ekran kle ak aparèy.

HTML de baz gri likid

Fè nenpòt ranje "likid" pa chanje .rownan .row-fluid. Klas kolòn yo rete menm jan an, sa ki fè li fasil pou baskile ant kadriyaj fiks ak likid.

<div class = "ranje-likid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Compensation likid

Opere menm jan ak konpanse sistèm kadriyaj fiks la: ajoute .offset*nan nenpòt kolòn pou konpanse pa anpil kolòn.

4 konpanse 4

3 konpanse 3

6 konpanse 6

<div class = "ranje-likid" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

Nidifikasyon likid

Griy likid yo itilize nidifikasyon yon fason diferan: chak nivo kolòn enbrike ta dwe ajoute jiska 12 kolòn. Sa a se paske kadriyaj likid la itilize pousantaj, pa piksèl, pou mete lajè.

likid 12

likid 6

<div class = "ranje-likid" > 
  <div class = "span12" > 
    likid 12
    <div class = "ranje-likid" > 
      <div class = "span6" > 
        likid 6
        <div class = "ranje-likid" > 
          <div class = "span6" > Likid 6 </div> 
          <div class = "span6" > Likid 6 </div> 
        </div>
      </div>
      <div class = "span6" > Likid 6 </div> 
    </div>
  </div>
</div>

Layout fiks

Bay yon Layout komen lajè fiks (ak opsyonèlman reponn) ak sèlman <div class="container">obligatwa.

<kò>
  <div class = "kontenè" > 
    ...
  </div>
</kò>

Layout likid

Kreye yon paj likid ki gen de kolòn ak <div class="container-fluid">—gran pou aplikasyon ak dokiman.

<div class = "kontenè-likid" > 
  <div class = "ranje-likid" > 
    <div class = "span2" > 
      <!--Sidebar content-->
    </div>
    <div class = "span10" > 
      <!--Konteni kò-->
    </div>
  </div>
</div>

Pèmèt karakteristik reponn

Aktive CSS ki reponn nan pwojè w la lè w mete tag meta apwopriye a ak fèy style adisyonèl nan <head>dokiman w la. Si ou te konpile Bootstrap nan paj la Customize, ou bezwen sèlman mete tag meta a.

<meta name = "viewport" content = "width = aparèy-lajè, inisyal-echèl = 1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Tèt leve!Bootstrap pa gen ladan karakteristik ki reponn pa default nan moman sa a paske se pa tout bagay ki bezwen reponn. Olye pou yo ankouraje devlopè yo retire karakteristik sa a, nou kalkile li pi bon pou pèmèt li jan sa nesesè.

Konsènan Bootstrap reponn

Rekèt medya pèmèt pou CSS koutim ki baze sou yon kantite kondisyon - rapò, lajè, kalite ekspozisyon, elatriye - men anjeneral konsantre alantou min-widthak max-width.

Modifye lajè kolòn nan kadriyaj nou an
Pile eleman olye pou yo flote nenpòt kote sa nesesè
Redimansyone tit ak tèks pou yo ka pi apwopriye pou aparèy yo

Sèvi ak demann medya yon fason responsab epi sèlman kòm yon kòmansman pou odyans mobil ou yo. Pou pi gwo pwojè, konsidere baz kòd dedye epi yo pa kouch medya demann.

Aparèy sipòte

Bootstrap sipòte yon ti ponyen demann medya nan yon sèl dosye pou ede fè pwojè ou yo pi apwopriye sou diferan aparèy ak rezolisyon ekran. Men sa ki enkli:

Mete etikèt sou	Lajè Layout	Lajè kolòn	Lajè goutyè
Gwo ekspozisyon	1200px ak plis	70px	30px
Default	980px ak plis	60px	20px
Tablèt pòtrè	768px ak pi wo	42px	20px
Telefòn nan tablèt	767px ak anba a	Kolòn likid, pa gen lajè fiks
Telefòn	480px ak anba a	Kolòn likid, pa gen lajè fiks

/* Gwo Desktop */
@medya ( min - lajè : 1200px ) { ... }     
 
/* Portre tablèt nan jaden flè ak Desktop */
@medya ( min - lajè : 768 px ) ak ( max - lajè : 979 px ) { ... }        
 
/* Landscape telefòn nan pòtrè tablèt */
@medya ( max - lajè : 767px ) { ... }     
 
/* Landscape telefòn ak desann */
@medya ( max - lajè : 480px ) { ... }

Klas sèvis piblik ki reponn

Pou yon devlopman ki pi rapid ak zanmitay mobil, sèvi ak klas sèvis piblik sa yo pou montre ak kache kontni pa aparèy. Anba a se yon tablo klas ki disponib yo ak efè yo sou yon fòm demann medya yo bay (ki make pa aparèy). Yo ka jwenn nan responsive.less.

Klas	Telefòn767px ak anba a	Tablèt979 px pou 768 px	BureauxDefault
`.visible-phone`	Vizib	Kache	Kache
`.visible-tablet`	Kache	Vizib	Kache
`.visible-desktop`	Kache	Kache	Vizib
`.hidden-phone`	Kache	Vizib	Vizib
`.hidden-tablet`	Vizib	Kache	Vizib
`.hidden-desktop`	Vizib	Vizib	Kache

Lè pou itilize

Itilize sou yon baz limite epi evite kreye vèsyon totalman diferan nan menm sit la. Olye de sa, sèvi ak yo pou konplete prezantasyon chak aparèy. Yo pa ta dwe itilize sèvis piblik ki reponn ak tab, e kòm sa yo pa sipòte.

Ka tès sèvis piblik ki reponn

Redimansyone navigatè w la oswa chaje sou diferan aparèy pou teste klas ki anwo yo.

Vizib sou...

Mark vèt yo endike ke klas la vizib nan fenèt ou ye kounye a.

Telefòn✔ Telefòn
Tablèt✔ tablèt
Desktop✔ Desktop

Kache sou...

Isit la, mak vèt yo endike ke klas la kache nan fenèt ou ye kounye a.

Telefòn✔ Telefòn
Tablèt✔ tablèt
Desktop✔ Desktop

Anviwònman mondyal yo