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 typography 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 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 kuruboshwe 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.

Muenzaniso

Pano makoramu maviri ane madendere .span4anoiswa mukati me .span8.

Chikamu 1 chechikamu
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

Kuisa matendere ane magidhi emvura kwakasiyana zvishoma: nhamba yemakoramu akaiswa madendere haifanire kuenderana nenhamba yevabereki yemakoramu. Pane kudaro, nhanho imwe neimwe yemakoramu akaiswa anosetwa patsva nekuti mutsara wega wega unotora 100% yekoramu yevabereki.

Fluid 12
Mvura 6
Mvura 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Chikamu 1 chechikamu
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Level 2 </div> 
  6.       <div class = "span6" > Level 2 </div> 
  7.     </ div>
  8.   </ div>
  9. </ 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
Mafoni 480px uye pasi Fluid columns, hapana hupamhi hwakagadziriswa
Mafoni kumapiritsi 767px uye pazasi Fluid columns, hapana hupamhi hwakagadziriswa
Portrait mahwendefa 768px uye pamusoro 42px 20px
Default 980px uye kumusoro 60px 20px
Kuratidzwa kukuru 1200px uye kumusoro 70px 30px 
  1. /* Mafoni emamiriro uye pasi */
  2. @media ( max - width : 480px ) { ... }     
  3.  
  4. /* Landscape foni kune mufananidzo piritsi */
  5. @media ( max - width : 767px ) { ... }     
  6.  
  7. /* Mufananidzo piritsi kune mamiriro uye desktop */
  8. @media ( min - width : 768px ) uye ( max - width : 979px ) { ... }        
  9.  
  10. /* Desktop hombe */
  11. @media ( min - width : 1200px ) { ... }

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.

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