Bootstrap

Scaffolding

Bootstrap yakavakirwa pane inopindura 12-column grids, marongero, uye zvikamu.

Global settings

Inoda HTML5 doctype

Bootstrap inoshandisa zvimwe zveHTML zvinhu uye CSS zvivakwa zvinoda kushandiswa kweHTML5 doctype. Isanganise pakutanga kwemapurojekiti ako ese.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

Typography uye zvinongedzo

Bootstrap inoseta kuratidzwa kwepasirese, kutaipa, uye mataira ekubatanidza. Kunyanya, isu:

  • Bvisa marginpamuviri
  • Set background-color: white;pabody
  • Shandisa iyo @baseFontFamily, @baseFontSize, uye @baseLineHeighthunhu seyedu typographic base
  • Seta iyo yepasi rose yekubatanidza ruvara kuburikidza @linkColoruye shandisa chinongedzo pasi pemutsara chete pa:hover

Aya masitaera anogona kuwanikwa mukati me scaffolding.less .

Reset uchishandisa Normalize

NeBootstrap 2, chivharo chekare chekuseta patsva chakasiiwa chichifarira Normalize.css , chirongwa chakaitwa naNicolas Gallagher naJonathan Neal chinopawo simba HTML5 Boilerplate . Nepo isu tichishandisa yakawanda yeNormalize mukati medu reset.less , takabvisa zvimwe zvinhu zvakanangana neBootstrap.

Default grid system

Rarama grid muenzaniso

Iyo yakasarudzika Bootstrap grid system inoshandisa gumi nemaviri makoramu, ichigadzira 940px yakafara mudziyo isina anopindura maficha anogoneswa . Iine inopindura CSS faira yakawedzerwa, iyo grid inochinjika kuita 724px uye 1170px yakafara zvichienderana nekutarisa kwako. Pazasi pe767px nzvimbo dzekuona, makoramu acho anova mvura uye akaturikidzana.

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

Basic grid HTML

Pakurongeka kwemakoramu maviri, gadzira a .rowuye wedzera nhamba yakakodzera .span*yemakoramu. Sezvo iri gidhi remakoramu gumi nemaviri, imwe neimwe .span*inotambanudzira huwandu hwemakoramu gumi nemaviri, uye inofanira kugara ichiwedzera kusvika gumi nembiri pamutsara wega wega (kana huwandu hwemakoramu mumubereki).

  1. <div kirasi = "mutsara" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </ div>

Tichipa muenzaniso uyu, tine .span4uye .span8, tichigadzira gumi nemaviri makoramu uye mutsara wakakwana.

Offsetting columns

Fambisa makoramu kurudyi uchishandisa .offset*makirasi. Kirasi yega yega inowedzera kumucheto kwekuruboshwe kwekoramu nekoramu yakazara. Semuenzaniso, .offset4inofamba .span4pamusoro pemakoramu mana.

4
3 kubvisa 2
3 kubvisa 1
3 kubvisa 2
6 kukanganisa 3 
  1. <div kirasi = "mutsara" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </ div>

Nesting columns

Kuti uise zvirimo zvako neiyo default grid, wedzera nyowani .rowuye seti .span*yemakoramu mukati meiyo iripo .span*column. Mitsara yakagara inofanira kusanganisira seti yemakoramu anowedzera kusvika kunhamba yemakoramu emubereki wayo.

Level 1 column
Level 2
Level 2 
  1. <div kirasi = "mutsara" > 
  2.   <div class = "span9" > 
  3.     Level 1 column
  4.     <div kirasi = "mutsara" > 
  5.       <div class = "span6" > Level 2 </div> 
  6.       <div class = "span3" > Level 2 </div> 
  7.     </ div>
  8.   </ div>
  9. </ div>

Fluid grid system

Rarama fluid grid muenzaniso

Iyo fluid grid system inoshandisa percents pachinzvimbo chepixels kune column wides. Iyo ine hunyanzvi hwekupindura hwakafanana neyedu yakagadziriswa gidhi system, kuve nechokwadi chiyero chakakodzera chekiyi skrini yekugadzirisa uye zvishandiso.

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

Basic fluid grid HTML

Ita chero mutsara "fluid" nekushandura .rowkuita .row-fluid. Makolamu makirasi anogara akafanana, zvichiita kuti zvive nyore kutenderedza pakati peyakagadziriswa uye fluid grids.

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </ div>

Fluid offsetting

Inoshanda nenzira imwechete seyakagadziriswa gidhi system yekumisa: wedzera .offset*kune chero koramu kuti igadzirise nemakoramu mazhinji.

4
4 kubvisa 4
3 kukanganisa 3
3 kukanganisa 3
6 kupedzisa 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </ div>

Fluid nesting

Fluid grids anoshandisa dendere zvakasiyana: yega yega nhanho yemakoramu inofanira kuwedzera kusvika gumi nemaviri. Izvi zvinodaro nekuti gidhi remvura rinoshandisa zvikamu, kwete mapikseli, pakuseta upamhi.

