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.

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.

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

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

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

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.

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

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 fitxategi bakarrean, zure proiektuak gailu eta pantaila bereizmen desberdinetan egokiagoak izan daitezen. Hona hemen sartzen dena:

Meta-etiketa behar du

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

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

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

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.

  // 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 : 980 px ) { ... }        
 
  // Mahaigain handia
  @media ( min - zabalera : 1200px ) { .. }