Bootstrap a wɔde hyɛ mu

Scaffolding a wɔde yɛ nneɛma

Wɔasi bootstrap wɔ grids a ɛyɛ 12-column a ɛyɛ adwuma, nhyehyɛe, ne nneɛma a ɛwom so.

Wiase nyinaa tebea horow

Ɛhwehwɛ sɛ HTML5 doctype

Bootstrap de HTML nneɛma bi ne CSS agyapade a ɛhwehwɛ sɛ wɔde HTML5 doctype no di dwuma di dwuma. Fa ka ho wɔ wo nnwuma nyinaa mfiase.

  1. <!NKYERƐWDE html>
  2. <html lang = "tw" > 
  3.   ...
  4. </html> na ɛwɔ hɔ

Typography ne nkitahodi ahorow

Bootstrap hyehyɛ wiase nyinaa nkyerɛkyerɛmu titiriw, typography, ne link styles. Ne titiriw no, yɛ:

  • Yi fi marginnipadua no so
  • Set background-color: white;no sobody
  • Fa @baseFontFamily, @baseFontSize, ne @baseLineHeightsu ahorow no di dwuma sɛ yɛn nkyerɛwee nnyinaso
  • Set wiase nyinaa link kɔla via @linkColorna fa link underlines nkutoo di dwuma wɔ so:hover

Wobetumi ahu saa akwan yi wɔ scaffolding.less .

Reset denam Normalize so

Bootstrap 2 no, wɔagyae reset block dedaw no de agye Normalize.css , adwuma a Nicolas Gallagher ne Jonathan Neal yɛe a ɛno nso ma HTML5 Boilerplate no tumi . Bere a yɛde Normalize no fã kɛse no ara di dwuma wɔ yɛn reset.less mu no, yɛayi nneɛma bi afi hɔ titiriw ama Bootstrap.

Default grid nhyehyɛe

Live grid nhwɛso

Default Bootstrap grid system no de columns 12 di dwuma , ɛma ɛyɛ 940px wide container a enni mmuaeɛ features no adwuma. Sɛ wode CSS fael a ɛyɛ mmuae no ka ho a, grid no dannan ne ho ma ɛyɛ 724px ne 1170px trɛw a egyina wo viewport so. Wɔ 767px viewports ase no, columns no bɛyɛ fluid na stack vertically.

1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
2. 2.
3. 3
4. 4.
4. 4.
5. 5
9. 9

Mfitiase grid HTML

Sɛ wopɛ sɛ wonya nkyerɛwde abien nhyehyɛe a ɛnyɛ den a, yɛ a .rowna fa .span*nkyerɛwde dodow a ɛfata ka ho. Esiane sɛ eyi yɛ grid a ɛwɔ nkyerɛwde 12 nti, emu biara .span*trɛw saa nkyerɛwde 12 no dodow bi mu, na ɛsɛ sɛ bere nyinaa ka ho kosi 12 ma nkyerɛwde biara (anaasɛ nkyerɛwde dodow a ɛwɔ ɔwofo no mu).

  1. <div adesuakuw = "row" > 
  2.   <div adesuakuw = "span4" > ... </div> 
  3.   <div adesuakuw = "span8" > ... </div> 
  4. </div> no

Sɛ yɛde saa nhwɛso yi ma a, yɛwɔ .span4ne .span8, a ɛma wonya nkyerɛwde 12 a wɔaka abom ne row a edi mũ.

Offsetting nkyerɛwde ahorow

Fa nkyerɛwde ahorow no kɔ nifa denam .offset*adesua ahorow so. Adesuakuw biara ma kɔla bi benkum so no kɔ soro kɔla mũ nyinaa. Sɛ nhwɛso no, .offset4ɛkɔfa .span4adum anan so.

4. 4.
3 a wɔde ahyɛ mu 2
3 a wɔde ahyɛ mu 1
3 a wɔde ahyɛ mu 2
6 a wɔde ahyɛ mu 3 
  1. <div adesuakuw = "row" > 
  2.   <div adesuakuw = "span4" > ... </div> 
  3.   <div adesuakuw = "span3 offset2" > ... </div> . Ɔde ne nsa kyerɛɛ ne so, na ɔde ne nsa kyerɛɛ ne so 
  4. </div> no

Nnua a wɔde yɛ nesting

Sɛ wopɛ sɛ wode default grid no hyɛ wo nsɛm no mu a, fa kɔla foforo .rowne .span*nkyerɛwde ahorow ka ho wɔ .span*kɔla bi a ɛwɔ hɔ dedaw no mu. Ɛsɛ sɛ nested rows no de columns ahorow a ɛka bom yɛ columns dodow a ɛwɔ n’awofo no ka ho.

Level 1 kɔla a ɛto so 1 no
Ɔfa 2
Ɔfa 2 
  1. <div adesuakuw = "row" > 
  2.   <div adesuakuw = "span9" > 
  3.     Level 1 kɔla a ɛto so 1 no
  4.     <div adesuakuw = "row" > 
  5.       <div adesuakuw = "span6" > Ɔfa 2 </div> 
  6.       <div adesuakuw = "span3" > Ɔfa 2 </div> 
  7.     </div> no
  8.   </div> no
  9. </div> no

