Bootstrap a wɔde hyɛ mu

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.

Wiase nyinaa akwan a wɔfa so yɛ CSS reset, typography, ne links

Ɛhwehwɛ sɛ HTML5 doctype

Bootstrap de HTML elements ne CSS properties a ɛhwehwɛ sɛ wɔde HTML5 doctype no di dwuma di dwuma. Hwɛ hu sɛ wode bɛka Bootstrapped krataafa biara mfiase wɔ wo project no mu.

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

Typography ne nkitahodi ahorow

Wɔ scaffolding.less fael no mu no, yɛde wiase nyinaa nkyerɛkyerɛmu titiriw, typography, ne link styles sisi hɔ. Ne titiriw no, yɛn:

  • Yi margin a ɛwɔ nipadua no so no fi hɔ
  • Set background-color: white;no sobody
  • Fa @baseFontFamily, @baseFontSize, ne @baseLineHeightsu ahorow no di dwuma sɛ yɛn nkyerɛwee nnyinaso
  • Set global link color via @linkColorna fa link underlines nkutoo di dwuma wɔ so:hover

Reset denam Normalize so

Ɛde besi Bootstrap 2 no, atetesɛm CSS reset no anya nkɔso sɛ ɛde nneɛma a efi Normalize.css , adwuma bi a Nicolas Gallagher yɛe a ɛno nso ma HTML5 Boilerplate tumi bedi dwuma .

Wobetumi ahu reset foforo no wɔ reset.less , nanso wɔayi nneɛma pii afi hɔ sɛnea ɛbɛyɛ a ɛbɛyɛ tiawa na ayɛ pɛpɛɛpɛ.

Default grid nhyehyɛe 12 columns a ɛwɔ mmuae twist

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

Default grid nhyehyɛe a wɔde ama wɔ Bootstrap mu no de nkyerɛwde 12 a ɛkyerɛ ase wɔ ntrɛwmu a ɛyɛ 724px, 940px (default a CSS a ɛyɛ mmuae nka ho), ne 1170px di dwuma. Wɔ 767px viewports ase no, columns no bɛyɛ fluid na stack vertically.

  1. <div adesuakuw = "row" > 
  2.   <div adesuakuw = "span4" > ... </div> 
  3.   <div adesuakuw = "span8" > ... </div> 
  4. </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
3 a wɔde ahyɛ mu 3
8 a wɔde ahyɛ mu 4 
  1. <div adesuakuw = "row" > 
  2.   <div adesuakuw = "span4" > ... </div> 
  3.   <div adesuakuw = "span4 ɔfase4" > ... </div> 
  4. </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ɔ

Ɛsɛ sɛ nested rows no de columns ahorow a ɛka bom yɛ columns dodow a ɛwɔ it's parent no ka ho. .span3Sɛ nhwɛso no, ɛsɛ sɛ wɔde nkyerɛwde abien a wɔde ahyɛ mu gu a .span6.

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

Fluid grid system 12 a ɛyɛ mmuae, a egyina ɔha biara mu nkyekyem so

Nsu a ɛyɛ adum

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

Ɔha biara mu nkyem, ɛnyɛ piksel

Nsuo grid nhyehyɛe no de ɔha biara mu nkyekyɛmu di dwuma ma adum trɛw sen sɛ wɔde piksel a wɔahyɛ da ayɛ. Ɛsan nso wɔ mmuaeɛ nsakraeɛ korɔ no ara sɛ yɛn fixed grid nhyehyɛeɛ no, ɛhwɛ ma proportions a ɛfata ma key screen resolutions ne devices.

Nsu a ɛwɔ toatoa so

Ma row biara nyɛ nsu denam nsakrae a wobɛsakra ayɛ no ara kwa .rowso .row-fluid. Adum no tra hɔ pɛpɛɛpɛ, na ɛma ɛyɛ super tẽẽ sɛ wobɛdannan ntam a ɛyɛ fixed ne fluid layouts.

Markup a wɔde hyɛ agyirae

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

Nsu a wɔde yɛ berebuw

Nesting ne fluid grids yɛ soronko kakra: nested columns dodow no nhia sɛ ɛne ɔwofo no hyia. Mmom, wo columns no reset wɔ level biara efisɛ row biara gye 100% wɔ ɔwofo column no mu.

