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.

CSS täzeden düzmek, tipografiýa we baglanyşyklar üçin global stiller

HTML5 doktip görnüşini talap edýär

Bootstrap, HTML5 doktipiniň ulanylmagyny talap edýän HTML elementlerini we CSS häsiýetlerini ulanýar. Taslamaňyza “Bootstrapped” sahypasynyň başynda goşuň.

  1. <! DOKTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

Tipografiýa we baglanyşyklar

“ Scaffolding.less ” faýlynyň içinde esasy global displeýi, tipografiýany we baglanyşyk stillerini düzýäris. Has takygy, biz:

  • Bedeniň gyrasyny aýyryň
  • Gurnama background-color: white;_body
  • @baseFontFamily, @baseFontSizeWe @baseLineHeighthäsiýetleri tipografiki esas hökmünde ulanyň
  • Global baglanyşyk reňkini düzüň @linkColorwe diňe baglanyşyk çyzyklaryny ulanyň:hover

Normalize arkaly täzeden düzüň

“Bootstrap 2” -e görä, adaty CSS täzeden düzmek, Normalize.css - den elementleri ulanmak üçin ösdi, Nikolas Gallagher tarapyndan HTML5 Boilerplate -i güýçlendirýän taslama .

Täze täzeden düzmek henizem reset.less -da tapylyp bilner , ýöne gysga we takyklyk üçin köp element aýryldy.

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, planşet 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, iki sany "sütün" bilen esasy düzüliş döredilip bilner, olaryň her biri öz gözenek ulgamymyzyň bir bölegi hökmünde kesgitlän 12 esasy sütünimiziň birnäçesini öz içine alýar.


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 tor ulgamy 12 jogap beriji, göterime esaslanýan 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

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 sahypasy üçin deslapky we ýönekeý 940px giňlikdäki merkezleşdirilen düzüliş <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

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 soraglaryny jogapkärçilikli we diňe ykjam diňleýjileriňiz üçin başlangyç hökmünde ulanyň. Has uly taslamalar üçin, media talaplarynyň gatlaklaryny däl-de, aýratyn kod esaslaryny göz öňünde tutuň.

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
Planşetlere smartfonlar 767px we aşakda Suwuk sütünler, kesgitlenen giňlikler ýok
Portret planşetleri 768px we ondan ýokary 42px 20px
Bellenen 980px we ýokary 60px 20px
Uly ekran 1200px we ondan ý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" >

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ň uly - ini : 767px ) { ... }     
  6.  
  7.   // Peýzacape we iş stoly üçin portret planşeti
  8.   @media ( min - ini : 768px ) we ( iň uly - ini : 979px ) { ... }        
  9.  
  10.   // Uly iş stoly
  11.   @media ( min - ini : 1200px ) { ... }

Jogapkärçilikli peýdaly sapaklar

Olar näme?

Jübi telefonyny has çalt ösdürmek üçin mazmuny görkezmek we enjam arkaly gizlemek üçin bu esasy peýdaly sapaklary ulanyň.

Haçan ulanmaly

Çäkli esasda ulanyň we şol bir sahypanyň düýbünden başga wersiýalaryny döretmekden saklanyň. Munuň ýerine, her enjamyň görkezişini doldurmak üçin ulanyň.

Mysal üçin, <select>planşetlerde ýa-da iş stollarynda däl-de, ykjam ýerleşişlerde nav üçin element görkezip bilersiňiz.

Goldaw sapaklary

Bu ýerde goldaw berýän sapaklarymyzyň tablisasy we berlen media talaplarynyň ýerleşişine (enjam bilen bellik edilen) görkezilýär. Olary tapyp bilersiňiz responsive.less.

Synp Telefon480px we aşakda Planşetler767px we aşakda Iş stollary768px we ondan ýokary
.visible-phone Görünýän
.visible-tablet Görünýän
.visible-desktop Görünýän
.hidden-phone Görünýän Görünýän
.hidden-tablet Görünýän Görünýän
.hidden-desktop Görünýän Görünýän

Synag

Aboveokardaky synplary barlamak üçin brauzeriňiziň ölçegini üýtgediň ýa-da dürli enjamlara ýükläň.

Görünýän ...

Greenaşyl bellikler synpyň häzirki görnüşiňizde görünýändigini görkezýär.

  • Telefon✔ Telefon
  • Planşet✔ Planşet
  • Iş stoly✔ Iş stoly

Gizlenen ...

Bu ýerde, ýaşyl bellikler synpyň häzirki görnüşiňizde gizlenendigini görkezýär.

  • Telefon✔ Telefon
  • Planşet✔ Planşet
  • Iş stoly✔ Iş stoly