Nsu a wɔde yɛ grid nhyehyɛe

Live nsu grid nhwɛso

Nsu grid nhyehyɛe no de ɔha biara mu nkyem di dwuma sen sɛ wɔde piksel bedi dwuma ma adum trɛw. Ɛwɔ mmuaeɛ tumi te sɛ yɛn fixed grid nhyehyɛeɛ no, ɛhwɛ ma proportions a ɛfata ma key screen resolutions ne devices.

1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
4. 4.
4. 4.
4. 4.
4. 4.
8
6. 6
6. 6
12. 12

Mfitiaseɛ nsuo grid HTML

Yɛ row biara "nsu" denam nsakrae a wobɛsakra .rowayɛ no .row-fluid. Adum adesua ahorow no kɔ so tra hɔ sɛnea ɛte no ara pɛpɛɛpɛ, na ɛma ɛyɛ mmerɛw sɛ wobɛdannan grid a ɛyɛ pintinn ne nea ɛyɛ nsu ntam.

  1. <div adesuakuw = "row-nsu" > 
  2.   <div adesuakuw = "span4" > ... </div> 
  3.   <div adesuakuw = "span8" > ... </div> 
  4. </div> no

Nsu a wɔde siw ano

Ɛyɛ adwuma ɔkwan koro no ara so sɛnea fixed grid system offsetting: fa ka .offset*column biara ho ma offset denam column dodow no so.

4. 4.
4 a wɔde ahyɛ mu 4
3 a wɔde ahyɛ mu 3
3 a wɔde ahyɛ mu 3
6 a wɔde ahyɛ mu 6 
  1. <div adesuakuw = "row-nsu" > 
  2.   <div adesuakuw = "span4" > ... </div> 
  3.   <div adesuakuw = "span4 ɔfase2" > ... </div> 
  4. </div> no

Nsu a wɔde yɛ berebuw

Fluid grids de nesting di dwuma ɔkwan soronko so: ɛsɛ sɛ nested level biara a ɛwɔ columns no mu no de columns 12 ka ho. Eyi te saa efisɛ nsu grid no de ɔha biara mu nkyekyem di dwuma, na ɛnyɛ piksel, de hyehyɛ ntrɛwmu.

Nsu a ɛwɔ mu 12
Nsu a ɛwɔ mu 6
Nsu a ɛwɔ mu 6
Nsu a ɛwɔ mu 6
Nsu a ɛwɔ mu 6 
  1. <div adesuakuw = "row-nsu" > 
  2.   <div adesuakuw = "span12" > 
  3.     Nsu a ɛwɔ mu 12
  4.     <div adesuakuw = "row-nsu" > 
  5.       <div adesuakuw = "span6" > 
  6.         Nsu a ɛwɔ mu 6
  7.         <div adesuakuw = "row-nsu" > 
  8.           <div adesuakuw = "span6" > Nsu 6 </div> 
  9.           <div adesuakuw = "span6" > Nsu 6 </div> 
  10.         </div> no
  11.       </div> no
  12.       <div adesuakuw = "span6" > Nsu 6 </div> 
  13.     </div> no
  14.   </div> no
  15. </div> no

Nhyehyɛe ahorow

Wɔasiesie nhyehyɛe

Ɛde fixed-width (na sɛ wopɛ sɛ ɛyɛ mmuae) nhyehyɛe a wɔtaa de di dwuma a <div class="container">ɛho hia nkutoo ma.

  1. <nipadua>
  2.   <div adesuakuw = "adekorabea" > 
  3.     ...
  4.   </div> no
  5. </nipadua>

Nsu nhyehyɛe

Yɛ kratafa a ɛyɛ nsu, a ɛwɔ adum abien a —ɛyɛ <div class="container-fluid">papa ma application ne docs.

  1. <div class = "ahina-nsuo" > 
  2.   <div adesuakuw = "row-nsu" > 
  3.     <div adesuakuw = "span2" > 
  4.       <!--Sidebar mu nsɛm-->
  5.     </div> no
  6.     <div adesuakuw = "span10" > 
  7.       <!--Nipadua mu nsɛm-->
  8.     </div> no
  9.   </div> no
  10. </div> no

Nsusuwii a ɛyɛ mmuae

Nneɛma a ɛma mmuae a wɔma ɛyɛ adwuma

Dane CSS a ɛyɛ mmuae wɔ wo adwuma no mu denam meta tag a ɛfata ne stylesheet foforo <head>a wode bɛka wo krataa no ho no so. Sɛ woaboaboa Bootstrap ano afi Customize krataafa no so a, nea ehia sɛ wode meta tag no nkutoo ka ho.

  1. <meta din = "hwɛbea" nsɛm = "trɛw=mfiri-trɛw, mfiase-nsusuwii=1.0" >  
  2. <link href = "agyapadeɛ/css/bootstrap-mmuaeɛ.css" rel = "ɔkwan so krataa" >