Nsu a ɛwɔ mu 12
Nsu a ɛwɔ mu 6
Nsu a ɛwɔ mu 6 
  1. <div adesuakuw = "row-nsu" > 
  2.   <div adesuakuw = "span12" > 
  3.     Level 1 a ɛwɔ kɔla no mu
  4.     <div adesuakuw = "row-nsu" > 
  5.       <div adesuakuw = "span6" > Ɔfa 2 </div> 
  6.       <div adesuakuw = "span6" > Ɔfa 2 </div> 
  7.     </div> no
  8.   </div> no
  9. </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

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.

Layouts Mfitiaseɛ templates a wɔde bɛyɛ wɛbsaet nkratafa

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">.

  1. <nipadua>
  2.   <div adesuakuw = "adekorabea" > 
  3.     ...
  4.   </div> no
  5. </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.

  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

Responsive design Media nsɛmmisa ma mfiri ahorow ne nsusuwii ahorow

Mfiri a ɛyɛ adwuma yiye

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

Fa nsɛm ho amanneɛbɔfo 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
Smartphone ahorow a wɔde di dwuma 480px ne nea ɛwɔ ase ha Nsu adum, enni ntrɛwmu a wɔahyɛ da ayɛ
Smartphones 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ɛ
Mfonini a wɔde ayɛ abopon 768px ne nea ɛboro saa 42px na ɛyɛ 20px na ɛyɛ
Mfiaseɛ 980px ne nea ɛboro saa 60px na ɛyɛ 20px na ɛyɛ
Nneɛma kɛse a wɔde kyerɛ 1200px ne nea ɛboro saa 70px na ɛyɛ 30px na ɛyɛ

Ɛhwehwɛ sɛ meta tag

Sɛnea ɛbɛyɛ a wobɛhwɛ ahu sɛ mfiri ahorow no bɛda nkratafa a ɛyɛ mmuae adi yiye no, fa viewport meta tag no ka ho.

  1. <meta din = "hwɛbea" nsɛm = "trɛw=mfiri-trɛw, mfiase-nsusuwii=1.0" >

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:

  1. Fa mmuae a wɔaboaboa ano no di dwuma, bootstrap-responsive.css
  2. Fa @import "responsive.less" ka ho na san boaboa Bootstrap ano
  3. Sesa na san boaboa responsive.less ano sɛ fael a ɛ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.

  1.   /* Landscape fon ahorow ne ase */
  2.   @media ( max - trɛw : 480px ) { ... }.     
  3.  
  4.   /* Asase so telefon a wɔde yɛ mfonini tablet */
  5.   @media ( max - trɛw : 767px ) { ... }.     
  6.  
  7.   /* Mfonini tablet a ɛkɔ asase ne desktop so */
  8.   @media ( min - trɛw : 768px ) ne ( max - trɛw : 979px ) { ... }.        
  9.  
  10.   /* Desktop kɛseɛ */
  11.   @media ( min - trɛw : 1200px ) { ... }.

Utility adesua ahorow a ɛma mmuae

Dɛn ne wɔn

Sɛ wopɛ sɛ wonya nkɔso a ɛyɛ ntɛm a ɛyɛ mobile-friendly a, fa saa mfitiase utility adesua ahorow yi di dwuma ma kyerɛ na wode nneɛma sie denam mfiri so.

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.

Sɛ nhwɛso no, wubetumi akyerɛ <select>element bi ama nav wɔ mobile layouts so, nanso ɛnyɛ tablet anaa desktop so.

Boa adesua ahorow

Wɔakyerɛ wɔ ha ne adesua ahorow a yɛboa ne nkɛntɛnso a ɛwɔ so wɔ media asɛmmisa nhyehyɛe bi a wɔde ama so (a wɔde mfiri ahyɛ no agyirae). Wobetumi ahu wɔn wɔ responsive.less.

Klaase Tɛlɛfon ahorow480px ne nea ɛwɔ ase ha Nnuru a wɔde yɛ aduru767px ne nea ɛwɔ ase ha Desktop ahorow a wɔde di dwuma768px ne nea ɛboro saa
.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

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