ýokarda

çep

dogry

aşakda

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.

GitHub-da ýükleme »

Häzirki wagtda v1.3.0

Taryh

“Twitter” -iň inersenerleri öňden gelýän talaplary kanagatlandyrmak üçin tanyş kitaphanalaryny diýen ýaly ulandylar. “Bootstrap” hödürlän kynçylyklara jogap hökmünde başlady. Köp ajaýyp halkyň kömegi bilen Bootstrap ep-esli ösdi.

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.

Chrome, Safari, Internet Explorer we Firefox-da synagdan geçirildi we goldanýar

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

Näme girýär

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

Javascript plaginleri
Originalhli asyl .less faýllar
Doly düzülen we kiçeldilen CSS
Styleguide resminamalarynyň doly
Dürli tertipli üç mysal sahypasy

Çalt başlangyç mysallary

Çalt galyplar gerekmi? Bir ýere jemlän bu esasy mysallarymyza göz aýlaň:

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" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

1/3

2/3

Sütünleri öçürmek

8 ofset 4

1/3 2 / 3s ofset

4 ofset 4

5 ofset 3

10 ofset 6

Höwürtge sütünleri

.rowBar bolan sütüniň içinde döredip, mazmunyňyza höwürtge beriň .

Höwürtge sütünleriniň mysaly

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>

Öz toruňyzy aýlaň

“Bootstrap” -da gurlan, adaty 940px gözenek ulgamyny sazlamak üçin az sanly üýtgeýjiler bar. Biraz özleşdirmek bilen sütünleriň, çukurlaryň we ýaşaýan konteýnerleriň ululygyny üýtgedip bilersiňiz.

Toruň içinde

Tor ulgamyny üýtgetmek üçin zerur üýtgeýjiler häzirki wagtda ýaşaýar variables.less.

Üýtgeýji	Bellenen baha	Düşündiriş
`@gridColumns`	16	Toruň içindäki sütünleriň sany
`@gridColumnWidth`	40px	Toruň içindäki her sütüniň ini
`@gridGutterWidth`	20px	Her sütüniň arasyndaky otrisatel boşluk
`@siteWidth`	Columnhli sütünleriň we çukurlaryň hasaplanan jemi	Sütünleriň we çukurlaryň sanyny sanamak we garyndynyň giňligini kesgitlemek üçin käbir esasy gabat gelýäris `.fixed-container()`.

Indi sazlamak üçin

Paneli üýtgetmek, üç @grid-*üýtgeýjini üýtgetmek we Az faýllary täzeden düzmek diýmekdir.

“Bootstrap” 24 sütüne çenli gözenek ulgamyny dolandyrmak üçin enjamlaşdyrylan; Dymmaklyk bary-ýogy 16-dyr.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;

Täzeden düzülensoň, düzülersiňiz!

Bellenen tertip

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

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

Suwuklyk tertibi

Minimal we iň giňligi we çep tarapy bolan alternatiw, çeýe suwuk sahypa gurluşy. Programmalar we resminamalar üçin ajaýyp.

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

Ingsazgylar we göçürme

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

Tiphli tipografiki gözenek, üýtgeýänlerimiz.less faýlyndaky iki sany az üýtgeýjä esaslanýar: @basefontwe @baseline. Birinjisi, şriftiň ululygynda ulanylýar, ikinjisi esasy çyzyk beýikligi.

Şol üýtgeýjileri we käbir matematikany, ähli görnüşlerimiziň çäklerini, paddinglerini we çyzyk beýikliklerini döretmek üçin ulanýarys.

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 we olar degişlilikde goýy we çyzykly görnüşde ýazylmaly däl (has manyly element bar bolsa, ulanyň). <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. Ulanylyşynyň iki mysaly:

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

Doly ady
[email protected]

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

<blockquote>
  <p> Lorem ipsum dolor amet, konsektetur adipiscing elit. Integer posuere ante venenatis dapibus posuere velit aliketini ýok edýär. </p>
  <small> Dr. Julius Hibbert </small>
</blockquote>

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.

Kod

<code> <pre>

Koduňyzy iki sany ýönekeý bellik bilen stilde çalyň. Javascript arkaly has ajaýyp bolmak üçin Google-yň koduny owadan kitaphanasyna taşlaň we düzüldi.

Kod görkezmek

Kod, blok bölekleri ýa-da diňe bölekler, dogry bellige dolanyp stil bilen görkezilip bilner. Birnäçe setiri öz içine alýan kod bloklary üçin <pre>elementi ulanyň. Giriş kody üçin <code>elementi ulanyň.

Element Netije

