Gämi üstünde, esasy HTML elementleri täze, yzygiderli görünmek we duýmak üçin giňeldilen synplar bilen bezelýär we ösdürilýär.
Tiphli tipografiki gözenek, üýtgeýänlerimiz.less faýlyndaky iki sany az üýtgeýjä esaslanýar: @baseFontSizewe @baseLineHeight. 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.
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.
Goşmak bilen abzasy tapawutlandyryň .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auktor. Duis mollis, haryt däl luctus.
| Element | Ulanylyşy | Meýletin |
|---|---|---|
<strong> |
Möhüm tekstiň bir bölegini bellemek üçin | Hiç |
<em> |
Stres bilen tekstiň bir bölegini bellemek üçin | Hiç |
<abbr> |
Giňeldilen görnüşini görkezmek üçin gysgaltmalary we gysgaltmalary ýazyň | Giňeldilen tekst üçin goşmaça .initialismBaş harp gysgaltmalary üçin synp ulanyň . |
<address> |
Iň ýakyn atasy ýa-da tutuş iş topary üçin habarlaşmak üçin | Linehli setirleri gutaryp formatirlemäni saklaň<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.
Bellik:<b> HTML5- de ulanmaga arkaýyn <i>boluň, ýöne ulanylyşy birneme üýtgedi. esasan ses, tehniki adalgalar we ş.m. üçin <b>goşmaça ähmiýet bermezden sözleri ýa-da sözlemleri tapawutlandyrmak üçin niýetlenendir .<i>
<address>Belligiň ulanylyşynyň iki mysaly :
Aýratynlykly gysgaltmalar titleaçyk nokatly aşaky araçäk we aýlawda kömek kursory bar. Bu ulanyjylara aýlawda bir zadyň görkeziljekdigini goşmaça görkezýär.
initialismBirneme kiçi tekst ululygyny berip, tipografiki sazlaşygy ýokarlandyrmak üçin synpy gysgaltma goşuň .
Dilimlenen çörekden bäri HTML iň gowy zat.
Sypat sözüniň gysgaldylyşy attr .
| Element | Ulanylyşy | Meýletin |
|---|---|---|
<blockquote> |
Başga çeşmeden mazmuny sitata etmek üçin blok derejeli element |
.pull-leftFloüzýän görnüşler üçin .pull-rightsapaklary ulanyň |
<small> |
Ulanyjynyň ýüzüne sitata goşmak üçin goşmaça element, adatça iş ady bolan awtor | <cite>Çeşmäniň adynyň ýa-da adynyň töweregine ýerleşdiriň |
Blokkot goşmak üçin , sitata hökmünde <blockquote>islendik HTML -i gurşap alyň. Göni sitatalar üçin a <p>.
<small>Çeşmäňizi görkezmek üçin goşmaça elementi goşuň we —stilleşdirmek maksady bilen öňünden çyzgy alarsyňyz.
- <blockquote>
- <p> Lorem ipsum dolor amet, konsektetur adipiscing elit. Integer posuere ante venenatis-i ýok edýär. </p>
- <small> Meşhur biri </small>
- </blockquote>
Bellenen bloknotlar şeýle görnüşde düzülendir:
“Lorem ipsum dolor” oturýar. Integer posuere ante venenatis-i ýok edýär.
Iş bedeninde meşhur biri
Blokotyňyzy sag tarapda ýüzmek üçin goşuň class="pull-right":
“Lorem ipsum dolor” oturýar. Integer posuere ante venenatis-i ýok edýär.
Iş bedeninde meşhur biri
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Başlar! Gorizontal düşündiriş sanawlary, çep sütüniň düzedişine gabat gelmeýän adalgalary keser text-overflow. Dar görnüşlerde, deslapky tertipleşdirilen tertibe geçerler.
Koduň içerki böleklerini örtüň <code>.
- Mysal üçin , <code> bölümi </ code > setir görnüşinde örtülmelidir .
<pre>Birnäçe setir kod üçin ulanyň . Dogry görkezmek üçin koddaky islendik burç ýaýdan gaçmagy unutmaň.
<p> Bu ýerde nusga nusgasy ... </p>
- <pre>
- & lt; p & gt; Bu ýerde nusga tekst ... & lt; / p & gt;
- </pre>
Bellik:<pre> Kodlary bellikleriň içinde mümkin boldugyça çepe ýakyn saklaň ; ähli bellikleri görkezer.
Islege görä .pre-scrollable, iň ýokary beýikligi 350px boljak we y ok aýlaw paneli bilen üpjün etjek synpy goşup bilersiňiz.
Şol bir <pre>elementi alyň we güýçlendirilen görkeziş üçin iki sany goşmaça sapak goşuň.
- <p> Bu ýerde nusga nusgasy ... </p>
- <pre class = "prettyprint
- ýorgan-düşek " >
- & lt; p & gt; Bu ýerde nusga tekst ... & lt; / p & gt;
- </pre>
Google-code-prettify-i göçürip alyň we nädip ulanmalydygyny okaň.
| Bellik | Düşündiriş |
|---|---|
<table> |
Maglumatlary tablisa görnüşinde görkezmek üçin element |
<thead> |
<tr>Stol sütünlerine bellik etmek üçin tablisanyň sözbaşy hatarlary () üçin konteýner elementi |
<tbody> |
<tr>Stoluň göwresindäki stol hatarlary () üçin konteýner elementi |
<tr> |
Bir hatarda peýda bolan stol öýjükleriniň ( <td>ýa-da ) toplumy üçin konteýner elementi<th> |
<td> |
Bellenen tablisanyň öýjügi |
<th> |
Sütün (ýa-da hatara, ýerleşişine we ýerleşişine baglylykda) ýörite tablisa öýjügi a <thead> |
<caption> |
Tablisanyň saklaýan zatlarynyň beýany ýa-da gysgaça mazmuny, esasanam ekran okyjylary üçin peýdaly |
- <tablisa>
- <thead>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| Ady | Synp | Düşündiriş |
|---|---|---|
| Bellenen | Hiç | Hiç hili stil ýok, diňe sütünler we hatarlar |
| Esasy | .table |
Diňe hatarlaryň arasynda keseligine çyzyklar |
| Serhet | .table-bordered |
Burçlary tegelekleýär we daşarky araçägi goşýar |
| Zebra zolagy | .table-striped |
Täsin hatarlara açyk çal reňkli reňk goşýar (1, 3, 5 we ş.m.) |
| Kondensirlenen | .table-condensed |
Hemme elementleriň içinde 8px-den 4px-e çenli dikligine padding tdkesýärth |
Tablisa okalmagyny üpjün etmek we gurluşy saklamak üçin awtomatiki usulda diňe birnäçe serhet bilen düzülýär. 2.0 bilen .tablesynp talap edilýär.
- <table class = "table" >
- …
- </table>
| # | Ady | Familiýasy | Ulanyjy ady |
|---|---|---|---|
| 1 | Bellik | Otto | @mdo |
| 2 | Jacobakup | Thornton | @fat |
| 3 | Larry | guş |
Zebra zolaklaryny goşup, stollaryňyz bilen azajyk gyzyklanyň - .table-stripedsynpy goşuň.
Bellik: Zolakly tablisalarda :nth-childCSS saýlaýjysy ulanylýar we IE7-IE8-de ýok.
- <table class = "table table-zolakly" >
- …
- </table>
| # | Ady | Familiýasy | Ulanyjy ady |
|---|---|---|---|
| 1 | Bellik | Otto | @mdo |
| 2 | Jacobakup | Thornton | @fat |
| 3 | Larry | guş |
Estetiki maksatlar üçin tutuş stoluň we tegelek burçlaryň araçäklerini goşuň.
- <table class = "stol tablisasy bilen araçäk" >
- …
- </table>
| # | Ady | Familiýasy | Ulanyjy ady |
|---|---|---|---|
| 1 | Bellik | Otto | @mdo |
| Bellik | Otto | @getbootstrap | |
| 2 | Jacobakup | Thornton | @fat |
| 3 | Larry the guş | ||
.table-condensedStol öýjükleriniň örtügini ýarym (8px-den 4px-e çenli) kesmek üçin synp goşup, stollaryňyzy has ykjam ediň .
- <table class = "stol stoly kondensirlenen" >
- …
- </table>
| # | Ady | Familiýasy | Ulanyjy ady |
|---|---|---|---|
| 1 | Bellik | Otto | @mdo |
| 2 | Jacobakup | Thornton | @fat |
| 3 | Larry the guş | ||
Bar bolan sapaklaryň islendik birini ulanyp, dürli görnüşlere ýetmek üçin stol synplarynyň islendigini birleşdirip bilersiňiz.
- <table class = "stol stoly zolakly stol bilen araçäk stol "
- ...
- </table>
| Doly ady | |||
|---|---|---|---|
| # | Ady | Familiýasy | Ulanyjy ady |
| 1 | Bellik | Otto | @mdo |
| 2 | Jacobakup | Thornton | @fat |
| 3 | Larry the guş | ||
“Bootstrap” -daky formalaryň iň gowy tarapy, bellikleriňizde nädip gursaňyzam, ähli girişleriňiz we dolandyryşlaryňyz ajaýyp görünýär. Artykmaç HTML talap edilmeýär, ýöne muny talap edýänler üçin nusgalary hödürleýäris.
Has çylşyrymly düzülişler aňsat düzmek we hadysany baglanyşdyrmak üçin anyk we ulaldylan sapaklar bilen gelýär, şonuň üçin her ädimde özüňizi gurşap alýarsyňyz.
“Bootstrap” forma görnüşleriniň dört görnüşini goldaýar:
Dürli görnüş düzülişleri bellemek üçin käbir üýtgeşmeleri talap edýär, ýöne dolandyryşlaryň özleri şol bir hereket edýärler.
“Bootstrap” -yň görnüşleri, giriş, tekstariýa we garaşýanlaryňyzy saýlamak ýaly esasy forma dolandyryşlarynyň stillerini öz içine alýar. Alsoöne goşmaça we öňünden taýýarlanan girişler we bellik gutularynyň sanawlaryny goldamak ýaly birnäçe aýratyn komponentler bilen bilelikde gelýär.
Erroralňyşlyk, duýduryş we üstünlik ýaly döwletler forma gözegçiliginiň her görnüşi üçin girizilýär. Maýyp dolandyryşlar üçin stiller hem bar.
“Bootstrap” umumy web görnüşleriniň dört görnüşi üçin ýönekeý bellikleri we stilleri üpjün edýär.
| Ady | Synp | Düşündiriş |
|---|---|---|
| Dik (asyl) | .form-vertical (hökmany däl) |
Dolandyryşlaryň üstünde goýlan, çep tarapdaky ýazgylar |
| Inline | .form-inline |
Ykjam stil üçin çep hatar belligi we içerki blok dolandyryşlary |
| Gözlemek | .form-search |
Adaty gözleg estetiki üçin goşmaça tegelek tekst giriş |
| Gorizontal | .form-horizontal |
Dolandyryşlar bilen bir setirde çep, saga düzülen ýazgylar |
Goşmaça belliksiz akylly we ýeňil defoltlar.
- <form class = "gowy" >
- <label> Etiketkanyň ady </label>
- <giriş görnüşi = "text" class = "span3" ýer eýesi = "Bir zat ýazyň ..." >
- <span class = "help-block" > Mysal üçin blok derejeli kömek teksti. </span>
- <label class = "bellik gutusy" >
- <giriş görnüşi = "bellik gutusy" > Barlaň
- </label>
- <düwme görnüşi = " tabşyr " synp = "btn" > Ibermek </button>
- </form>
Forma .form-searchwe . .search-query_input
- <form class = "gowy form-gözleg" >
- <giriş görnüşi = "text" class = "giriş-orta gözleg-talap" >
- <düwme görnüşi = "tabşyr" synp = "btn" > Gözleg </button>
- </form>
.form-inlineWertikal tekizlemäni we forma dolandyryşlarynyň aralygyny inçe goşuň .
- <form class = "gowy form-inline" >
- <giriş görnüşi = "text" class = "input-small" ýer eýesi = "E-poçta" >
- <giriş görnüşi = "parol" synp = "giriş-kiçi" ýer eýesi = "Parol" >
- <label class = "bellik gutusy" >
- <input type = "checkbox" > Rememberadyňyzda saklaň
- </label>
- <düwme görnüşi = "tabşyr" class = "btn" > Giriş </button>
- </form>
Sag tarapda görkezilýär, biziň goldaýan deslapky görnüş dolandyryşlarymyz. Ine, oklaryň sanawy:
Aboveokardaky mysal görnüşiniň ýerleşişini göz öňünde tutup, ine, ilkinji giriş we gözegçilik topary bilen baglanyşykly bellik. The .control-group, .control-labelwe .controlssapaklaryň hemmesi stil üçin zerur.
- <form class = "form-gorizontal" >
- <fieldset>
- <legend> Rowaýat teksti </legend>
- <div class = "control-group" >
- <label class = "control-label" for = "input01" > Tekst girizmek </label>
- <div class = "dolandyryşlar" >
- <giriş görnüşi = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Kömek tekstini goldaýan </p>
- </div>
- </div>
- </fieldset>
- </form>
“Bootstrap” brauzer tarapyndan goldanýan we disabledştatlar üçin stilleri görkezýär. Adaty Webkit-i aýyrýarys outlinewe box-shadowonuň ýerine bir ýer goýýarys :focus.
Şeýle hem ýalňyşlyklar, duýduryşlar we üstünlik üçin tassyklama stillerini öz içine alýar. Ulanmak üçin daş-töweregiňize säwlik synpyny goşuň .control-group.
- <meýdan meýdançasy
- class = "dolandyryş-topar ýalňyşlygy" >
- …
- </fieldset>
Giriş toparlary, goşulan ýa-da öňünden ýazylan tekst bilen, girişleriňiz üçin has köp mazmun bermegiň aňsat usulyny üpjün edýär. Ajaýyp mysallara Twitter ulanyjy atlary üçin @ belgisi ýa-da maliýe üçin $ girýär.
V1.4-e çenli “Bootstrap” bellik gutularynyň we radiolaryň töwereginde goşmaça bellik talap edýär. <label class="checkbox">Indi, örtülen zady gaýtalamak ýönekeý bir mesele <input type="checkbox">.
Içerki bellikler we radiolar hem goldanýar. Diňe .inlinehaýsydyr birine goşuň .checkboxýa-da .radiogutardyňyz.
Giriş görnüşlerini öňünden taýýarlamak ýa-da goşmak üçin , boş ýerleri goýman .add-on, inputşol bir setirde goýuň.
Forma girişleriňiz üçin kömek tekstini goşmak üçin giriş elementinden soň <span class="help-inline">kömek tekstini ýa-da kömek tekst blokyny goşuň.<p class="help-block">
Her nyşany goşmaça haýyş etmegiň ýerine, olary sprite - şekilleri ýerleşdirmek üçin CSS ulanýan bir faýlda bir topar şekil düzdük background-position. Bu, Twitter.com-da ulanýan usulymyz we bu biziň üçin gowy işledi.
Ichli nyşanlaryň synplary, .icon-beýleki komponentlerimiz ýaly, dogry at goýmak we gözlemek üçin prefiks edilýär. Bu beýleki gurallar bilen gapma-garşylyklaryň öňüni almaga kömek eder.
Glifikonlar , bu ýerde resminamalarda baglanyşyk we karz berýänçäk, açyk çeşmeli gurallar toplumymyzda goýlan “Halflings” -i ulanmaga rugsat berdi. Taslamalaryňyzda hem şeýle etmegi göz öňünde tutmagyňyzy haýyş edýäris.
“Bootstrap <i>” ähli nyşanlaryň belligini ulanýar, ýöne olaryň synpy ýok - diňe umumy prefiks. Ulanmak üçin aşakdaky kody islendik ýere ýerleşdiriň:
- <i class = "icon-search" > </i>
Bir goşmaça synp bilen taýýarlanan ters (ak) nyşanlaryň görnüşleri hem bar:
- <i class = "icon-search icon-white" > </i>
Nyşanlaryňyz üçin saýlamak üçin 140 synp bar. Diňe <i>dogry synplar bilen bellik goşuň we düzüldiňiz. Doly sanawy sprites.less ýa-da şu resminamada tapyp bilersiňiz.
Başlar! Düwmelerde ýa-da deňiz baglanyşyklarynda bolşy ýaly, tekst setirleriniň gapdalynda ulanylanda, <i>dogry aralyk üçin bellikden soň boş ýer goýuň.
Nyşanlar ajaýyp, ýöne olary nirede ulanar? Ine birnäçe pikir:
Aslynda, <i>bellik goýup boljak islendik ýerde nyşan goýup bilersiňiz.
Gurallar paneli, nawigasiýa ýa-da deslapky görnüş girişleri üçin düwmelerde, düwme toparlarynda ulanyň.