Aldamioak

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.

<!DOCTYPE html>
<html lang = "eu" > 
  ...
</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.

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.

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).

<div class = "errenkada" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</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

3 desplazamendua 2

3 desplazamendua 1

3 desplazamendua 2

6 desplazamendua 3

<div class = "errenkada" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</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

<div class = "errenkada" > 
  <div class = "span9" > 
    1. mailako zutabea
    <div class = "errenkada" > 
      <div class = "span6" > 2. maila </div> 
      <div class = "span3" > 2. maila </div> 
    </div>
  </div>
</div>

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.

Oinarrizko HTML sare fluidoa

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

<div class = "errenkada-fluidoa" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Fluidoen konpentsazioa

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

4 desplazamendua 4

3 desplazamendua 3

6 desplazamendua 6

<div class = "errenkada-fluidoa" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</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

Fluido 6

<div class = "errenkada-fluidoa" > 
  <div class = "span12" > 
    Fluidoa 12
    <div class = "errenkada-fluidoa" > 
      <div class = "span6" > 
        Fluido 6
        <div class = "errenkada-fluidoa" > 
          <div class = "span6" > Fluido 6 </div> 
          <div class = "span6" > Fluido 6 </div> 
        </div>
      </div>
      <div class = "span6" > Fluido 6 </div> 
    </div>
  </div>
</div>

Diseinu finkoa

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

<gorputza>
  <div class = "edukiontzi" > 
    ...
  </div>
</body>

Jariakinaren diseinua

Sortu bi zutabeko orri arina <div class="container-fluid">eta aproposa aplikazioetarako eta dokumentuetarako.

<div class = "edukiontzi-fluidoa" > 
  <div class = "errenkada-fluidoa" > 
    <div class = "span2" > 
      <!--Alboko barraren edukia-->
    </div>
    <div class = "span10" > 
      <!--Gorputz edukia-->
    </div>
  </div>
</div>

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.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
<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

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

/* Mahaigain handia */
@media ( min - zabalera : 1200px ) { ... }     
 
/* Tableta erretratua horizontalera eta mahaigainera */
@media ( zabalera minimoa : 768 px ) eta ( zabalera maximoa : 979 px ) { ... }        
 
/* Telefono horizontala tableta bertikalera */
@media ( gehienez - zabalera : 767 px ) { ... }     
 
/* Paisaia telefonoak eta behera */
@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	Ezkutuan	Ezkutuan
`.visible-tablet`	Ezkutuan	Ikusgai	Ezkutuan
`.visible-desktop`	Ezkutuan	Ezkutuan	Ikusgai
`.hidden-phone`	Ezkutuan	Ikusgai	Ikusgai
`.hidden-tablet`	Ikusgai	Ezkutuan	Ikusgai
`.hidden-desktop`	Ikusgai	Ikusgai	Ezkutuan

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, marka berdeek klasea zure uneko ikuspegian ezkutatuta dagoela adierazten dute.

Mugikorra✔ Telefonoa
Tableta✔ Tableta
Mahaigaina✔ Mahaigaina

Ezarpen globalak