<code> Şuňa meňzeş tekst setirinde, örtülen koduňyz bu <html>elemente meňzeýär.

Element	Netije
`<code>`	Şuňa meňzeş tekst setirinde, örtülen koduňyz bu `<html>`elemente meňzeýär.
`<pre>`	<div> <h1> sözbaşy </h1> <p> Şu ýerde bir zat ... </p> </div> Bellik:`<pre>` Kodlary bellikleriň içinde mümkin boldugyça çepe ýakyn saklaň ; ähli bellikleri görkezer.
`<pre class="prettyprint">`	“Google-code-prettify” kitaphanasyny ulanyp, kod bloklaryňyz birneme üýtgeşik wizual stili we awtomatiki sintaksis aýratynlygyny alýar. <div> <h1> sözbaşy </h1> <p> Şu ýerde bir zat ... </p> </div> Google-code-prettify-i göçürip alyň we nädip ulanmalydygyny okaň.

<pre>

<div>
  <h1> sözbaşy </h1>
  <p> Şu ýerde bir zat ... </p>
</div>

Bellik:<pre> Kodlary bellikleriň içinde mümkin boldugyça çepe ýakyn saklaň ; ähli bellikleri görkezer.

<pre class="prettyprint">

“Google-code-prettify” kitaphanasyny ulanyp, kod bloklaryňyz birneme üýtgeşik wizual stili we awtomatiki sintaksis aýratynlygyny alýar.

<div> <h1> sözbaşy </h1> <p> Şu ýerde bir zat ... </p> </div>

Google-code-prettify-i göçürip alyň we nädip ulanmalydygyny okaň.

Içerki bellikler

<span class="label">

Bedeniňizdäki islendik sözleme üns beriň ýa-da belläň.

Islän zadyňyzy belläň

Hiç haçan şol ajaýyp Täze gerekdi! ýa-da kod ýazylanda möhüm baýdaklar? Bolýar, indi sizde bar. Ine, adaty tertipde nämeler bar:

Bellik	Netije
`<span class="label">Default</span>`	Bellenen
`<span class="label success">New</span>`	Täze
`<span class="label warning">Warning</span>`	Duýduryş
`<span class="label important">Important</span>`	Möhüm
`<span class="label notice">Notice</span>`	Üns beriň

Mediýa paneli

Pes HTML aýak yzy we minimal stili bolan sahypalarda dürli ululykdaky kiçijik suratlary görkeziň.

Mysal üçin kiçijik suratlar

Içindäki .media-gridkiçijik suratlar islendik ululykda bolup biler, ýöne gönüden-göni gurlan Bootstrap grid ulgamyna karta edilende has gowy işleýär. 90, 210 we 330 ýaly şekil giňlikleri, we sütün ululyklaryna deň bolmak üçin birnäçe piksel padding .span2bilen .span4birleşýär .span6.

Uly

Orta

Kiçi

Olary kodlamak

Mediýa torlaryny ulanmak aňsat we bellik tarapynda has ýönekeý. Olaryň ölçegleri diňe goşulan suratlaryň ululygyna esaslanýar.

<ul class = "media-grid" > 
  <li>
    <a href = "#"> _ 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#"> _ 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

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

<tablisa>
  ...
</table>

Mysal: Kondensirlenen tablisa

Has berk ýerlerde has köp maglumat talap edýän tablisalar üçin, gapagy ýarym kesýän kondensirlenen tagamy ulanyň. Şeýle hem, adaty stol stilleri ýaly serhetler we zebra zolaklary bilen bilelikde ulanylyp bilner.

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

Mysal: Serhet tablisasy

Stollaryňyzy burçlaryny tegelekläp, her tarapa serhet goşup, has ýumşak görüniň.

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

<table class = "serhet-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
4 sütün
2 sütün		2 sütün

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

<table class = "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
2	Joe	Alty gap	Iňlis
3	Stu	Diş	Kod
1	Siziňki	Biri	Iňlis

