Bootstrap

Scaffolding

Bootstrap yakavakirwa pane inopindura 12-column grid. Isu takasanganisira yakagadziriswa- uye fluid-width marongero anoenderana neiyo system.

Zvitaera zvepasi rose zveCSS reset, typography, uye zvinongedzo

Inoda HTML5 doctype

Bootstrap inoshandisa HTML zvinhu uye CSS zvivakwa zvinoda kushandiswa kweHTML5 doctype. Ita shuwa yekuisanganisira pakutanga kweese Bootstrapped peji muprojekiti yako.

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

Typography uye zvinongedzo

Mukati me scaffolding.less faira, tinoseta basic display global, typography, and link styles. Kunyanya, isu:

  • Bvisa margin pamuviri
  • 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

Reset uchishandisa Normalize

Kubva paBootstrap 2, iyo yechinyakare CSS reset yakashanduka kuita kushandisa zvinhu kubva kuNormalize.css , chirongwa chakaitwa naNicolas Gallagher chinopawo simba HTML5 Boilerplate .

Iyo itsva reset ichiri kuwanikwa mune reset.less , asi nezvinhu zvakawanda zvakabviswa nekuda kwekupfupika uye nemazvo.

Default grid system 12 makoramu ane inopindura twist

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

Iyo yakasarudzika grid system yakapihwa sechikamu cheBootstrap ndeye 940px-yakafara, 12-column grid .

Iyo ine zvakare ina inopindura misiyano yeakasiyana maturusi uye zvigadziriso: runhare, piritsi mufananidzo, tablet landscape uye madiki desktops, uye yakakura widescreen desktops.

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

Sezvinoratidzwa pano, dhizaini yekutanga inogona kugadzirwa iine "makoramu" maviri, imwe neimwe ichitora akati wandei emakoramu gumi nemaviri atakatsanangura sechikamu chegridi system yedu.


Offsetting columns

4
4 kubvisa 4
3 kukanganisa 3
3 kukanganisa 3
8 kukanganisa 4 
  1. <div kirasi = "mutsara" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </ div>

Nesting columns

Neiyo static (isina-fluid) grid system muBootstrap, nesting iri nyore. Kuti uise zvirimo zvako, ingo wedzera nyowani .rowuye seti .span*yemakoramu mukati meiyo iripo .span*column.

Muenzaniso

Mitsara yakagara inofanira kusanganisira seti yemakoramu anowedzera kusvika kunhamba yemakoramu emubereki wake. Semuenzaniso, makoramu maviri akaiswa madendere .span3anofanirwa kuiswa mukati me .span6.

Chikamu 1 chechikamu
Level 2
Level 2 
  1. <div kirasi = "mutsara" > 
  2.   <div class = "span12" > 
  3.     Chikamu 1 chechikamu
  4.     <div kirasi = "mutsara" > 
  5.       <div class = "span6" > Level 2 </div> 
  6.       <div class = "span6" > Level 2 </div> 
  7.     </ div>
  8.   </ div>
  9. </ div>

Fluid grid system 12 inopindura, muzana-yakavakirwa makoramu

Fluid columns

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

Mazana, kwete mapikiseli

Iyo fluid grid system inoshandisa mapercents kuhupamhi hwekoramu panzvimbo yemapikisi akagadziriswa. Iyo ine zvakare yakafanana inopindura misiyano seyedu yakagadziriswa gidhi system, ichiva nechokwadi chezviyero zvakafanira zvekiyi skrini yekugadzirisa uye zvishandiso.

Fluid mitsetse

Ita chero mutsara unyoro nekungochinja .rowkuita .row-fluid. Makoramu anogara akafanana, zvichiita kuti zvive nyore kutenderera pakati pezvakagadziriswa uye zvinyoro zvimiro.

Markup

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

Fluid nesting

Nesting ine fluid grids yakati siyanei: iyo nhamba yemakoramu akaiswa madendere haidi kuenderana nemubereki. Pane kudaro, makoramu ako anogadzikiswa padanho rega rega 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>

Grid customization

Variable Default value Tsanangudzo
@gridColumns 12 Nhamba yezvikamu
@gridColumnWidth 60px Kufara kwembiru imwe neimwe
@gridGutterWidth 20px Negative nzvimbo pakati pembiru

