CSS-ni gyzdyryň

Iň çalt we aňsat başlangyç üçin bu parçany web sahypaňyza göçüriň.

Has az ulanyň

Az ulanmagyň muşdagy? Mesele ýok, diňe repony klonlaň we şu setirleri goşuň:

GitHub-da çeňňek

Github-daky resmi Bootstrap repo bilen göçürip alyň, vilka, çekiň, faýl meselelerini we ş.m.

Taryh

Twitteriň ilkinji günlerinde inersenerler öňdäki talaplary kanagatlandyrmak üçin tanyş kitaphanalaryny diýen ýaly ulanýardylar. “Bootstrap”, “Twitter” -iň ilkinji “Hackweek” döwründe ýüze çykan kynçylyklara jogap hökmünde başlandy we ösüş çaltlaşdy.

Twitterdäki köp inerseneriň kömegi we pikirleri bilen Bootstrap diňe bir esasy stilleri däl, eýsem has owadan we çydamly öňdäki dizaýn nagyşlaryny hem öz içine alýar.

Dev.twitter.com sahypasynda has giňişleýin oka

Brauzer goldawy

Bootstrap, Chrome, Safari, Internet Explorer we Firefox ýaly häzirki zaman brauzerlerinde synagdan geçirilýär we goldanýar.

Iň soňky Safari
Iň soňky Google Chrome
Firefox 4+
Internet Explorer 7+

Näme girýär

“Bootstrap” düzülen CSS, düzülmedik we mysal şablonlary bilen doly.

Originalhli asyl .less faýllar
Doly düzülen we kiçeldilen CSS
Styleguide resminamalarynyň doly
Mysal sahypasynyň şablony (ýakyn wagtda has köp)

Bellenen gözenek

“Bootstrap” -yň bölegi hökmünde berlen deslapky gözenek ulgamy, 9 sütünli 16 sütünli gözenekdir. Bu meşhur 960 gözenek ulgamynyň tagamy, ýöne çep we sag taraplarda goşmaça margin / padding ýok.

Mysal üçin gözenegiň belligi

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 16 sany sütünimiziň birnäçesini öz içine alýar. Has köp üýtgeşiklik üçin aşakdaky mysallara serediň.

<div class = "row">
  <div class = "span6 süün" >   
    ...
  </div>
  <div class = "span10 süün" >   
    ...
  </div>
</div>

Sütünleri öçürmek

8 ofset 4

4 ofset 4

5 ofset 3

10 ofset 6

Bellenen tertip

Diňe islendik sahypa ýa-da sahypa üçin 940px giň, merkezleşdirilen konteýner ýerleşişi.

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

Suwuklyk tertibi

Çeýe suwuk ýa-da iň kiçi we iň giň giňlikli we çep tarapdaky çyzykly sahypa gurluşy. Programmalar üçin ajaýyp.

<body>
  <div class = "konteýner-suwuklyk" > 
    <div class = "gapdal paneli" > 
      ...
    </div>
    <div class = "mazmun" > 
      ...
    </div>
  </div>
</body>

Sözbaşylar we göçürme

Web sahypalaryňyzy düzmek üçin adaty tipografiki iýerarhiýa.

h1. 1-nji sözbaşy

h2. 2-nji sözbaşy

h3. 3-nji sözbaşy

h4. 4-nji sözbaşy

h5. 5-nji sözbaşy

h6. 6-njy sözbaşy

Mysal abzasy

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur gülkünç mus. Nullam id dolor id nibh ultricies ulag serişdesi.

Mysal sözbaşysynyň kiçi sözbaşy bar ...

Dürli. elementleri

Üns bermek, salgylar we gysgaltmalar ulanmak

<strong> <em> <address> <abbr>

Haçan ulanmaly

Sözüň ýa-da söz düzüminiň töweregindäki göçürmesine goşmaça ähmiýetini ýa-da ähmiýetini görkezmek üçin bellikler ( <strong>we <em>) ulanylmaly. <strong>Möhümlik we stres ünsi <em>üçin ulanyň .

Abzasda ünsi çekmek

Fusce dapibus , tellus ac cursus commodo , gynama mauris condimentum nibh , fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.

