Sharaxaad

Bootstrap wuxuu ku dhisan yahay shabag 12-column ah oo ka jawaabaya. Waxa kale oo aanu ku darnay qaabayn go'an iyo ballac dareere ah oo ku salaysan nidaamkaas.

940px grid ee caadiga ah

Nidaamka shabagga caadiga ah ee lagu bixiyo qayb ka mid ah Bootstrap waa 940px-ballaaran, 12-column grid .

Waxa kale oo ay leedahay afar nooc oo jawaab celin ah oo loogu talagalay qalabyo kala duwan iyo xallinta: telefoonka, sawirka tablet-ka, muuqaalka miiska iyo miisaska yaryar, iyo miisaska waaweyn ee shaashadda.

<div class = " saf" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Sida halkan ku cad, qaabayn aasaasi ah ayaa lagu abuuri karaa laba "tiir", mid kastaa wuxuu ka kooban yahay tiro ka mid ah 12 tiirar ee aasaaska ah ee aan ku qeexnay qayb ka mid ah nidaamka xuddunta.

Tiirarka dib u dejinta

4 dib u dhac 4

3 xabo 3

8 dib u dhac 4

<div class = " saf" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

Tiirarka buulka

Iyada oo la raacayo nidaamka shabagga static (aan dareere ahayn) ee ku yaala Bootstrap, buul-dhigiddu waa sahlan tahay. Si aad buulka ugu dhejiso macluumaadkaaga, kaliya ku dar tiirar cusub .rowiyo set oo ah .span*tiir dhexda tiirka jira .span*.

Tusaale

Heerka 1 ee tiirka

Heerka 2

<div class = " saf" > 
  <div class = "span12" > 
    Heerka 1 ee tiirka
    <div class = " saf" > 
      <div class = "span6" > Heerka 2 </div> 
      <div class = "span6" > Heerka 2 </div> 
    </div>
  </div>
</div>

Habaynta grid

La beddeli karo	Qiimaha caadiga ah	Sharaxaada
`@gridColumns`	12	Tirada tiirarka
`@gridColumnWidth`	60px	Ballaca tiir kasta
`@gridGutterWidth`	20px	Meel xun oo u dhaxaysa tiirarka
`@siteWidth`	Wadarta la xisaabiyay ee dhammaan tiirarka iyo majaraha	Waxay tirisaa tirada tiirarka iyo majaraha si ay u dejiso ballaca `.container-fixed()`isku darka

Kala duwanaansho yar

Lagu dhisay Bootstrap waa doorsoomayaal faro badan oo loogu talagalay habaynta nidaamka grid-ka caadiga ah ee 940px, ee kor lagu diiwaangeliyay. Dhammaan doorsoomayaasha shabkada waxa lagu kaydiyaa doorsoomayaal.less.

Sida loo habeeyo

Wax ka beddelka shabkada macneheedu waa beddelka saddexda @grid*doorsoome iyo dib-u-ururinta Bootstrap. Beddel doorsoomayaasha sharoobada doorsoomayaal.wax yar oo isticmaal mid ka mid ah afarta siyaabood ee la diiwaan galiyay si dib loo ururiyo . Haddii aad ku darayso tiirar badan, hubi inaad ku darto CSS kuwa ku jira grid.less.

Joogista ka jawaab celinta

Habaynta shabakadu waxay ka shaqeysaa kaliya heerka caadiga ah, 940px grid. Si aad u ilaaliso dhinacyada ka jawaabaya Bootstrap, waa inaad sidoo kale u habayn kartaa shabaqyada si ka jawaab celin ah.

Qaab go'an

Qaabka caadiga ah oo fudud ee 940px-ballaaran, qaabaynta xuddun u ah kaliya degel kasta ama bog uu bixiyo hal <div class="container">.

<jir>
  <div class = "konteenar" > 
    ...
  </div>
</body>

Qaabka dareeraha

<div class="container-fluid">wuxuu siinayaa qaab-dhismeedka bogga dabacsan, min- iyo ballac-xareed, iyo dhinaca bidix ee bidix. Way ku fiican tahay abka iyo dukumentiyada

<div class = "container-fluid" > 
  <div class = "dareere-dheecaan" > 
    <div class = "span2" > 
      <!--Content sidebar-->
    </div>
    <div class = "span10" > 
      <!--Qoddobka Jidhka-->
    </div>
  </div>
</div>

Qalabka la taageeray

Bootstrap waxay taageertaa sacab muggeed oo weydiimo warbaahin ah si ay kaaga caawiso inay mashaariicdaada ka dhigaan kuwo ku habboon aaladaha kala duwan iyo xallinta shaashadda. Waa kuwan waxa ku jira:

Summada	Balaadhka qaabaynta	Ballaca tiirka	Ballaca godka
Taleefanka casriga ah	480px iyo ka hooseeya	Tiirar dareere ah, ma jiro ballac go'an
Kiniinnada sawirka	480px ilaa 768px	Tiirar dareere ah, ma jiro ballac go'an
Kaniiniyada muuqaalka	768px ilaa 940px	44px	20px
Asal ahaan	940px iyo in ka badan	60px	20px
Bandhig weyn	1210px iyo in ka badan	70px	30px

Waxa ay sameeyaan

Weydiimaha warbaahintu waxay u oggolaanayaan CSS caado ah oo ku salaysan tiro shuruudo ah - saamiyo, ballaca, nooca bandhigga, iwm - laakiin badanaa waxay diiradda saaraan hareeraha min-widthiyo max-width.

Wax ka beddel ballaca tiirka ee shabaggayaga
Isku dheji walxaha halkii aad sabayn lahayd meel kasta oo lagama maarmaan ah
Wax ka beddel cinwaannada iyo qoraalka si aad ugu habboonaato aaladaha

Isticmaalka su'aalaha warbaahinta

Bootstrap si toos ah kuma jiraan weydiimahan warbaahinta, laakiin fahamka iyo ku darida iyaga aad ayay u fududahay waxayna u baahan tahay habayn yar. Waxaad haysataa dhawr ikhtiyaar oo aad ku dari karto sifooyinka ka jawaabaya Bootstrap:

Isticmaal nooca jawaabta la isku duba riday, bootstrap-responsive.css
Kudar @import "wax jawaab ah.less" oo dib u soo celi Bootstrap
Wax ka beddel oo dib u ururi jawaab celin. ka yar sida goonida ah

Maxaa loogu dari waayay? Run ahaantii, wax walba uma baahna inay noqdaan kuwo ka jawaabaya. Halkii aan ku dhiirigelin lahayn horumariyayaasha inay ka saaraan sifadan, waxaan ogaanay sida ugu wanaagsan ee aan awood u yeelan karno.

  // Taleefannada muuqaalka iyo hoos
  @media ( ugu badnaan - ballac : 480px ) { ... }     
 
  // Taleefan muuqaal ah oo loo beddelo tablet-ka sawir
  @media ( ugu badnaan - ballac : 768px ) { ... }     
 
  // Kiniin sawir leh oo ku socda muuqaalka iyo miiska
  @media ( daq - ballac : 768px ) iyo ( ugu badnaan - ballac : 940px ) { ... }        
 
  // desktop weyn
  @media ( daq - balac : 1200px ) { .. }