Gämi duralgasy · Bootstrap Türkmen dilinde

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

Bootstrap, HTML5 doktipiniň ulanylmagyny talap edýän käbir HTML elementlerini we CSS häsiýetlerini ulanýar. Allhli taslamalaryňyzyň başynda goşuň.

<! DOKTYPE html>
<html lang = "en" > 
  ...
</html>

Tipografiýa we baglanyşyklar

“Bootstrap” esasy global displeýi, tipografiýany we baglanyşyk stillerini düzýär. Has takygy, biz:

marginBedeni aýyryň
Gurnama background-color: white;_body
@baseFontFamily, @baseFontSizeWe @baseLineHeighthäsiýetleri tipografiki bazamyz hökmünde ulanyň
Linkhliumumy baglanyşyk reňkini düzüň @linkColorwe diňe baglanyşyk setirlerini ulanyň:hover

Bu stilleri scaffolding.less -den tapyp bilersiňiz .

Normalize arkaly täzeden düzüň

“Bootstrap 2” bilen köne täzeden düzülen blok , “ HTML5 Boilerplate ” -ni güýçlendirýän Nikolas Gallagher we Jonatan Nealyň “ Normalize.css ” -iň peýdasyna taşlandy . “ Reset.less ” -iň içinde “Normalize” -iň köpüsini ulanýan wagtymyz, “Bootstrap” üçin käbir elementleri aýyrdyk.

Göni gözenegiň mysaly

Adaty Bootstrap gözenek ulgamy , 12 sütünden peýdalanýar we täsirli aýratynlyklary açyk bolmazdan 940px giňlikdäki konteýner ýasaýar . Duýgur CSS faýly goşulanda, gözenegiňize baglylykda gözenek 724px we ini 1170px bolýar. 767px görnüş görnüşleriniň aşagynda sütünler suwuk bolýar we dikligine saklanýar.

Esasy gözenek HTML

Twoönekeý iki sütün düzülişi üçin a dörediň .rowwe degişli .span*sütün goşuň. Bu 12 sütünli gözenek bolansoň, hersi .span*şol 12 sütüniň bir bölegini öz içine alýar we her hatar üçin elmydama 12-e çenli goşmaly (ýa-da ene-atadaky sütünleriň sany).

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

Bu mysaly göz öňünde tutup, .span4jemi .span812 sütün we doly hatar düzýäris.

Sütünleri öçürmek

Sütünleri ulanyp sütünleri saga geçiriň .offset*. Her synp sütüniň çep gyrasyny tutuş sütün bilen ýokarlandyrýar. Mysal üçin, dört sütüniň üstünden .offset4geçýär ..span4

3 ofset 2

3 ofset 1

3 ofset 2

6 ofset 3

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

Höwürtge sütünleri

Mazmunyňyzy deslapky gözenek bilen ýerleşdirmek üçin, bar bolan sütüniň içine täze .rowwe sütünler goşuň . Öýlenen hatarlarda ene-atasynyň sütünleriniň sanyny goşýan sütünler toplumy bolmaly..span*.span*

1-nji dereje sütüni

2-nji dereje

<div class = "row" > 
  <div class = "span9" > 
    1-nji dereje sütüni
    <div class = "row" > 
      <div class = "span6" > 2-nji dereje </div> 
      <div class = "span3" > 2-nji dereje </div> 
    </div>
  </div>
</div>

Göni suwuk gözenegiň mysaly

Suwuklyk set ulgamy sütün giňligi üçin pikseliň ýerine göterimleri ulanýar. Esasy ekran çözgütleri we enjamlary üçin dogry nisbatlary üpjün edip, kesgitli gözenek ulgamymyz bilen deň derejede täsirli mümkinçiliklere eýe.

Esasy suwuklyk HTML

Üýtgedip, islendik hatary "suwuk" .rowediň .row-fluid. Sütün synplary takyk we suwuk torlaryň arasynda aýlanmagy aňsatlaşdyrýar.

<div class = "hatar-suwuk" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Suwuklygyň öçürilmegi

Kesgitli gözenek ulgamynyň öçürilmegi bilen birmeňzeş işleýär: .offset*köp sütüniň öwezini dolmak üçin islendik sütüne goşuň.

4 ofset 4

3 ofset 3

6 ofset 6

<div class = "hatar-suwuk" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

Suwuk höwürtge

Suwuk torlar höwürtgeleri başgaça ulanýarlar: sütünleriň her bir derejesi 12 sütüne çenli goşmalydyr. Sebäbi suwuk tor giňlikleri kesgitlemek üçin piksel däl-de göterimleri ulanýar.

Suwuklyk 12

Suwuklyk 6

<div class = "hatar-suwuk" > 
  <div class = "span12" > 
    Suwuklyk 12
    <div class = "hatar-suwuk" > 
      <div class = "span6" > 
        Suwuklyk 6
        <div class = "hatar-suwuk" > 
          <div class = "span6" > Suwuklyk 6 </div> 
          <div class = "span6" > Suwuklyk 6 </div> 
        </div>
      </div>
      <div class = "span6" > Suwuklyk 6 </div> 
    </div>
  </div>
</div>

Bellenen tertip

<div class="container">Diňe zerur bolan umumy kesgitlenen giňlik (we islege görä jogap beriji) tertibi üpjün edýär .

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

Suwuklyk tertibi

<div class="container-fluid">Programmalar we resminamalar üçin ajaýyp suwuk, iki sütünli sahypa dörediň .

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

Duýgur aýratynlyklary açmak

<head>Taslamanyňyza degişli meta belligini we resminamanyňyzyň içindäki goşmaça stil tablisasyny goşup, taslamaňyzda täsirli CSS-i açyň . “Bootstrap” -y “Customize” sahypasyndan düzen bolsaňyz, diňe meta belligini goşmaly.

<meta name = "viewport" mazmuny = "ini = enjamyň ini, başlangyç şkalasy = 1.0" >  
<link href = "aktiwler / css / bootstrap-responsive.css" rel = "stil sahypasy" >

Başlar!“Bootstrap” bu wagt deslapky görnüşde duýgur aýratynlyklary öz içine almaýar, sebäbi hemme zat jogap bermeli däl. Döredijileri bu aýratynlygy aýyrmaga höweslendirmegiň ýerine, zerur bolanda ony işletmek üçin iň gowusy hasaplaýarys.

Duýgur Bootstrap hakda

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

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

Jogapkärçilikli peýdaly sapaklar

Jübi telefonyny has çalt ösdürmek üçin mazmuny görkezmek we enjam arkaly gizlemek üçin bu peýdaly sapaklary ulanyň. Aşakda elýeterli synplaryň tablisasy we berlen media talaplarynyň ýerleşişine täsiri (enjam bilen bellik edilýär). Olary tapyp bilersiňiz responsive.less.

Synp	Telefon767px we aşakda	Planşetler979px-den 768px-a çenli	Iş stollaryBellenen
`.visible-phone`	Görünýän	Gizlenen	Gizlenen
`.visible-tablet`	Gizlenen	Görünýän	Gizlenen
`.visible-desktop`	Gizlenen	Gizlenen	Görünýän
`.hidden-phone`	Gizlenen	Görünýän	Görünýän
`.hidden-tablet`	Görünýän	Gizlenen	Görünýän
`.hidden-desktop`	Görünýän	Görünýän	Gizlenen

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ň. Jogapkärçilikli kömekçi enjamlar tablisalar bilen ulanylmaly däldir we şonuň üçin goldanylmaýar.

Jogapkärçilikli kömekçi 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

Gaýgy

Global sazlamalar