Bellik: HTML5- de ulanmak <b>we <i>bellik etmek henizem dogry, ýöne olar indi özboluşly stil bilen gelenok. <b>goşmaça ses bermezden sözleri ýa-da sözlemleri tapawutlandyrmak üçin niýetlenendir, şol bir wagtyň özünde <i>ses, tehniki adalgalar we ş.m.

Salgylar

Bu <address>element iň ýakyn atasy ýa-da tutuş iş üçin aragatnaşyk maglumatlary üçin ulanylýar. Görnüşi:

Twitter, Inc.
795 Folsom şaýoly, Suite 600
San-Fransisko, CA 94107
P: (123) 456-7890

Bellik: Mazmuny dogry düzmek üçin her setir <address>çyzyk-arakesme ( <br />) bilen gutarmaly ýa-da blok derejeli bellik bilen örtülmeli (meselem ).<p>

Gysgaltmalar

Gysgaltmalar we gysgaltmalar üçin <abbr>belligi ulanyň ( HTML5<acronym> -de köne ). Stenografiýa görnüşini belligiň içine goýuň we doly adyň adyny belläň.

Bloknotlar

<blockquote> <p> <small>

Nädip sitata bermeli

Bloknoty goşmak üçin, gaplaň <blockquote>we <p>bellikler <small>. <small>Çeşmäňizi görkezmek üçin elementi ulanyň we —ondan öň em çyzgysyny alarsyňyz.

“Lorem ipsum dolor” amet, “consectetur adipiscing elit”. “Integer posuere” ante venenatis dapibus posuere velit aliketini ýok edýär.
Dr. Julius Hibbert

Sanawlar

Tertibi`<ul>`

Lorem ipsum dolor amet otur
Consectetur adipiscing elit
Massa-da bitewi molestie lorem
Pretium nisl aliketinde ýeňilleşdirme
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat
Faucibus porta lacus fringilla vel
Ene oturylyşygy
Porttitor loremini alyň

Düzedilmedik`<ul.unstyled>`

Lorem ipsum dolor amet otur
Consectetur adipiscing elit
Massa-da bitewi molestie lorem
Pretium nisl aliketinde ýeňilleşdirme
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat
Faucibus porta lacus fringilla vel
Ene oturylyşygy
Porttitor loremini alyň

Sargyt edildi`<ol>`

Lorem ipsum dolor amet otur
Consectetur adipiscing elit
Massa-da bitewi molestie lorem
Pretium nisl aliketinde ýeňilleşdirme
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Ene oturylyşygy
Porttitor loremini alyň

Düşündiriş`dl`

Düşündiriş sanawlary: Düşündiriş sanawy terminleri kesgitlemek üçin ajaýyp.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit metus-da mi porta gravida.
Malesuada porta: Etiam porta sem maleuada magna mollis euismod.

Stol gurmak

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Stollar gaty gowy - köp zat üçin. Ajaýyp tablisalar peýdaly, göwrümli we okalýan (kod derejesinde) bolmagy üçin birneme bellik söýgüsine mätäç. Ine kömek etmek üçin birnäçe maslahat.

Sütün sözbaşylaryňyzy elmydama <thead>iýerarhiýa <thead>>> bilen <tr>örtüň <th>.

Sütün sözbaşylaryna meňzeşlik bilen, stoluňyzyň ähli mazmuny <tbody>iýerarhiýaňyz <tbody>>> <tr>bolmaly <td>.

Mysal: Bellenen tablisanyň stilleri

Tableshli tablisalar okalmagyny üpjün etmek we gurluşy saklamak üçin diňe zerur serhetler bilen awtomatiki usulda düzüler. Goşmaça synplary ýa-da häsiýetleri goşmagyň zerurlygy ýok.

#	Ady	Familiýasy	Dil
1	Käbirleri	Biri	Iňlis
2	Joe	Alty gap	Iňlis
3	Stu	Diş	Kod

<table class = "umumy-tablisa"> class = "umumy tablisa" >
  ...
</table>

Mysal: Zebra zolakly

Zebra zolaklaryny goşup, stollaryňyz bilen azajyk gyzyklanyň - .zebra-stripedsynpy goşuň.

#	Ady	Familiýasy	Dil
1	Käbirleri	Biri	Iňlis
2	Joe	Alty gap	Iňlis
3	Stu	Diş	Kod

Bellik: Zebra-zolak, IE8 we aşakdaky ýaly köne brauzerler üçin elýeterli däl ösüş.

