Bootstrap

Aldamioak

Bootstrap 12 zutabeko sare sentikor batean eraikita dago. Sistema horretan oinarritutako zabalera finko eta fluidoko diseinuak ere sartu ditugu.

CSS berrezarri, tipografia eta esteketarako estilo globalak

HTML5 doctype behar du

Bootstrap-ek HTML5 doktypea erabiltzea eskatzen duten HTML elementuak eta CSS propietateak erabiltzen ditu. Ziurtatu zure proiektuko Bootstrapped orrialde bakoitzaren hasieran sartzen duzula.

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

Tipografia eta estekak

Scaffolding.less fitxategiaren barruan, oinarrizko bistaratze globala, tipografia eta esteka estiloak ezartzen ditugu. Zehazki, guk:

  • Kendu gorputzaren marjina
  • Ezarri background-color: white;_body
  • Erabili @baseFontFamily, @baseFontSize, eta @baseLineHeightatributuak gure oinarri tipografiko gisa
  • Ezarri estekaren kolore globala honen bidez @linkColoreta aplikatu estekaren azpimarra bakarrik:hover

Berrezarri Normalizatu bidez

Bootstrap 2-tik aurrera, CSS berrezartze tradizionalak eboluzionatu egin du Normalize.css -eko elementuak erabiltzeko, Nicolas Gallagher - en proiektua HTML5 Boilerplate -a ere indartzen duena .

Berrezarri berria reset.less -en aurki daiteke oraindik , baina elementu asko kenduta laburtasun eta zehaztasunerako.

Sare-sistema lehenetsia , 12 zutabe, bira sentikor batekin

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

Bootstrap-en eskaintzen den sareta-sistema lehenetsiak 724 px, 940 px-ko zabaleretan errendatzen diren 12 zutabe erabiltzen ditu (lehenetsia CSS erantzunik gabe barne) eta 1170 px-ko zabaleretan. 767 pixeleko bistatik behera, zutabeak arina bihurtzen dira eta bertikalki pilatzen dira.

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

Hemen erakusten den bezala, oinarrizko diseinu bat sor daiteke bi "zutabeekin", bakoitza gure sareta-sistemaren parte gisa definitu ditugun oinarrizko 12 zutabeetako batzuk barne hartuta.


Zutabeak desplazatzea

4
4 desplazamendua 4
3 desplazamendua 3
3 desplazamendua 3
8 desplazamendua 4 
  1. <div class = "errenkada" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Habia-zutabeak

Bootstrap-eko sareta sistema estatikoarekin (ez-fluidoa), habia egitea erraza da. Zure edukia habiatzeko, gehitu zutabe berri bat .roweta multzo .span*bat lehendik dagoen .span*zutabe batean.

Adibidea

Habiaraturiko errenkadek bere gurasoaren zutabe-kopuruari gehitzen dioten zutabe multzo bat izan behar dute. Adibidez, habiaraturiko bi .span3zutabe jarri behar dira .span6.

Zutabearen 1. maila
2. maila
2. maila 
  1. <div class = "errenkada" > 
  2.   <div class = "span6" > 
  3.     1. mailako zutabea
  4.     <div class = "errenkada" > 
  5.       <div class = "span3" > 2. maila </div> 
  6.       <div class = "span3" > 2. maila </div> 
  7.     </div>
  8.   </div>
  9. </div>

Fluid grid system 12 zutabe erantzunak, ehunekoetan oinarrituta

Fluido-zutabeak

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

Ehunekoek, ez pixelak

Sare-sistema fluidoak zutabeen zabaleretarako ehunekoak erabiltzen ditu pixel finkoen ordez. Gainera, gure sare finkoko sistemaren aldaera sentikor berberak ditu, pantailaren bereizmen eta gailu gakoen proportzio egokiak bermatuz.

Fluido errenkadak

.rowEgin edozein errenkada fluidoa, besterik gabe , aldatuz .row-fluid. Zutabeak berdin mantentzen dira, oso erraza da diseinu finko eta fluidoen artean iraultzea.