Fluid 12
Mvura 6
Mvura 6
Mvura 6
Mvura 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Fluid 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         Mvura 6
  7.         <div class = "row-fluid" > 
  8.           <div class = "span6" > Fluid 6 </div> 
  9.           <div class = "span6" > Fluid 6 </div> 
  10.         </ div>
  11.       </ div>
  12.       <div class = "span6" > Fluid 6 </div> 
  13.     </ div>
  14.   </ div>
  15. </ div>

Layouts

Fixed layout

Inopa yakajairwa yakagadziriswa-hupamhi (uye sarudzo inopindura) dhizaini <div class="container">inodiwa chete.

  1. <muviri>
  2.   <div kirasi = "mudziyo" > 
  3.     ...
  4.   </ div>
  5. </ body>

Fluid marongerwo

Gadzira peji remvura, rine <div class="container-fluid">makoramu maviri ne-yakanakira maapplication uye zvinyorwa.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Sidebar content-->
  5.     </ div>
  6.     <div class = "span10" > 
  7.       <!--Muviri zvemukati-->
  8.     </ div>
  9.   </ div>
  10. </ div>

Inopindura dhizaini

Kugonesa maficha anopindura

Batidza inopindura CSS mupurojekiti yako nekubatanidza iyo yakakodzera meta tag uye yekuwedzera masitayera mukati megwaro <head>rako. Kana iwe wakanyora Bootstrap kubva kuGadzirisa peji, iwe unongoda kusanganisira meta tag.

  1. <meta name = "viewport" content = "width=device-width, first-scale=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Musoro!Bootstrap haisanganisi maficha anopindura nekukasira panguva ino sezvo zvisiri zvese zvinoda kupindurwa. Panzvimbo pekukurudzira vanogadzira kuti vabvise chimiro ichi, isu tinoona zvakanakisisa kuti tigonese sezvinodiwa.

Nezve inopindura Bootstrap

Inopindura midziyo

Mivhunzo yeMedia inobvumira tsika yeCSS zvichibva pane akati wandei mamiriro- retio, upamhi, mhando yekuratidzira, nezvimwe-asi kazhinji inotarisana nekutenderera min-widthuye max-width.

  • Shandura hupamhi hwekoramu mune yedu grid
  • Isa zvinhu panzvimbo pekuyangarara pese pazvinoda
  • Regedza misoro uye zvinyorwa kuti zvinyatsoenderana nemidziyo

Shandisa midhiya mibvunzo zvine musoro uye sekutanga kune vateereri vako vefoni. Kune mapurojekiti akakura, funga mabhesi ekodhi akatsaurirwa uye kwete zvikamu zvemibvunzo midhiya.

Zvishandiso zvinotsigirwa

Bootstrap inotsigira mashoma emibvunzo midhiya mufaira rimwe chete kubatsira kuita kuti mapurojekiti ako ave akakodzera pamidziyo yakasiyana uye skrini yekugadzirisa. Hezvino izvo zvinosanganisirwa:

Label Layout width Column width Gutter width
Kuratidzwa kukuru 1200px uye kumusoro 70px 30px
Default 980px uye kumusoro 60px 20px
Portrait mahwendefa 768px uye pamusoro 42px 20px
Mafoni kumapiritsi 767px uye pazasi Fluid columns, hapana hupamhi hwakagadziriswa
Mafoni 480px uye pasi Fluid columns, hapana hupamhi hwakagadziriswa 
  1. /* Desktop hombe */
  2. @media ( min - width : 1200px ) { ... }     
  3.  
  4. /* Mufananidzo piritsi kune mamiriro uye desktop */
  5. @media ( min - width : 768px ) uye ( max - width : 979px ) { ... }        
  6.  
  7. /* Landscape foni kune mufananidzo piritsi */
  8. @media ( max - width : 767px ) { ... }     
  9.  
  10. /* Mafoni emamiriro uye pasi */
  11. @media ( max - width : 480px ) { ... }

Anopindura utility makirasi

Nekukurumidza kusimudzira nharembozha, shandisa aya makirasi ekushandisa kuratidza uye kuviga zvirimo nemudziyo. Pazasi pane tafura yemakirasi aripo uye maitiro avo pane yakapihwa midhiya yemubvunzo marongerwo (yakanyorwa nemudziyo). Vanogona kuwanikwa mu responsive.less.

Kirasi Mafoni767px uye pazasi Mahwendefa979px kusvika 768px DesktopsDefault
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

Nguva yekushandisa

Shandisa pane yakaganhurwa uye dzivirira kugadzira zvakasiyana zvachose shanduro dzesaiti imwechete. Pane kudaro, zvishandise kuzadzisa mharidzo yemudziyo wega wega. Zvishandiso zvinoteerera hazvifanirwe kushandiswa nematafura, uye nekudaro hazvitsigirwe.

Responsive utilities test case

Rezesa browser yako kana kurodha pamidziyo yakasiyana kuti uedze makirasi ari pamusoro.

Inoonekwa pa...

Green checkmarks inoratidza kuti kirasi inoonekwa mune yako yazvino yekuona.

  • Phone✔ Runhare
  • Tablet✔ Tablet
  • Desktop✔ Desktop

Zvakavigwa pa...

Pano, macheki egirini anoratidza kuti kirasi yakavanzwa mune yako yazvino yekuona.

  • Phone✔ Runhare
  • Tablet✔ Tablet
  • Desktop✔ Desktop