Bootstrap

Aldamioak

Bootstrap 12 zutabeko sareta, diseinu eta osagai sentikorren gainean eraikita dago.

Ezarpen globalak

HTML5 doctype behar du

Bootstrap-ek HTML5 doktypea erabiltzea eskatzen duten HTML elementu eta CSS propietate jakin batzuk erabiltzen ditu. Sar ezazu zure proiektu guztien hasieran.

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

Tipografia eta estekak

Bootstrap-ek oinarrizko bistaratzeko, tipografia eta esteka-estilo orokorrak ezartzen ditu. Zehazki, guk:

  • Kendu margingorputzean
  • 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

Estilo hauek aldamioen barruan aurki daitezke.gutxiago .

Berrezarri Normalizatu bidez

Bootstrap 2-rekin, berrezarri bloke zaharraren alde egin da Normalize.css , Nicolas Gallagher eta Jonathan Neal -en proiektu baten alde, HTML5 Boilerplate ere indartzen duena . Gure reset.less barruan Normalize-ren asko erabiltzen dugun arren , Bootstrap-erako bereziki elementu batzuk kendu ditugu.

Sare-sistema lehenetsia

Zuzeneko sarearen adibidea

Bootstrap sareta sistema lehenetsiak 12 zutabe erabiltzen ditu, 940 px zabaleko edukiontzi bat egiteko, erantzun-funtzioak gaitu gabe. CSS erantzuteko fitxategia gehituta, sareta 724 px eta 1170 px zabalera egokitzen da zure ikuspegiaren arabera. 767 pixeleko bistatik behera, zutabeak arina bihurtzen dira eta bertikalki pilatzen dira.

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

Oinarrizko sareko HTML

Bi zutabe diseinu sinple baterako, sortu a .roweta gehitu zutabe kopuru egokia .span*. Hau 12 zutabeko sareta denez, bakoitzak .span*12 zutabe horietako batzuk hartzen ditu, eta beti gehitu behar dira 12 errenkada bakoitzeko (edo gurasoen zutabe kopurua).

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

Adibide hau ikusita, .span4eta dugu .span8, guztira 12 zutabe eta errenkada osoa osatuz.

Zutabeak desplazatzea

Mugitu zutabeak eskuinera .offset*klaseak erabiliz. Klase bakoitzak zutabe baten ezkerreko marjina zutabe oso batez handitzen du. Adibidez, lau zutabetan .offset4mugitzen da..span4

4
3 desplazamendua 2
3 desplazamendua 1
3 desplazamendua 2
6 desplazamendua 3 
  1. <div class = "errenkada" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Habia-zutabeak

Zure edukia sareta lehenetsiarekin habiratzeko, gehitu zutabe berri bat .roweta multzo .span*bat lehendik dagoen .span*zutabe batean. Habiaraturiko errenkadek bere gurasoaren zutabe kopuruarekin bat egiten duten zutabe multzo bat izan behar dute.

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

Fluido-sare sistema

Fluido-sarearen adibidea

Sare-sistema fluidoak ehunekoetan erabiltzen ditu pixelen ordez zutabeen zabaleretarako. Gure sare finkoko sistemaren erantzun-gaitasun berberak ditu, pantailaren bereizmen eta gailu gakoen proportzio egokiak bermatuz.

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

Oinarrizko HTML sare fluidoa

.rowEgin edozein errenkada "fluido" -ra aldatuz .row-fluid. Zutabe-klaseak berdin mantentzen dira, sare finkoen eta fluidoen artean iraultzea erraztuz.

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

Fluidoen konpentsazioa

Sare finkoko sistemaren desplazamenduaren modu berean funtzionatzen du: gehitu .offset*edozein zutabetara horrenbeste zutaberekin konpentsatzeko.

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

Fluidoen habia