<script src = "js / jquery / jquery.tablesorter.min.js" > </script> 
<script > 
  $ ( funksiýa () { 
    $ ( "tablisa # sortTableExample" ). tablisaçy ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "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 bilen deňleşdirilen) barlaň. Açylýan libellikler .active, häzirki sahypa saýlamasyny görkezmek üçin hem goldaw berýär.

Bellik: Islendik sahypadaky ýokarky paneli ulananyňyzda, goşup, onuň üstaşyr gabat gelmegini hasaba padding-top: 40px;alyň body.

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.

Esasy goýmalaryň mysaly

Salgylar yzygiderli nawigasiýa (daşarky sahypalary şol bir goýmada ýüklemek) ýa-da mazmun panellerini çalyşmak üçin tablisa mazmuny hökmünde ulanylyp bilner. Ikinjisini birleşdirmek üçin ulanyp boljak bellikler pluginimiz bar.

<ul 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>

Esasy dermanlar mysaly

<ul class = "tabletkalar" > 
  <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>

Çörek bölekleri

Çörek döwmek nawigasiýasy ulanyjylara programmanyň ýa-da sahypanyň nirededigini görkezmegiň usuly hökmünde ulanylýar, ýöne esasy nawigasiýa üçin däl.

<ul class = "çörek döwmek" > 
  <li> <a href = "#"> Baş sahypa </a> <span class = "divider" > / </span> </li>   
  <li> <a href = "#"> Orta sahypa </a> <span class = "divider" > / </span> </li>   
  <li> <a href = "#"> Başga biri </a> <span class = "divider" > / </span> </li>   
  <li class = "işjeň" > Siz şu ýerde </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" 
  <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

.alert-message

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

Javascript al »

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

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

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.

Mysal kody

<div class = "duýduryş-habar duýduryşy" > 
  <a class = "close" href = "#"> × </a> _  
  <p> <strong> Mukaddes guamamol! </strong> Iň gowusy özüňizi barlaň, gaty gowy görünmeýärsiňiz. </p>
</div>

Habarlary blokirläň

.alert-message.block-message

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.

Javascript al »

Mukaddes guamamol! 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

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

Duis mollis est commodo luctus
Nisi erat porttitor ligula
Lacinia odio sem nec elit

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

Mysal kody

<div class = "duýduryş-habar blok-habar duýduryşy" > 
  <a class = "close" href = "#"> × </a> _  
  <p> <strong> Mukaddes guamamol! Bu duýduryş! </strong> 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. </p>
  <div class = "duýduryş-hereketler" > 
    <a class = "btn small" href = "#"> Bu çäräni görüň </a> <a class = "btn small" href = "#"> thisa - da muny ediň </a>     
  </div>
</div>

Modallar

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

Javascript al »

Gurallar

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

Javascript al »

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 ”

Popovers

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

Javascript al »

Başlamak

Javascript-i Bootstrap kitaphanasy bilen birleşdirmek gaty aňsat. Aşakda esaslara geçýäris we işe başlamak üçin size ajaýyp pluginler hödürleýäris!

Javascript resminamalaryny görüň »

Näme girýär

“Bootstrap” -yň esasy komponentlerini jQuery we Ender bilen işleýän täze ýörite plaginler bilen durmuşa geçiriň . Developmentörite ösüş zerurlyklaryňyza laýyklaşdyrmak we üýtgetmegi maslahat berýäris.

Faýl	Düşündiriş
bootstrap-modal.js	Modal pluginimiz , adaty modal js pluginini gaty ýuka ! Diňe twitterde talap edýän ýalaňaç funksiýamyzy goşmak üçin aýratyn alada etdik.
bootstrap-alerts.js	Duýduryş plugin, duýduryşlara ýakyn işlemek üçin gaty kiçi synpdyr.
bootstrap-dropdown.js	Bu plugin, bootstrap topbar ýa-da bellikli nawigasiýalara aşak düşýän täsirini goşmak üçin.
bootstrap-scrollspy.js	“ScrollSpy” plugin, bootstrap topbarsyna aýlaw ýagdaýyna esaslanyp awtomatiki täzelenýän nav goşmak üçin.
bootstrap-düwmeler.js	“ScrollSpy” plugin, bootstrap topbarsyna aýlaw ýagdaýyna esaslanyp awtomatiki täzelenýän nav goşmak üçin.
bootstrap-tabs.js	Bu plugin ýerli mazmunda tigir sürmek üçin çalt, dinamiki tab we tabletka funksiýasyny goşýar.
bootstrap-twipsy.js	Jeýson Frame tarapyndan ýazylan ajaýyp jQuery.tipsy plugin esasynda; twipsy, şekillere bil baglamaýan, animasiýa üçin css3 we ýerli at saklamak üçin maglumat atributlaryny ulanýan täzelenen wersiýa!
bootstrap-popover.js	Açylýan plugin, programmaňyza popovers goşmak üçin ýönekeý interfeýs hödürleýär. Boostrap-twipsy.js pluginini giňeldýär , şonuň üçin taslamaňyza popovers goşanyňyzda şol faýly hem ele alyň!

Javascript zerurmy?

! Ok! “Bootstrap” ilkinji nobatda CSS kitaphanasy bolmak üçin döredildi. Bu javascript, goşulan stilleriň üstünde esasy interaktiw gatlagy üpjün edýär.

Şeýle-de bolsa, “javascript” zerur bolanlar üçin “Bootstrap” -y javascript bilen nädip birikdirmelidigine düşünmek we derrew esasy işlemegi üçin çalt we ýeňil wariant bermek üçin ýokardaky pluginleri hödürledik.

Has giňişleýin maglumat we käbir göni ýaýlymlary görmek üçin plugin resminamalar sahypamyza serediň .

“Bootstrap” , has çalt we aňsat web ösüşi üçin CSS deslapky prosessor “ Less ” bilen bilelikde ulanyljak açyk çeşmelerdäki garyndylar we üýtgeýänler “Preboot” -dan 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 = "stylesheet / less" href = "az / bootstrap.less" media = "hemmesi" />    
<script src = "js / less-1.1.3.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ň.

Üýtgeýjiler

“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 gözenek
@basefont : 13px ;          
@baseline : 18px ;

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 ; 
  }
  ...
}

