Scaffolding a wɔde yɛ nneɛma

Wɔasi bootstrap wɔ grid a ɛwɔ 12-column a ɛyɛ adwuma so. Yɛde fixed- ne fluid-width layouts nso a egyina saa nhyehyɛe no so aka ho.

Default 940px grid a wɔde ahyɛ mu

1. 1.

4. 4.

6. 6

12. 12

Grid nhyehyɛe a wɔde ama sɛ Bootstrap no fã no yɛ 940px-trɛw, 12-column grid .

Ɛsan nso wɔ nsakraeɛ anan a ɛyɛ mmuaeɛ ma mfiri ahodoɔ ne nsusuiɛ: telefon, tablɛt mfonini, pon so asase ne desktop nketewa, ne widescreen desktop akɛseɛ.

<div adesuakuw = "row" > 
  <div adesuakuw = "span4" > ... </div> 
  <div adesuakuw = "span8" > ... </div> 
</div> no

Sɛnea wɔakyerɛ wɔ ha no, wobetumi ayɛ nhyehyɛe titiriw bi a "adum" abien, emu biara trɛw fapem adum 12 a yɛkyerɛkyerɛɛ mu sɛ yɛn grid nhyehyɛe no fã no dodow bi mu.

Offsetting nkyerɛwde ahorow

4. 4.

4 a wɔde ahyɛ mu 4

3 a wɔde ahyɛ mu 3

8 a wɔde ahyɛ mu 4

<div adesuakuw = "row" > 
  <div adesuakuw = "span4" > ... </div> 
  <div adesuakuw = "span4 ɔfase4" > ... </div> 
</div> no

Nesting columns a wɔde hyɛ mu

Sɛ wode static (ɛnyɛ nsuo) grid nhyehyɛe a ɛwɔ Bootstrap mu no di dwuma a, nesting yɛ mmerɛw. Sɛ wopɛ sɛ wode wo nsɛm no hyɛ mu a, fa kɔla foforo .rowne .span*nkyerɛwde ahorow ka ho kɛkɛ wɔ .span*kɔla bi a ɛwɔ hɔ dedaw mu.

Nhwɛsoɔ

Level 1 a ɛwɔ kɔla no mu

Ɔfa 2

<div adesuakuw = "row" > 
  <div adesuakuw = "span12" > 
    Level 1 a ɛwɔ kɔla no mu
    <div adesuakuw = "row" > 
      <div adesuakuw = "span6" > Ɔfa 2 </div> 
      <div adesuakuw = "span6" > Ɔfa 2 </div> 
    </div> no
  </div> no
</div> no

Grid a wɔayɛ no sɛnea wɔpɛ

Nneɛma a ɛsakra	Default bo a ɛsom	Nkyerɛmu
`@gridColumns`	12. 12	Ntrɛwmu dodow
`@gridColumnWidth`	60px na ɛyɛ	Ntrɛwmu a ɛwɔ adum biara mu
`@gridGutterWidth`	20px na ɛyɛ	Ahunmu a enye wɔ adum ntam
`@siteWidth`	Wɔabu akontaa sɛ wɔaka abom a ɛfa adum ne nsu a ɛkɔ nsu mu nyinaa ho	Kan dodow a columns ne gutters de set width a `.container-fixed()`mixin no

Nneɛma a ɛsakra wɔ LESS mu

Wɔasi wɔ Bootstrap mu no yɛ nsa kakraa bi a ɛsakra a wɔde siesie default 940px grid nhyehyɛe no, a wɔakyerɛw ho asɛm wɔ atifi hɔ. Nsakraeɛ nyinaa ma grid no, wɔde sie wɔ variables.less mu.

Sɛnea wɔyɛ no sɛnea wopɛ

Grid no a wobɛsesa no kyerɛ sɛ wobɛsesa @grid*variables mmiɛnsa no na woasan aboaboa Bootstrap ano. Sesa grid variables no wɔ variables.less mu na fa akwan anan a wɔakyerɛw ato hɔ no mu biako di dwuma de san boaboa ano . Sɛ wode columns pii rebɛka ho a, hwɛ hu sɛ wode CSS no bɛka ho ama wɔn a wɔwɔ grid.less no.

Sɛ́ wobɛkɔ so ayɛ aso

