Bootstrap

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 gözenek ulgamy 12 sany sütün

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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

  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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
4 ofset 4
3 ofset 3
3 ofset 3
8 ofset 4 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </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çinde täze .rowwe sütünler toplumyny goşuň ..span*.span*

Mysal

Öýlenen hatarlarda ene-atasynyň sütünleriniň sanyna goşýan sütünler toplumy bolmaly. Mysal üçin, iki sany .span3sütün sütüniň içinde goýulmaly .span6.

Sütüniň 1-nji derejesi
2-nji dereje
2-nji dereje 
  1. <div class = "row" > 
  2.   <div class = "span12" > 
  3.     Sütüniň 1-nji derejesi
  4.     <div class = "row" > 
  5.       <div class = "span6" > 2-nji dereje </div> 
  6.       <div class = "span6" > 2-nji dereje </div> 
  7.     </div>
  8.   </div>
  9. </div>

Suwuk gözenek ulgamy 12 sesli, göterim esasly sütünler

Suwuk sütünler

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Piksel däl-de göterimler

Suwuklyk set ulgamy kesgitlenen pikselleriň ýerine sütün giňligi üçin göterimleri ulanýar. Şeýle hem, esasy ekran çözgütleri we enjamlary üçin dogry nisbatlary üpjün edip, kesgitli gözenek ulgamymyz ýaly täsirli üýtgeýişlere eýe.

Suwuk hatarlar

.rowDiňe üýtgetmek arkaly islendik hatar suwuklygy ediň .row-fluid. Sütünler edil şol bir görnüşde galýarlar, üýtgewsiz we suwuk ýerleşişleriň arasynda süýşmegi gaty gönümel edýär.

Bellik

  1. <div class = "hatar-suwuk" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Suwuk höwürtge

Suwuk torlar bilen höwürtge birneme üýtgeşik: höwürtgelenen sütünleriň sany ene-atasyna gabat gelmeli däl. Munuň ýerine sütünleriňiz her derejä täzeden düzülýär, sebäbi her hatar esasy sütüniň 100% -ini alýar.

Suwuklyk 12
Suwuklyk 6
Suwuklyk 6 
  1. <div class = "hatar-suwuk" > 
  2.   <div class = "span12" > 
  3.     Sütüniň 1-nji derejesi
  4.     <div class = "hatar-suwuk" > 
  5.       <div class = "span6" > 2-nji dereje </div> 
  6.       <div class = "span6" > 2-nji dereje </div> 
  7.     </div>
  8.   </div>
  9. </div>

Paneli özleşdirmek

Üý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.

Layouts Web sahypalaryny döretmek üçin esasy şablonlar

Bellenen tertip

Diňe bir web sahypasy ýa-da sahypa üçin takmynan 940px giňlikdäki, merkezi tertip <div class="container">.

  1. <body>
  2.   <div class = "konteýner" > 
  3.     ...
  4.   </div>
  5. </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.

  1. <div class = "konteýner-suwuklyk" > 
  2.   <div class = "hatar-suwuk" > 
  3.     <div class = "span2" > 
  4.       <! - gapdal paneliň mazmuny ->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <! - Bedeniň mazmuny ->
  8.     </div>
  9.   </div>
  10. </div>

Jogaply dizaýn Dürli enjamlar we çözgütler üçin media soraglary

Jogap beriji enjamlar

Goldawly enjamlar

“Bootstrap”, dürli enjamlarda we ekran çözgütlerinde taslamalaryňyzy has laýyklaşdyrmak üçin bir faýlda sanlyja 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 979px-a çenli 42px 20px
Bellenen 980px we ýokary 60px 20px
Uly ekran 1210px we ýokary 70px 30px

Meta belligini talap edýär

Enjamlaryň täsirli sahypalary dogry görkezmegini üpjün etmek üçin “Viewport meta” belligini goşuň.

  1. <meta name = "viewport" mazmuny = "ini = enjamyň ini, başlangyç şkalasy = 1.0" >

Näme edýärler

Mediýa talaplary, birnäçe şertlere - gatnaşygy, ini, görkeziş görnüşi 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:

  1. Toplanan jogap wersiýasyny, bootstrap-responsive.css ulanyň
  2. @ Import "responsive.less" goşuň we Bootstrap-y täzeden düzüň
  3. Aýry-aýry faýl hökmünde responsive.less-i üýtgediň we täzeden düzüň

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.

  1.   // Peýzacape telefonlary we aşak
  2.   @media ( iň ýokary - ini : 480px ) { ... }     
  3.  
  4.   // Planşet portreti üçin peýzacape telefony
  5.   @media ( iň ýokary - ini : 768px ) { ... }     
  6.  
  7.   // Peýzacape we iş stoly üçin portret planşeti
  8.   @media ( min - ini : 768px ) we ( iň uly - ini : 980px ) { ... }        
  9.  
  10.   // Uly iş stoly
  11.   @media ( min - ini : 1200px ) { .. }