Gradiýentler

# gradient {
  ...
  . 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   
    fon - surat : çyzykly - gradient ( @startColor , @endColor ); // Standart  
  }
  ...
}

Amallar

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 ;   
@SiteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Käbir sütün düzüň
. sütünler ( @columnSpan : 1 ) {  
  ini : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}

Has az düzmek

Faýllary / lib / -de üýtgedeniňizden soň .less, bootstrap - *. *. *. Css we bootstrap - *. *. *. Min.css faýllaryny täzeden döretmek üçin olary täzeden düzmeli bolarsyňyz. GitHub-a çekmek haýyşyny iberýän bolsaňyz, elmydama täzeden ýazmaly.

Toplamagyň ýollary

Usul	Dimler
Makfile bilen düwün	Aşakdaky buýrugy işledip, has az buýruk setirini npm bilen guruň: $ npm lessc guruň Gurlandan soň, bootstrap katalogyňyzyň kökünden işlediň `make`we hemmäňiz taýyn. Mundan başga-da, sagat gurnan bolsaňyz, `make watch`her gezek bootstrap lib-de bir faýl redaktirläniňizde bootstrap awtomatiki usulda täzeden gurlup bilner (bu hökman däl, diňe amatly usul).
Javascript	Iň soňky Less.js-i göçürip alyň we oňa barýan ýoly (we Bootstrap) goşuň `head`. <link rel = "stil sahypasy / az" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" > </script> .Faýlsyz faýllary täzeden düzmek üçin olary ýatda saklaň we sahypaňyzy täzeden ýükläň. Less.js olary düzýär we ýerli ammarda saklaýar.
Buýruk setiri	Eger sizde has az buýruk setiri guraly bar bolsa, aşakdaky buýrugy işlediň: $ lessc ./lib/bootstrap.less> bootstrap.css `--compress`Käbir baýtlary tygşytlamaga synanyşýan bolsaňyz, şol buýruga goşuň !
Az Mac programmasy	Resmi däl Mac programmasy .less faýllaryň kataloglaryna tomaşa edýär we synlanan .less faýly ýatda saklandan soň kody ýerli faýllara düzýär. Isleseňiz, awtomatiki kiçeltmek üçin programmada ileri tutmalary üýtgedip bilersiňiz we düzülen faýllaryň haýsy bukjasy gutarýar.

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

Çalt başlangyç mysallary

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

Bellenen gözenek

Mysal üçin gözenegiň belligi

Sütünleri öçürmek

Höwürtge sütünleri

Höwürtge sütünleriniň mysaly

Öz toruňyzy aýlaň

Toruň içinde

Indi sazlamak üçin

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

Ingsazgylar 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

Kod

Kod görkezmek

Içerki bellikler

Islän zadyňyzy belläň

Mediýa Suratlary we wideolary görkezmek

Mediýa paneli

Mysal üçin kiçijik suratlar

Uly

Orta

Kiçi

Olary kodlamak

Tablisalar , tablisa maglumatlary diýip çakladyňyz

Stol gurmak

Mysal: Bellenen tablisanyň stilleri

Mysal: Kondensirlenen tablisa

Mysal: Serhet tablisasy

Mysal: Zebra zolakly

Mysal: Zebra zolakly w / TableSorter.js

Formalar

Bellenen stiller

Toplanan görnüşler

Meýdanyň ululyklary

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

Esasy goýmalaryň mysaly

Esasy dermanlar mysaly

Çörek bölekleri

Tertibi`<ul>`

Düzedilmedik`<ul.unstyled>`

Sargyt edildi`<ol>`

Düşündiriş`dl`