Grid no a wɔayɛ no sɛnea wɔpɛ no yɛ adwuma wɔ default level no nkutoo so, 940px grid no. Sɛ wopɛ sɛ wohwɛ Bootstrap no afã horow a ɛyɛ mmuae no so a, ɛho behia nso sɛ wosakra grids no wɔ responsive.less mu.

Wɔasiesie nhyehyɛe

Default ne mmerɛw 940px-trɛw, mfinimfini nhyehyɛe ma ɛkame ayɛ sɛ wɛbsaet anaa kratafa biara a obiako de ama <div class="container">.

<nipadua>
  <div adesuakuw = "adekorabea" > 
    ...
  </div> no
</nipadua>

Nsu nhyehyɛe

<div class="container-fluid">ma kratafa nhyehyɛe a ɛyɛ mmerɛw, min- ne max-trɛw, ne benkum so afã bi. Ɛyɛ papa ma apps ne docs.

<div class = "ahina-nsuo" > 
  <div adesuakuw = "row-nsu" > 
    <div adesuakuw = "span2" > 
      <!--Sidebar mu nsɛm-->
    </div> no
    <div adesuakuw = "span10" > 
      <!--Nipadua mu nsɛm-->
    </div> no
  </div> no
</div> no

Mfiri ahorow a wɔboa

Bootstrap boa media nsɛmmisa kakraa bi de boa ma wo nnwuma no fata kɛse wɔ mfiri ahorow ne screen resolutions so. Nea ɛka ho ni:

Ahyɛnsoɔ	Nhyehyɛe no trɛw	Kɔla no trɛw	Gutter no trɛw
Smartphone ahorow a wɔde di dwuma	480px ne nea ɛwɔ ase ha	Nsu adum, enni ntrɛwmu a wɔahyɛ da ayɛ
Mfonini a wɔde ayɛ abopon	480px kosi 768px	Nsu adum, enni ntrɛwmu a wɔahyɛ da ayɛ
Asase ho mfonini a wɔde ayɛ abopon	768px kosi 940px	44px na ɛyɛ	20px na ɛyɛ
Mfiaseɛ	940px ne nea ɛboro saa	60px na ɛyɛ	20px na ɛyɛ
Nneɛma kɛse a wɔde kyerɛ	1210px ne nea ɛboro saa	70px na ɛyɛ	30px na ɛyɛ

Nea wɔyɛ

Media nsɛmmisa ma kwan ma CSS a wɔahyɛ da ayɛ a egyina tebea horow bi so—nsusuwii, ntrɛwmu, ɔyɛkyerɛ su, ne nea ɛkeka ho—nanso ɛtaa twe adwene si min-widthne max-width.

Sesa column no trɛw wɔ yɛn grid no mu
Stack elements mmom sen sɛ wobɛsensɛn baabiara a ɛho hia
Sesa nsɛmti ne nsɛm no kɛse na ama afata mfiri ahorow

Nsɛm ho amanneɛbɔfo nsɛmmisa no a wɔde bedi dwuma

Bootstrap ntumi nka saa media nsɛmmisa yi ho ankasa, nanso ntease ne nea wode bɛka ho no yɛ mmerɛw yiye na ɛhwehwɛ sɛ wode nhyehyɛe kakraa bi na ɛwɔ hɔ. Wowɔ akwan kakraa bi a wobɛfa so de Bootstrap no mu nneɛma a ɛma mmuae no aka ho:

Fa mmuae a wɔaboaboa ano no di dwuma, bootstrap-responsive.css
Fa @import "responsive.less" ka ho na san boaboa Bootstrap ano
Sesa na san boaboa responsive.less sɛ ɛyɛ soronko

Dɛn nti na womfa nka ho kɛkɛ? Sɛ yɛbɛka nokware a, ɛnyɛ biribiara na ehia sɛ ɛyɛ nea ɛfata. Sɛ́ anka yɛbɛhyɛ wɔn a wɔyɛ nneɛma no nkuran ma wonyi saa ade yi mfi hɔ no, yesusuw sɛ eye sɛ yɛbɛma ayɛ adwuma.

  // Landscape fon ahorow ne ase
  @media ( max - trɛw : 480px ) { ... }.     
 
  // Landscape fon a wɔde yɛ mfonini tablet
  @media ( max - trɛw : 768px ) { ... }.     
 
  // Mfonini tablet to landscape ne desktop so
  @media ( min - trɛw : 768px ) ne ( max - trɛw : 940px ) { ... }.        
 
  // Desktop kɛse bi
  @media ( min - trɛw : 1200px ) { . }.