Aldamioak

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

940 pixeleko sareta lehenetsia

Bootstrap-en parte gisa eskaintzen den sareta-sistema lehenetsia 940 px-ko zabalera eta 12 zutabeko sareta da .

Gainera, lau aldaera sentikor ditu hainbat gailu eta bereizmenetarako: telefonoa, tabletaren erretratua, mahai horizontala eta mahaigain txikiak eta pantaila zabaleko mahaigain handiak.

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

3 desplazamendua 3

8 desplazamendua 4

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

Zutabearen 1. maila

2. maila

<div class = "errenkada" > 
  <div class = "span12" > 
    Zutabearen 1. maila
    <div class = "errenkada" > 
      <div class = "span6" > 2. maila </div> 
      <div class = "span6" > 2. maila </div> 
    </div>
  </div>
</div>

Sarearen pertsonalizazioa

Aldakorra	Balio lehenetsia	Deskribapena
`@gridColumns`	12	Zutabe kopurua
`@gridColumnWidth`	60 px	Zutabe bakoitzaren zabalera
`@gridGutterWidth`	20px	Zutabeen arteko tarte negatiboa
`@siteWidth`	Zutabe eta kanalizazio guztien batura kalkulatua	Zutabe eta erreten kopurua zenbatzen du nahastearen zabalera `.container-fixed()`ezartzeko

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.

Diseinu finkoa

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

<gorputza>
  <div class = "edukiontzi" > 
    ...
  </div>
</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.

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

Onartutako gailuak

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

Etiketa	Diseinuaren zabalera	Zutabearen zabalera	Erretenaren zabalera
Smartphoneak	480 px eta beherago	Zutabe fluidoak, zabalera finkorik gabe
Erretratuzko tabletak	480 px eta 768 px	Zutabe fluidoak, zabalera finkorik gabe
Landscape tabletak	768 px eta 940 px	44px	20px
Lehenetsia	940 px eta gehiago	60 px	20px
Pantaila handia	1210 px eta gehiago	70 px	30 px

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 gure sareko zutabearen zabalera
Pilatu elementuak flotatu beharrean beharrezkoa den lekuan
Aldatu goiburuen eta testuaren tamaina gailuetarako egokiagoa izan dadin

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:

Erabili konpilatutako erantzuteko bertsioa, bootstrap-responsive.css
Gehitu @import "responsive.less" eta berriro konpilatu Bootstrap
Aldatu eta birkonpilatu responsive.less 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.

  // Paisaia telefonoak eta behera
  @media ( gehienez - zabalera : 480px ) { ... }     
 
  // Telefono horizontala tableta bertikalera
  @media ( gehienez - zabalera : 768 px ) { ... }     
 
  // Tableta erretratua horizontalera eta mahaigainera
  @media ( zabalera minimoa : 768 px ) eta ( zabalera maximoa : 940 px ) { ... }        
 
  // Mahaigain handia
  @media ( min - zabalera : 1200px ) { .. }