Jariakin-sareek modu ezberdinean erabiltzen dute habia: habiatutako zutabeen maila bakoitzak 12 zutabe gehitu behar ditu. Hau da, sare fluidoak zabalerak ezartzeko ehunekoak erabiltzen dituelako, ez pixelak.

Fluidoa 12
Fluidoa 6
Fluidoa 6
Fluidoa 6
Fluidoa 6 
  1. <div class = "errenkada-fluidoa" > 
  2.   <div class = "span12" > 
  3.     Fluidoa 12
  4.     <div class = "errenkada-fluidoa" > 
  5.       <div class = "span6" > 
  6.         Fluidoa 6
  7.         <div class = "errenkada-fluidoa" > 
  8.           <div class = "span6" > Fluido 6 </div> 
  9.           <div class = "span6" > Fluido 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Fluido 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Diseinuak

Diseinu finkoa

Zabalera finko arrunta (eta, aukeran, erantzulea) <div class="container">behar den bakarra eskaintzen du.

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

Jariakinaren diseinua

Sortu bi zutabeko orri arina <div class="container-fluid">eta aproposa 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 sentikorra

Erreakzio-eginbideak gaitzea

Aktibatu CSS sentikorra zure proiektuan meta-etiketa egokia eta estilo-orri osagarria <head>zure dokumentuaren barruan sartuz. Pertsonalizatu orrialdetik Bootstrap konpilatu baduzu, meta-etiketa besterik ez duzu sartu behar.

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

Buruak gora!Bootstrap-ek ez ditu lehenespenez erantzuteko funtzioak sartzen momentu honetan, dena ez baita erantzun beharrik izan. Garatzaileak eginbide hau kentzera bultzatu beharrean, behar bezala gaitzea dela uste dugu.

Bootstrap sentikorrari buruz

Gailu erreaktiboak

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
Pantaila handia 1200 px eta gehiago 70 px 30 px
Lehenetsia 980 px eta gehiago 60 px 20px
Erretratuzko tabletak 768 px eta gehiago 42 px 20px
Telefonoak tabletetara 767 px eta beherago Zutabe fluidoak, zabalera finkorik gabe
Telefonoak 480 px eta beherago Zutabe fluidoak, zabalera finkorik gabe 
  1. /* Mahaigain handia */
  2. @media ( min - zabalera : 1200px ) { ... }     
  3.  
  4. /* Tableta erretratua horizontalera eta mahaigainera */
  5. @media ( zabalera minimoa : 768 px ) eta ( zabalera maximoa : 979 px ) { ... }        
  6.  
  7. /* Telefono horizontala tableta bertikalera */
  8. @media ( gehienez - zabalera : 767 px ) { ... }     
  9.  
  10. /* Paisaia telefonoak eta behera */
  11. @media ( gehienez - zabalera : 480px ) { ... }

Erabilgarritasun-klase erreaktiboak

Mugikorrerako garapen azkarragoa lortzeko, erabili erabilgarritasun-klase hauek edukia gailuaren arabera erakusteko eta ezkutatzeko. Jarraian, eskuragarri dauden klaseen eta haien eragina multimedia-kontsulten diseinu jakin batean (gailuaren arabera etiketatuta) dago. urtean aurki daitezke responsive.less.

Klasea Telefonoak767 px eta beherago Tabletak979 px eta 768 px MahaigainakLehenetsia
.visible-phone Ikusgai
.visible-tablet Ikusgai
.visible-desktop Ikusgai
.hidden-phone Ikusgai Ikusgai
.hidden-tablet Ikusgai Ikusgai
.hidden-desktop Ikusgai Ikusgai

Noiz erabili

Erabili modu mugatuan eta saihestu gune beraren bertsio guztiz desberdinak sortzea. Horren ordez, erabili gailu bakoitzaren aurkezpena osatzeko. Erabilgarritasun erreaktiboak ez dira erabili behar taulekin, eta, beraz, ez dira onartzen.

Erabilgarritasun erreaktiboen 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