Variables in LESS

Yakavakwa muBootstrap mashoma mashoma ekugadzirisa iyo default 940px grid system, yakanyorwa pamusoro. Zvose zvakasiyana-siyana zvegridi zvakachengetwa muzvinyorwa.zvishoma.

Maitiro ekugadzirisa

Kugadzirisa grid kunoreva kushandura matatu @grid*akasiyana uye kudzorera Bootstrap. Shandura mabhidhiri egidhi mumabhii.less uye shandisa imwe yenzira ina dzakanyorwa kuunganidza . Kana uri kuwedzera mamwe makoramu, iva nechokwadi chekuwedzera CSS kune avo vari grid.less.

Kuramba uchipindura

Kugadziriswa kwegridi kunongoshanda padanho rekutanga, iyo 940px grid. Kuti uchengetedze zvinoteerera zveBootstrap, iwe zvakare uchafanirwa kugadzirisa magidhi mukupindura.less.

Marongerwo eMatemplate ekugadzira mapeji ewebhu

Fixed layout

Iyo yakasarudzika uye yakapusa 940px-yakafara, yakatarisana dhizaini yeinongoita chero webhusaiti kana peji rinopihwa neamwechete <div class="container">.

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

Fluid marongerwo

<div class="container-fluid">inopa inochinjika peji chimiro, min- uye max-upamhi, uye kuruboshwe-kuruboshwe. Yakanakira maapplication uye madoku.

  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 Media mibvunzo yeakasiyana maturusi uye zvigadziriso

Inopindura midziyo

Zvavanoita

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
Mafonifoni 480px uye pasi Fluid columns, hapana hupamhi hwakagadziriswa
Smartphones kune mahwendefa 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

Inoda meta tag

Kuti uone kuti zvishandiso zvinoratidzira mapeji anoteerera zvakanaka, sanganisira iyo yekutarisa meta tag.

  1. <meta name = "viewport" content = "width=device-width, first-scale=1.0" >

Kushandisa mibvunzo yenhau

Bootstrap haingosanganisire iyi mibvunzo midhiya, asi kunzwisisa nekuwedzera kuri nyore kwazvo uye kunoda kushomeka kuseta. Iwe une mashoma sarudzo dzekusanganisira anopindura maficha eBootstrap:

  1. Shandisa yakaunganidzwa inopindura shanduro, bootstrap-responsive.css
  2. Wedzera @import "responsive.less" uye dzokorora Bootstrap
  3. Shandura uye recompile responsive.less seimwe faira yakaparadzana

Wadii kungoisanganisira? Chokwadi kutaurirwa, hazvisi zvese zvinoda kupindurwa. Panzvimbo pekukurudzira vanogadzira kuti vabvise chimiro ichi, isu tinoona zviri nani kuti tigone kugonesa.

  1.   // Mafoni epasi uye pasi
  2.   @media ( max - width : 480px ) { ... }     
  3.  
  4.   // Landscape foni kune portrait piritsi
  5.   @media ( max - width : 767px ) { ... }     
  6.  
  7.   // Portrait piritsi kune landscape uye desktop
  8.   @media ( min - width : 768px ) uye ( max - width : 979px ) { ... }        
  9.  
  10.   // Desktop hombe
  11.   @media ( min - width : 1200px ) { ... }

Anopindura utility makirasi

Chii ivo

Nekukurumidza kusimudzira nharembozha, shandisa aya makirasi ekushandisa ekuratidza uye kuviga zvirimo nemudziyo.

Nguva yekushandisa

Shandisa pane yakaganhurwa uye dzivirira kugadzira zvakasiyana zvachose shanduro dzesaiti imwechete. Pane kudaro, zvishandise kuzadzisa mharidzo yemudziyo wega wega.

Semuenzaniso, unogona kuratidza <select>chinhu che nav pane nharembozha, asi kwete pamatafura kana desktops.

Makirasi ekutsigira

Inoratidzwa pano tafura yemakirasi atinotsigira uye maitiro awo pane yakapihwa midhiya yemubvunzo marongerwo (yakanyorwa nemudziyo). Vanogona kuwanikwa mu responsive.less.

Kirasi Mafoni480px uye pasi Mahwendefa767px uye pazasi Desktops768px uye pamusoro
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

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