Ti a ɛwɔ soro!Bootstrap nka mmuaeɛ features default saa berɛ yi sɛdeɛ ɛnyɛ biribiara na ɛhia sɛ ɛyɛ responsive. Sɛ́ anka yɛbɛhyɛ wɔn a wɔyɛ nneɛma no nkuran ma wonyi saa ade yi mfi hɔ no, yesusuw ho sɛ eye sɛ yɛbɛma ayɛ adwuma sɛnea ɛho hia.

Ɛfa Bootstrap a ɛyɛ mmuae ho

Mfiri a ɛyɛ adwuma yiye

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

Fa media nsɛmmisa di dwuma wɔ asɛyɛde mu na ɛyɛ mfiase nkutoo ma wo mobile atiefo. Sɛ wopɛ nnwuma akɛse a, yɛ susuw dedicated code bases ho na ɛnyɛ layers of media queries.

Mfiri ahorow a wɔboa

Bootstrap boa media nsɛmmisa kakraa bi wɔ fael biako mu 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
Nneɛma kɛse a wɔde kyerɛ 1200px ne nea ɛboro saa 70px na ɛyɛ 30px na ɛyɛ
Mfiaseɛ 980px ne nea ɛboro saa 60px na ɛyɛ 20px na ɛyɛ
Mfonini a wɔde ayɛ abopon 768px ne nea ɛboro saa 42px na ɛyɛ 20px na ɛyɛ
Telefon a wɔde di dwuma wɔ tablɛt so 767px ne nea ɛwɔ ase ha Nsu adum, enni ntrɛwmu a wɔahyɛ da ayɛ
Tɛlɛfon ahorow 480px ne nea ɛwɔ ase ha Nsu adum, enni ntrɛwmu a wɔahyɛ da ayɛ 
  1. /* Desktop kɛseɛ */
  2. @media ( min - trɛw : 1200px ) { ... }.     
  3.  
  4. /* Mfonini tablet a ɛkɔ asase ne desktop so */
  5. @media ( min - trɛw : 768px ) ne ( max - trɛw : 979px ) { ... }.        
  6.  
  7. /* Asase so fon a wɔde yɛ mfonini tablet */
  8. @media ( max - trɛw : 767px ) { ... }.     
  9.  
  10. /* Landscape fon ahorow ne ase */
  11. @media ( max - trɛw : 480px ) { ... }.

Utility adesua ahorow a ɛma mmuae

Sɛ wopɛ sɛ woyɛ mobile-friendly ntɛmntɛm a, fa saa utility class ahorow yi di dwuma fa kyerɛ na wode nneɛma sie denam mfiri so. Ase hɔ no yɛ table a ɛkyerɛ adesua ahorow a ɛwɔ hɔ ne wɔn nkɛntɛnso wɔ media asɛmmisa nhyehyɛe bi a wɔde ama (a wɔde mfiri ahyɛ no agyirae). Wobetumi ahu wɔn wɔ responsive.less.

Klaase Tɛlɛfon ahorow767px ne nea ɛwɔ ase ha Nnuru a wɔde yɛ aduru979px na ɛyɛ 768px Desktop ahorow a wɔde di dwumaMfiaseɛ
.visible-phone Nea wotumi hu
.visible-tablet Nea wotumi hu
.visible-desktop Nea wotumi hu
.hidden-phone Nea wotumi hu Nea wotumi hu
.hidden-tablet Nea wotumi hu Nea wotumi hu
.hidden-desktop Nea wotumi hu Nea wotumi hu

Bere a ɛsɛ sɛ wɔde di dwuma

Fa di dwuma wɔ anohyeto mu na kwati sɛ wobɛbɔ wɛbsaet koro no ara nkyerɛase ahorow a ɛsono emu biara koraa. Mmom no, fa di dwuma de ka mfiri biara a wɔde bɛkyerɛkyerɛ mu no ho. Ɛnsɛ sɛ wɔde utilities a ɛma mmuae di dwuma wɔ tables ho, na sɛnea ɛte no, wɔmfa mmoa.

Mmuae utilities sɔhwɛ asɛm

Sesa wo browser no kɛse anaa fa gu mfiri ahorow so de sɔ atifi hɔ adesua ahorow no hwɛ.

Wotumi hu wɔ...

Green checkmarks kyerɛ sɛ class no da adi wɔ wo mprempren viewport no mu.

  • Fon✔ Tɛlɛfon so
  • Tablet a wɔde yɛ aduru✔ Tablet a wɔde yɛ aduru
  • Desktop so✔ Desktop a wɔde di dwuma

Wɔde asie wɔ...

Ɛha yi, green checkmarks kyerɛ sɛ class no ahintaw wɔ wo mprempren viewport no mu.

  • Fon✔ Tɛlɛfon so
  • Tablet a wɔde yɛ aduru✔ Tablet a wɔde yɛ aduru
  • Desktop so✔ Desktop a wɔde di dwuma