Gaýgy

“Bootstrap” 12 sütünli setde gurulýar. Şeýle hem, şol ulgamyň esasynda kesgitli we suwuk giňlikdäki düzülişleri goşduk.

Bellenen 940px gözenek

“Bootstrap” -yň bölegi hökmünde berlen deslapky gözenek ulgamy, ini 940px, 12 sütünli gözenekdir .

Şeýle hem, dürli enjamlar we çözgütler üçin dört täsirli üýtgeşiklik bar: telefon, planşet portreti, stol peýza .y we kiçi iş stollary we uly ekranly iş stollary.

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

Bu ýerde görkezilişi ýaly, gözenek ulgamymyzyň bir bölegi hökmünde kesgitlän 12 sany sütünimiziň birnäçesini öz içine alýan iki "sütün" bilen esasy düzüliş döredilip bilner.

Sütünleri öçürmek

4 ofset 4

3 ofset 3

8 ofset 4

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

Höwürtge sütünleri

“Bootstrap” -daky statiki (suwuk däl) gözenek ulgamy bilen höwürtge aňsat. Mazmunyňyzy ýerleşdirmek üçin, bar bolan sütüniň içine täze .rowwe sütünler goşuň ..span*.span*

Mysal

Sütüniň 1-nji derejesi

2-nji dereje

<div class = "row" > 
  <div class = "span12" > 
    Sütüniň 1-nji derejesi
    <div class = "row" > 
      <div class = "span6" > 2-nji dereje </div> 
      <div class = "span6" > 2-nji dereje </div> 
    </div>
  </div>
</div>

Grid sazlamasy

Üýtgeýji	Bellenen baha	Düşündiriş
`@gridColumns`	12	Sütünleriň sany
`@gridColumnWidth`	60px	Her sütüniň ini
`@gridGutterWidth`	20px	Sütünleriň arasyndaky negatiw boşluk
`@siteWidth`	Columnhli sütünleriň we çukurlaryň hasaplanan jemi	Garyndynyň giňligini kesgitlemek üçin sütünleriň we çukurlaryň sanyny `.container-fixed()`sanap geçýär

LESS-de üýtgeýjiler

“Bootstrap” -da gurlan, ýokarda dokumentleşdirilen 940px gözenek ulgamyny sazlamak üçin az sanly üýtgeýjiler bar. Tor üçin ähli üýtgeýjiler üýtgeýjilerde saklanýar.

Nädip sazlamaly

Paneli üýtgetmek, üç @grid*üýtgeýjini üýtgetmek we Bootstrap-y täzeden düzmek diýmekdir. Tor üýtgeýjilerini üýtgeýjilerde üýtgediň we täzeden düzmek üçin resminamalaşdyrylan dört usuldan birini ulanyň . Has köp sütün goşýan bolsaňyz, grid.less-dakylar üçin CSS-i goşuň.

Jogapkärçilikli bolmak

Toruň özleşdirilmegi diňe 940px gözenek derejesinde işleýär. “Bootstrap” -yň täsirli taraplaryny saklamak üçin, gözenekleri “responsive.less” -de sazlamaly bolarsyňyz.

Bellenen tertip

Diňe bir web sahypasy ýa-da sahypasy üçin deslapky we ýönekeý 940px giňlikdäki merkezleşdirilen düzüliş <div class="container">.

<body>
  <div class = "konteýner" > 
    ...
  </div>
</body>

Suwuklyk tertibi

<div class="container-fluid">çeýe sahypa gurluşyny, iň kiçi we iň giň giňlikleri we çep tarapdaky paneli berýär. Programmalar we resminamalar üçin ajaýyp.

<div class = "konteýner-suwuklyk" > 
  <div class = "hatar-suwuk" > 
    <div class = "span2" > 
      <! - gapdal paneliň mazmuny ->
    </div>
    <div class = "span10" > 
      <! - Bedeniň mazmuny ->
    </div>
  </div>
</div>

Goldawly enjamlar

“Bootstrap” dürli enjamlarda we ekran çözgütlerinde taslamalaryňyzy has laýyklaşdyrmak üçin birnäçe media talaplaryny goldaýar. Ine, şulary öz içine alýar:

Bellik	Salgy giňligi	Sütüniň ini	Gutyň ini
Smartfonlar	480px we aşakda	Suwuk sütünler, kesgitlenen giňlikler ýok
Portret planşetleri	480px-den 768px-a çenli	Suwuk sütünler, kesgitlenen giňlikler ýok
Peýzacape planşetleri	768px-den 940px-a çenli	44px	20px
Bellenen	940px we ýokary	60px	20px
Uly ekran	1210px we ýokary	70px	30px

Näme edýärler

Mediýa talaplary, birnäçe şertlere - gatnaşyklara, ini, görkeziş görnüşine we ş.m. esasly CSS-e rugsat berýär, ýöne köplenç töweregine min-widthwe max-width.

Torumyzdaky sütüniň giňligini üýtgediň
Zerur ýerlerde ýüzmegiň ýerine elementleri ýygnaň
Enjamlar üçin has laýyk bolmagy üçin sözbaşylaryň we tekstiň ölçegini üýtgediň

Mediýa talaplaryny ulanmak

“Bootstrap” bu media talaplaryny awtomatiki öz içine almaýar, ýöne düşünmek we goşmak gaty aňsat we minimal sazlamany talap edýär. “Bootstrap” -yň täsirli aýratynlyklaryny goşmak üçin birnäçe wariantyňyz bar:

Toplanan jogap wersiýasyny, bootstrap-responsive.css ulanyň
@ Import "responsive.less" goşuň we Bootstrap-y täzeden düzüň
Aýry-aýrylykda jogap beriň

Näme üçin diňe goşmaly däl? Çynymy aýtsam, hemme zat jogap bermeli däl. Döredijileri bu aýratynlygy aýyrmaga höweslendirmegiň ýerine, ony işletmek üçin iň gowusy hasaplaýarys.

  // Peýzacape telefonlary we aşak
  @media ( iň ýokary - ini : 480px ) { ... }     
 
  // Planşet portreti üçin peýzacape telefony
  @media ( iň ýokary - ini : 768px ) { ... }     
 
  // Peýzacape we iş stoly üçin portret planşeti
  @media ( min - ini : 768px ) we ( iň uly - ini : 940px ) { ... }        
 
  // Uly iş stoly
  @media ( min - ini : 1200px ) { .. }