<table class = "umumy stol zebra-zolakly"> class = "umumy stol zebra zolakly" >
...
</table>

Mysal: Zebra zolakly w / TableSorter.js

Öňki mysaly alyp, jQuery we Tablesorter plugin arkaly tertipleşdirmek funksiýasyny üpjün edip, tablisalarymyzyň peýdalylygyny ýokarlandyrýarys . Görnüşini üýtgetmek üçin islendik sütüniň sözbaşysyna basyň.

#	Ady	Familiýasy	Dil
1	Siziňki	Biri	Iňlis
2	Joe	Alty gap	Iňlis
3	Stu	Diş	Kod

<script src = "js / jquery / jquery.tablesorter.min.js"> </script> src = "js / jquery / jquery.tablesorter.min.js" > </script>
<script > 
  $ ( funksiýa () { 
    $ ( "tablisa # sortTableExample" ). tablisaçy ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "umumy stol zebra-zolakly" > 
  ...
</table>

Bellenen topbar

Bu näme

Topokarky panelimiz, web sahypasynyň nyşanyny ýa-da adyny, esasy nawigasiýa we gözleg görnüşini öz içine alýan kesgitli çyzgydyr.

Özbaşdak düzülip bilner

Içindäki ähli elementler we tutuş ýokarky paneli hökmany däl. Logotip / at, nav, gözleg we ikinji derejeli deňiz ýa-da şolaryň islendik görnüşini goşup bilersiňiz.

Açylýan ýerler

Esasy nawigasiýanyň bir bölegi hökmünde, deňiz flotuňyza aşak gaçmalar goşmak mümkinçiligini goşduk. Munuň nähili edilendigini görmek üçin ýokardaky ikinji derejeli deňiz (sag deňleşdirilen) barlaň.

Salgylar we dermanlar

A bilen ýönekeý ikinji nawigasiýa dörediň <ul>. Degişli synpy goşup, tablisalaryň ýa-da dermanlaryň arasynda çalşyň.

Hasabymyzyň sazlamalary sahypalary we mazmun ýaly sahypalaryň arasynda üýtgetmek üçin ulanyjy wagtlary ýaly mazmunyň kiçi bölümleri üçin ajaýyp. Salgylanan ýa-da tabletka görnüşlerinde bar.

<ul class = "tabs"> class = "tabs" >
  <li class = "işjeň" > <a href = "#"> Baş sahypa </a> </li>  
  <li> <a href = "#"> Profil </a> </li> 
  <li> <a href = "#"> Habarlar </a> </li> 
  <li> <a href = "#"> Sazlamalar </a> </li> 
  <li> <a href = "#"> Aragatnaşyk </a> </li> 
</ul>

<ul class = "tabletkalar"> synp = "dermanlar" >
  <li class = "işjeň" > <a href = "#"> Baş sahypa </a> </li>  
  <li> <a href = "#"> Profil </a> </li> 
  <li> <a href = "#"> Habarlar </a> </li> 
  <li> <a href = "#"> Sazlamalar </a> </li> 
  <li> <a href = "#"> Aragatnaşyk </a> </li> 
</ul>

Sahypa

Ultra ýönekeý we minimal görnüşli Rdio tarapyndan ylhamlanan sahypa. Uly bloky sypdyrmak kyn, aňsatlyk bilen ulalýar we uly basmak meýdançalaryny üpjün edýär.

<div class = "sahypa" synp = "sahypa "
  <ul>
    <li class = "öňki ýapyk" > <a href = "#"> & larr; Öňki </a> </li>  
    <li class = "işjeň" > <a href = "#"> 1 </a> </li>  
    <li> <a href = "#"> 2 </a> </li> 
    <li> <a href = "#"> 3 </a> </li> 
    <li> <a href = "#"> 4 </a> </li> 
    <li> <a href = "#"> 5 </a> </li> 
    <li class = "next" > <a href = "#"> Indiki & rarr; </a> </li>  
  </ul>
</div>

Esasy duýduryşlar

Hereketiň şowsuzlygyny, bolup biläýjek şowsuzlygyny ýa-da üstünligini görkezmek üçin bir setirli habarlar. Esasanam formalar üçin peýdaly.

Aý, gysga! Muny we muny üýtgediň we gaýtadan synanyşyň.

Mukaddes gaukamole! Iň gowusy özüňizi barlaň, gaty gowy görünmeýärsiňiz.

Berekella! Bu duýduryş habaryny üstünlikli okadyňyz.

Başlar! Bu siziň ünsüňize mätäç duýduryş, ýöne entek gaty möhüm mesele däl.

Habarlary blokirläň

Biraz düşündiriş talap edýän habarlar üçin abzas stili duýduryşlary bar. Bular has uzyn säwlik habarlaryny köpeltmek, ulanyja garaşylýan hereket barada duýduryş bermek ýa-da sahypada has köp ünsi çekmek üçin maglumat hödürlemek üçin ajaýyp.

Aý, gysga! Erroralňyşlyk boldy!Muny we muny üýtgediň we gaýtadan synanyşyň. Duis mollis, täjir däl luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus amet fermentum oturýar.

Bu çäräni görüň Ora-da muny et

Mukaddes gaukamole! Bu duýduryş!Iň gowusy özüňizi barlaň, gaty gowy görünmeýärsiňiz. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur we ş.m.

Bu çäräni görüň Ora-da muny et

Berekella!Bu duýduryş habaryny üstünlikli okadyňyz. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur gülkünç mus. Maecenas faucibus mollis interdum.

Bu çäräni görüň Ora-da muny et

Başlar!Bu siziň ünsüňize mätäç duýduryş, ýöne entek gaty möhüm mesele däl.

Bu çäräni görüň Ora-da muny et

Modallar

Modallar - gepleşikler ýa-da çyralar, fon kontekstiniň saklanmagy möhüm bolan ýagdaýlarda kontekstdäki hereketler üçin ajaýyp.

Gural maslahatlary

Twipsies, bulaşyk ulanyja kömek etmek we dogry ugra gönükdirmek üçin gaty peýdaly.

Lorem ipsum dolar sit amet illo ýalňyşlyk “Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo”, “voluptas quia odit fugit accusantium totam totam” arhitektura ekspluatasiýasy “fugit fugit”, “totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas ”

aşakda!

dogry!

çep!

ýokarda!

Popovers

Sahypa düzülişine täsir etmezden, subtekstual maglumatlary bermek üçin açylanlary ulanyň.

“Bootstrap” , has çalt we aňsat web ösüşi üçin CSS deslapky prosessor “ Less ” bilen bilelikde ulanyljak açyk çeşmeli garyndylar we üýtgeýänler bolan “Preboot” bilen guruldy.

“Bootstrap” -da “Preboot” -y nädip ulanandygymyzy we indiki taslamaňyzda “Az” işlemegi saýlasaňyz, ony nädip ulanyp boljakdygyny barlaň.

Nädip ulanmaly

“Bootstrap” -yň az üýtgeýänlerini, garyndylaryny we brauzeriňizdäki javascript arkaly CSS-de höwürtgeleri doly ulanmak üçin bu opsiýany ulanyň.

<link rel = "stil sahypasy / az" href = "az / bootstrap.less" media = "hemmesi" /> rel = "stil sahypasy / az" href = "az / bootstrap.less" media = "hemmesi" />   
<script src = "js / less-1.0.41.min.js" > </script>

.Js çözgüdini duýmaýarsyňyzmy? Kodyňyzy ýerleşdireniňizde düzmek üçin “Az Mac” programmasyny synap görüň ýa-da “Node.js” -i ulanyň .

Näme girýär

“Bootstrap” -yň bir bölegi hökmünde “Twitter Bootstrap” -a girizilen zatlaryň esasy pursatlary. Has giňişleýin göçürip almak we öwrenmek üçin Bootstrap web sahypasyna ýa-da Github taslama sahypasyna giriň.

Reňk üýtgeýjileri

“Less” -däki üýtgeýjiler, CSS kelläňizi mugt saklamak we täzelemek üçin ajaýyp. Reňk bahasyny ýa-da ýygy-ýygydan ulanylýan bahany üýtgetmek isleseňiz, ony bir ýerde täzeläň we düzüldi.

// Salgylar
@linkColor : # 8b59c2;         
@linkColorHover :     garaňky ( @linkColor , 10 ); 
// Çal reňk
@black : # 000;             
@grayDark :           ýeňilleşdir ( @black , 25 %); 
@gray :               ýeňilleşdir ( @black , 50 %); 
@grayLight :          ýeňilleşdiriň ( @black , 70 %); 
@grayLighter :        ýeňilleşdiriň ( @black , 90 %); 
@ ak : #fff ;             
// Accent reňkleri
@blue : # 08b5fb;              
@green : # 46a546;             
@red : # 9d261d;               
@yellow : # ffc40d;            
@orange : # f89406;            
@pink : # c3325f;              
@purple : # 7a43b6;            
// Esasy
@baseline : 20px ;

Teswir ýazmak

/* ... */Az, CSS-iň adaty sintaksisine goşmaça teswir ýazmagyň başga bir görnüşini hödürleýär .

// Bu teswir
/ * Bu hem teswir * /

Wazony garyşdyryň

Miksinler, esasan, CSS üçin bir bölegi öz içine alýar ýa-da bölekler bolup, kod koduny bir ýere jemlemäge mümkinçilik berýär. Satyjy prefiksirlenen häsiýetler box-shadow, brauzer gradiýentleri, şrift ýazgylary we başgalar üçin ajaýyp. Aşakda “Bootstrap” -a goşulan garyndylaryň nusgasy.

Şrift ýazgylary

#font {
  . stenografiýa ( @ agram : adaty , @size : 14px , @lineHeight : 20px ) {     
    şrift - ululygy : @size ; 
    şrift - agram : @ agram ; 
    setir - beýiklik : @lineHeight ; 
  }
  . sans - serif ( @ agram : adaty , @size : 14px , @lineHeight : 20px ) {     
    şrift - maşgala : "Helvetica Neue" , Helvetica , Arial , sans - serif ;   
    şrift - ululygy : @size ; 
    şrift - agram : @ agram ; 
    setir - beýiklik : @lineHeight ; 
  }
  . serif ( @ agram : adaty , @size : 14px , @lineHeight : 20px ) {     
    şrift - maşgala : "Jorjiýa" , Times New Roman , Times , sans - serif ;     
    şrift - ululygy : @size ; 
    şrift - agram : @ agram ; 
    setir - beýiklik : @lineHeight ; 
  }
  . monospace ( @ agram : normal , @size : 12px , @lineHeight : 20px ) {     
    şrift - maşgala : "Monako" , Courier New , monospace ;   
    şrift - ululygy : @size ; 
    şrift - agram : @ agram ; 
    setir - beýiklik : @lineHeight ; 
  }
}

Gradiýentler

# gradient {
  . keseligine ( @startColor : # 555, @endColor: # 333) { 
    fon - reňk : @endColor ; 
    fon - gaýtalamak : gaýtalamak - x ;
    fon - surat : - khtml - gradient ( çyzykly , çep ýokarky , sag ýokarky , ( @startColor ) -dan ( @endColor ) çenli ; // Konqueror   
    fon - surat : - moz - çyzykly - gradient ( çep , @startColor , @endColor ); // FF 3.6+    
    fon - surat : - ms - çyzykly - gradient ( çep , @startColor , @endColor ); // IE10    
    fon - surat : - webkit - gradient ( çyzykly , çep ýokarky , sag ýokarky , reňk - stop ( 0 %, @startColor ), reňk - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    fon - surat : - webkit - çyzykly - gradient ( çep , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    fon - surat : - o - çyzykly - gradient ( çep , @startColor , @endColor ); // Opera 11.10    
    - ms - süzgüç : % ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 1)" , @startColor , @endColor ); // IE8 +  
    süzgüç : e (% ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 1)" , @startColor , @endColor )); // IE6 & IE7 
    fon - surat : çyzykly - gradient ( çep , @startColor , @endColor ); // Le standart   
  }
  . dik ( @startColor : # 555, @endColor: # 333) { 
    fon - reňk : @endColor ; 
    fon - gaýtalamak : gaýtalamak - x ;
    fon - surat : - khtml - gradient ( çyzykly , çep ýokarky , çep aşaky , ( @startColor ) -dan ( @endColor ) çenli ; // Konqueror   
    fon - surat : - moz - çyzykly - gradient ( @startColor , @endColor ); // FF 3.6+   
    fon - surat : - ms - çyzykly - gradient ( @startColor , @endColor ); // IE10   
    fon - surat : - webkit - gradient ( çyzykly , çep ýokarky , çep aşaky , reňk - stop ( 0 %, @startColor ), reňk - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    fon - surat : - webkit - çyzykly - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    fon - surat : - o - çyzykly - gradient ( @startColor , @endColor ); // Opera 11.10   
    - ms - süzgüç : % ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 0)" , @startColor , @endColor ); // IE8 +  
    süzgüç : e (% ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 0)" , @startColor , @endColor )); // IE6 & IE7 
    fon - surat : çyzykly - gradient ( @startColor , @endColor ); // Standart  
  }
  . ugrukdyryjy ( @startColor : # 555, @endColor: # 333, @deg: 45deg) { 
    ...
  }
  . dik - üç - reňk ( @start Reňk : # 00b3ee, @mid Reňk: # 7a43b6, @ ReňkStop: 0.5, @endColor: # c3325f) { 
    ...
  }
}

Amallar we gözenek ulgamy

Aşakdaky ýaly çeýe we güýçli garyndylary döretmek üçin hyýaly boluň we matematika ýerine ýetiriň.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Grid ulgamy
. konteýner {
  ini : @siteWidth ; 
  margin : 0 awto ;  
  . Clearfix ();
}
. sütünler ( @columnSpan : 1 ) {  
  görkezmek : setir ; 
  ýüzmek : çep ;
  ini : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  margin - çep : @gridGutterWidth ; 
  &: ç ç aga {
    margin - çep : 0 ; 
  }
}
. ofset ( @columnOffset : 1 ) {  
  margin -ç ep : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 ))! m ö h ü m ;         
}

Bootstrap

“Bootstrap”, “Twitter” -den

CSS-ni gyzdyryň

Has az ulanyň

GitHub-da çeňňek

Bootstrap hakda gysgaça taryh, brauzer goldawy we ş.m.

Taryh

Brauzer goldawy

Näme girýär

Grid ulgamy 940px standarty daşlaň ýa-da özüňiz aýlaň

Bellenen gözenek

Mysal üçin gözenegiň belligi

Sütünleri öçürmek

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

Bellenen tertip

Suwuklyk tertibi

Tipografiýa sözbaşylary, abzaslar, sanawlar we beýleki görnüşli elementler

Sözbaşylar we göçürme

h1. 1-nji sözbaşy

h2. 2-nji sözbaşy

h3. 3-nji sözbaşy

h4. 4-nji sözbaşy

h5. 5-nji sözbaşy

h6. 6-njy sözbaşy

Mysal abzasy

Mysal sözbaşysynyň kiçi sözbaşy bar ...

Dürli. elementleri

Haçan ulanmaly

Abzasda ünsi çekmek

Salgylar

Gysgaltmalar

Bloknotlar

Nädip sitata bermeli

Sanawlar

Tertibi<ul>

Düzedilmedik<ul.unstyled>

Sargyt edildi<ol>

Düşündirişdl

Tablisalar , tablisa maglumatlary diýip çakladyňyz

Stol gurmak

Mysal: Bellenen tablisanyň stilleri

Mysal: Zebra zolakly

Mysal: Zebra zolakly w / TableSorter.js

Formalar

Bellenen stiller

Toplanan görnüşler

Düwmeler

Mysal düwmeleri

Alternatiw ululyklar

Maýyp ýagdaý

Salgylar

Düwmeler

Nawigasiýa

Bellenen topbar

Taslamanyň ady

Bu näme

Özbaşdak düzülip bilner

Açylýan ýerler

Salgylar we dermanlar

Sahypa

Üstünlik, duýduryş we ýalňyş habarlary ýa-da duýduryşlar üçin duýduryşlar we ýalňyşlyklar

Esasy duýduryşlar

Habarlary blokirläň

Popovers Modallarda , gurallar maslahatlarynda we açylýan ýerlerde mazmuny görkezmek üçin komponentler

Modallar

Modal sözbaşy

Gural maslahatlary

Popovers

Popover ady

“ Bootstrap” -y “Az Supercharhar” bilen ulanmak CSS-ni üýtgeýjiler, garyndylar we funksiýalar bilen güýçlendiriň

Nädip ulanmaly

Näme girýär

Reňk üýtgeýjileri

Teswir ýazmak

Wazony garyşdyryň

Şrift ýazgylary

Gradiýentler

Amallar we gözenek ulgamy

Tertibi`<ul>`

Düzedilmedik`<ul.unstyled>`

Sargyt edildi`<ol>`

Düşündiriş`dl`