Markatzea

  1. <div class = "errenkada-fluidoa" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Fluidoen habia

Sare fluidoekin habiatzea pixka bat desberdina da: habiaratu diren zutabeen kopuruak ez du zertan gurasoarekin bat etorri behar. Horren ordez, zure zutabeak maila bakoitzean berrezartzen dira, errenkada bakoitzak zutabe nagusiaren % 100 hartzen duelako.

Fluidoa 12
Fluidoa 6
Fluidoa 6 
  1. <div class = "errenkada-fluidoa" > 
  2.   <div class = "span12" > 
  3.     Zutabearen 1. maila
  4.     <div class = "errenkada-fluidoa" > 
  5.       <div class = "span6" > 2. maila </div> 
  6.       <div class = "span6" > 2. maila </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sarearen pertsonalizazioa

Aldakorra Balio lehenetsia Deskribapena
@gridColumns 12 Zutabe kopurua
@gridColumnWidth 60 px Zutabe bakoitzaren zabalera
@gridGutterWidth 20px Zutabeen arteko tarte negatiboa

Aldagaiak GUTXIAN

Bootstrap-en barneratuta, goian dokumentatutako 940px sareta sistema lehenetsia pertsonalizatzeko aldagai batzuk daude. Sareko aldagai guztiak aldagaietan gordetzen dira.gutxiago.

Nola pertsonalizatu

Sarea aldatzeak hiru @grid*aldagaiak aldatu eta Bootstrap berriro konpilatzea esan nahi du. Aldatu sareko aldagaiak aldagaietan.gutxiago eta erabili birkonpilatzeko dokumentatutako lau moduetako bat . Zutabe gehiago gehitzen ari bazara, ziurtatu CSS gehitzen duzula grid.less-ekoentzat.

Erantzuten jarraitzea

Sarearen pertsonalizazioa lehenetsitako mailan bakarrik funtzionatzen du, 940 px-ko sarean. Bootstrap-en erantzuteko alderdiak mantentzeko, sareak ere pertsonalizatu beharko dituzu responsive.less-en.

Diseinuak Web -orriak sortzeko oinarrizko txantiloiak

Diseinu finkoa

940 px-ko zabalerako diseinu lehenetsia, zentratua, ia edozein webgune edo orrialderako <div class="container">.

  1. <gorputza>
  2.   <div class = "edukiontzi" > 
  3.     ...
  4.   </div>
  5. </body>

Jariakinaren diseinua

<div class="container-fluid">orrialdearen egitura malgua, gutxieneko eta gehienezko zabalerak eta ezkerreko alboko barra bat ematen du. Aproposa da aplikazioetarako eta dokumentuetarako.

  1. <div class = "edukiontzi-fluidoa" > 
  2.   <div class = "errenkada-fluidoa" > 
  3.     <div class = "span2" > 
  4.       <!--Alboko barraren edukia-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Gorputz edukia-->
  8.     </div>
  9.   </div>
  10. </div>

Diseinu responsive Media kontsultak hainbat gailu eta ebazpenetarako

Gailu erreaktiboak

Zer egiten duten

Multimedia-kontsultek CSS pertsonalizatuak egiteko aukera ematen dute baldintza batzuen arabera (ratioak, zabalerak, pantaila motak, etab.), baina normalean min-widtheta max-width.

  • Aldatu zutabearen zabalera gure sarean
  • Pilatu elementuak flotatu beharrean beharrezkoa den lekuan
  • Aldatu goiburuen eta testuaren tamaina gailuetarako egokiagoa izan dadin

Erabili komunikabideen kontsultak arduraz eta zure mugikorreko audientziaren hasiera gisa soilik. Proiektu handiagoetarako, kontuan hartu kode-oinarri dedikatuak eta ez multimedia-kontsulten geruzak.

Onartutako gailuak

Bootstrap-ek multimedia-kontsulta batzuk onartzen ditu fitxategi bakarrean, zure proiektuak gailu eta pantaila bereizmen desberdinetan egokiagoak izan daitezen. Hona hemen sartzen dena:

Etiketa Diseinuaren zabalera Zutabearen zabalera Erretenaren zabalera
Smartphones 480 px eta beherago Zutabe fluidoak, zabalera finkorik gabe
Smartphoneetatik tabletetara 767 px eta beherago Zutabe fluidoak, zabalera finkorik gabe
Erretratuzko tabletak 768 px eta gehiago 42 px 20px
Lehenetsia 980 px eta gehiago 60 px 20px
Pantaila handia 1200 px eta gehiago 70 px 30 px

Meta-etiketa behar du

Gailuek erantzuten duten orrialdeak behar bezala bistaratzen dituztela ziurtatzeko, sartu bistaratzeko meta-etiketa.

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

Hedabideen kontsultak erabiliz

Bootstrap-ek ez ditu automatikoki barne hartzen multimedia-kontsulta hauek, baina ulertzea eta gehitzea oso erraza da eta gutxieneko konfigurazioa behar du. Bootstrap-en erantzuteko ezaugarriak sartzeko aukera batzuk dituzu:

  1. Erabili konpilatutako erantzuteko bertsioa, bootstrap-responsive.css
  2. Gehitu @import "responsive.less" eta berriro konpilatu Bootstrap
  3. Aldatu eta birkonpilatu responsive.less fitxategi bereizi gisa

Zergatik ez sartu besterik ez? Egia esan, denak ez du erantzun beharrik izan behar. Garatzaileak eginbide hau kentzera animatu beharrean, hoberena gaitzea iruditzen zaigu.

  1.   /* Paisaia telefonoak eta behera */
  2.   @media ( gehienez - zabalera : 480px ) { ... }     
  3.  
  4.   /* Telefono horizontala tableta bertikalera */
  5.   @media ( gehienez - zabalera : 767 px ) { ... }     
  6.  
  7.   /* Tableta erretratua horizontalera eta mahaigainera */
  8.   @media ( zabalera minimoa : 768 px ) eta ( zabalera maximoa : 979 px ) { ... }        
  9.  
  10.   /* Mahaigain handia */
  11.   @media ( min - zabalera : 1200px ) { ... }

Erabilgarritasun-klase erreaktiboak

Zer dira

Mugikorrerako garapen azkarragoa lortzeko, erabili oinarrizko erabilgarritasun-klase hauek edukia gailuaren arabera erakusteko eta ezkutatzeko.

Noiz erabili

Erabili modu mugatuan eta saihestu gune beraren bertsio guztiz desberdinak sortzea. Horren ordez, erabili gailu bakoitzaren aurkezpena osatzeko.

Adibidez, baliteke <select>nabigaziorako elementu bat erakustea mugikorreko diseinuetan, baina ez tabletetan edo mahaigainetan.

Laguntza eskolak

Hona hemen onartzen ditugun klaseen taula eta haien eragina multimedia kontsultaren diseinu jakin batean (gailuaren arabera etiketatuta). urtean aurki daitezke responsive.less.

Klasea Telefonoak480 px eta beherago Tabletak767 px eta beherago Mahaigainak768 px eta gehiago
.visible-phone Ikusgai
.visible-tablet Ikusgai
.visible-desktop Ikusgai
.hidden-phone Ikusgai Ikusgai
.hidden-tablet Ikusgai Ikusgai
.hidden-desktop Ikusgai Ikusgai

Proba kasua

Aldatu zure arakatzailea edo kargatu gailu ezberdinetan goiko klaseak probatzeko.

Ikusgai...

Marka berdeek adierazten dute klasea ikusgai dagoela zure uneko ikuspegian.

  • Mugikorra✔ Telefonoa
  • Tableta✔ Tableta
  • Mahaigaina✔ Mahaigaina

Ezkutatuta...

Hemen, kontrol-marka berdeek klasea zure uneko ikuspegian ezkutatuta dagoela adierazten dute.

  • Mugikorra✔ Telefonoa
  • Tableta✔ Tableta
  • Mahaigaina✔ Mahaigaina