Дар болои девор, унсурҳои асосии HTML бо синфҳои васеъ тарҳрезӣ ва такмил дода шудаанд, то намуди тару тоза, пайваста ва эҳсосро таъмин кунанд.
Тамоми шабакаи типографӣ ба ду тағирёбандаи Less дар файли variables.less мо асос ёфтааст: @baseFontSizeва @baseLineHeight. Якум андозаи шрифти асосист, ки дар саросари ҷаҳон истифода мешавад ва дуввум баландии сатри асосӣ мебошад.
Мо ин тағирёбандаҳо ва баъзе аз математикаро барои эҷод кардани ҳошияҳо, пӯшишҳо ва баландии сатрҳои ҳама намуди мо ва ғайра истифода мебарем.
Нуллам quis risus eget urna mollis ornare vel eu leo. Ҷамъияти дорои ҷамоатҳои натоиҷӣ ва бузургии ҳомиладорӣ, масхарабозӣ мебошад. Нуллам ид dolor id nibh ultricies vehicula.
Параграфро бо илова кардани .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non comodo luctus.
| Элемент | Истифода | Ихтиёрӣ |
|---|---|---|
<strong> |
Барои таъкид кардани порчаи матн бо муҳим | Ҳеҷ |
<em> |
Барои таъкид кардани порчаи матн бо фишор | Ҳеҷ |
<abbr> |
Ихтисорот ва ихтисоротҳоро мепӯшонад, то версияи васеъшударо дар болои нишона нишон диҳад | Аттрибути ихтиёриро .initialismБарои ихтисороти калон синфро истифода баред . |
<address> |
Барои маълумоти тамос барои аҷдодони наздиктарини он ё тамоми бадани кор | Форматро бо тамом кардани ҳамаи сатрҳо бо<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a augue pharetra.
Эзоҳ: Озод ҳис кунед <b>ва <i>дар HTML5 истифода баред, аммо истифодаи онҳо каме тағйир ёфтааст. <b>Барои таъкид кардани калимаҳо ё ибораҳо бе аҳамияти иловагӣ пешбинӣ шудааст, дар ҳоле <i>ки асосан барои овоз, истилоҳҳои техникӣ ва ғайра.
Инҳоянд ду мисоли <address>истифодаи тег:
Ихтисороти дорои titleатрибутҳо дорои сарҳади равшани нуқта ва курсори ёрирасон дар мавқеъ мебошанд. Ин ба корбарон нишонаи иловагӣ медиҳад, ки чизе дар кунҷ нишон дода мешавад.
Синфро ба ихтисорот илова кунед, initialismто ҳамоҳангии типографиро тавассути додани андозаи матни каме хурдтар афзоиш диҳед.
HTML беҳтарин чизест, ки пас аз нони буридашуда.
Ихтисораи калимаи аттрибутӣ attr мебошад.
| Элемент | Истифода | Ихтиёрӣ |
|---|---|---|
<blockquote> |
Унсури сатҳи блок барои иқтибос овардани мундариҷа аз манбаи дигар | Иловаи .pull-leftва .pull-rightсинфҳо барои имконоти шинокунанда |
<small> |
Унсури ихтиёрӣ барои илова кардани иқтибос ба корбар, маъмулан муаллиф бо унвони кор | Дар <cite>атрофи унвон ё номи манбаъ ҷойгир кунед |
Барои дохил кардани иқтибос блок, <blockquote>ҳама гуна HTML -ро ҳамчун иқтибос печонед. Барои иқтибосҳои рост мо тавсия медиҳем, ки <p>.
Барои истинод ба манбаи худ як унсури ихтиёриро <small>дохил кунед ва шумо —пеш аз он тире барои ороиши ороиш хоҳед гирифт.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутуни рақамҳо пеш аз ҳама. </p>
- <small> Шахси машҳур </small>
- </blockquote>
Блоки иқтибосҳои пешфарз чунин тарҳрезӣ шудаанд:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутуни рақамҳо пеш аз ҳама.
Шахси машҳур дар Бадани кор
Барои ба тарафи рост шино кардани иқтибоси блоки худ, илова кунед class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутуни рақамҳо пеш аз ҳама.
Шахси машҳур дар Бадани кор
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Сарҳо боло! Рӯйхати тавсифи уфуқӣ истилоҳотеро, ки барои мувофиқат кардан дар сутуни чап хеле дарозанд, ихтисор text-overflowмекунанд. Дар намоишгоҳҳои тангтар, онҳо ба тарҳбандии пешфарзии stacked иваз мешаванд.
Порчаҳои кодро бо <code>.
- Масалан , фасли < code> </ code > бояд ҳамчун сатр печонида шавад .
<pre>Барои якчанд сатрҳои код истифода баред . Боварӣ ҳосил кунед, ки аз ҳама гуна қавсҳои кунҷӣ дар код барои намоиши дуруст раҳо шавед.
<p>Намунаи матн дар ин ҷо...</p>
- <пеш>
- <p>Матни намунавӣ дар ин ҷо...</p>
- </pre>
Эзоҳ: Боварӣ ҳосил кунед, ки кодро дар дохили <pre>тегҳо то ҳадди имкон ба чап наздик нигоҳ доред; он ҳама ҷадвалҳоро пешкаш мекунад.
Шумо метавонед ба таври ихтиёрӣ синферо илова кунед, .pre-scrollableки баландии максимум 350px муқаррар мекунад ва лавҳаи гардиши меҳвари y-ро таъмин мекунад.
Як <pre>унсурро гиред ва ду синфи ихтиёриро барои намоиши мукаммал илова кунед.
- <p> Намунаи матн дар ин ҷо... </p>
- < preclass = "prettyprint
- linenums" >
- <p>Матни намунавӣ дар ин ҷо...</p>
- </pre>
Google-code-prettify -ро зеркашӣ кунед ва хондани хондаро барои истифодаи он бубинед.
| тег | Тавсифи |
|---|---|
<table> |
Унсури парпечкунӣ барои намоиши маълумот дар формати ҷадвал |
<thead> |
Унсури контейнер барои сатрҳои сарлавҳаи ҷадвал ( <tr>) барои нишон додани сутунҳои ҷадвал |
<tbody> |
Унсури контейнер барои сатрҳои ҷадвал ( <tr>) дар бадани ҷадвал |
<tr> |
Унсури контейнер барои маҷмӯи чашмакҳои ҷадвал ( <td>ё <th>), ки дар як сатр пайдо мешавад |
<td> |
Ячейкаи ҷадвали пешфарз |
<th> |
Ячейкаи махсуси ҷадвал барои тамғакоғазҳои сутун (ё сатр, вобаста ба миқёс ва ҷойгиршавӣ) Бояд дар доираи як <thead> |
<caption> |
Тавсиф ё мухтасари он чизе, ки ҷадвал дорад, махсусан барои хонандагони экран муфид аст |
- <ҷадвал>
- <thead>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </ҷадвал>
| Ном | Синф | Тавсифи |
|---|---|---|
| Пешфарз | Ҳеҷ | Бе услуб, танҳо сутунҳо ва сатрҳо |
| Асосӣ | .table |
Танҳо хатҳои уфуқӣ байни қаторҳо |
| Сарҳадӣ | .table-bordered |
Кунҷҳоро давр мезанад ва сарҳади беруниро илова мекунад |
| Зебра-рах | .table-striped |
Ба сатрҳои тоқ (1, 3, 5, ва ғайра) ранги заминаи хокистарии сабукро илова мекунад. |
| Конденсатсионӣ | .table-condensed |
Ҷойгиркунии амудиро аз 8px то 4px, дар дохили ҳама tdва thэлементҳо дар ду ним бур мекунад |
Ҷадвалҳо ба таври худкор танҳо бо чанд сарҳад тарҳрезӣ мешаванд, то хондан ва нигоҳ доштани сохторро таъмин кунанд. Бо 2.0, .tableсинф талаб карда мешавад.
- < синфи ҷадвал = "миз" >
- …
- </ҷадвал>
| # | Ном | Насаб | Номи корбар |
|---|---|---|---|
| 1 | Марк | Отто | @mdo |
| 2 | Яъқуб | Торнтон | @фарбеҳ |
| 3 | Ларри | парранда |
Бо илова кардани зебра-стрипинг бо ҷадвалҳои худ каме зебо шавед - танҳо .table-stripedсинфро илова кунед.
Эзоҳ: Ҷадвалҳои хатӣ :nth-childселектори CSS-ро истифода мебаранд ва дар IE7-IE8 дастрас нестанд.
- < синфи ҷадвал = "мизи рахи ҷадвал" >
- …
- </ҷадвал>
| # | Ном | Насаб | Номи корбар |
|---|---|---|---|
| 1 | Марк | Отто | @mdo |
| 2 | Яъқуб | Торнтон | @фарбеҳ |
| 3 | Ларри | парранда |
Барои мақсадҳои эстетикӣ сарҳадҳоро дар атрофи тамоми миз ва кунҷҳои мудаввар илова кунед.
- < синфи ҷадвал = "ҷадвал-сарҳаддор" >
- …
- </ҷадвал>
| # | Ном | Насаб | Номи корбар |
|---|---|---|---|
| 1 | Марк | Отто | @mdo |
| Марк | Отто | @getbootstrap | |
| 2 | Яъқуб | Торнтон | @фарбеҳ |
| 3 | Ларри парранда | ||
Ҷадвалҳои худро бо илова кардани .table-condensedсинф барои буридани қабати ҳуҷайраҳои ҷадвал ба ду баробар (аз 8px то 4px) мизҳои худро зичтар кунед.
- < синфи ҷадвал = "мизи конденсатсионӣ ҷадвал" >
- …
- </ҷадвал>
| # | Ном | Насаб | Номи корбар |
|---|---|---|---|
| 1 | Марк | Отто | @mdo |
| 2 | Яъқуб | Торнтон | @фарбеҳ |
| 3 | Ларри парранда | ||
Озод ҳис кунед, ки ҳама гуна синфҳои ҷадвалро якҷоя кунед, то намуди зоҳирии гуногунро бо истифода аз ҳама гуна синфҳои дастрас ба даст оред.
- < синфи ҷадвал = "мизи рахи ҷадвали ҷадвали сарҳади ҷадвали конденсатсионӣ" >
- ...
- </ҷадвал>
| Номи пурра | |||
|---|---|---|---|
| # | Ном | Насаб | Номи корбар |
| 1 | Марк | Отто | @mdo |
| 2 | Яъқуб | Торнтон | @фарбеҳ |
| 3 | Ларри парранда | ||
Беҳтарин қисми шаклҳо дар Bootstrap дар он аст, ки ҳама вурудот ва назорати шумо новобаста аз он ки шумо онҳоро дар аломатгузории худ чӣ гуна эҷод мекунед, олиҷаноб мешаванд. Ҳеҷ HTMLи зиёдатӣ талаб карда намешавад, аммо мо намунаҳоро барои онҳое, ки ба он ниёз доранд, пешниҳод мекунем.
Тарҳҳои мураккабтар бо синфҳои мухтасар ва миқёспазир барои ороиши осон ва ҳатмии рӯйдодҳо меоянд, аз ин рӯ шумо дар ҳар қадам фаро гирифта мешавед.
Bootstrap бо дастгирии чор намуди тарҳбандии форма меояд:
Намудҳои гуногуни тарҳбандии формаҳо барои аломатгузорӣ баъзе тағиротро талаб мекунанд, аммо худи идоракунӣ боқӣ мемонад ва ҳамон тавр рафтор мекунанд.
Шаклҳои Bootstrap дорои сабкҳо барои ҳама идоракунии шаклҳои асосӣ ба монанди вуруд, матн ва интихобе, ки шумо интизор будед. Аммо он инчунин бо як қатор ҷузъҳои фармоишӣ, ба монанди вурудоти замимашуда ва пешакӣ ва дастгирии рӯйхати қуттиҳои қайдҳо меояд.
Ҳолатҳо ба монанди хатогӣ, огоҳӣ ва муваффақият барои ҳар як намуди назорати форма дохил карда шудаанд. Ҳамчунин сабкҳо барои назорати маъюбон дохил карда шудаанд.
Bootstrap аломатгузории оддӣ ва услубҳоро барои чаҳор услуби шаклҳои маъмули веб таъмин мекунад.
| Ном | Синф | Тавсифи |
|---|---|---|
| Амудӣ (пешфарз) | .form-vertical (талаб нест) |
Тамғакоғазҳои ҷамъшуда ва ба чап мувофиқшуда дар болои назорат |
| Дар мувофиқат | .form-inline |
Тамғаи ба чап мувофиқшуда ва назорати блоки дохилӣ барои сабки паймон |
| Ҷустуҷӯ | .form-search |
Вуруди ҳамаҷонибаи матн барои эстетикаи маъмулии ҷустуҷӯ |
| Уфуқӣ | .form-horizontal |
Тамғакоғазҳои ба чап ва рост ҳамоҳангшуда дар як сатр бо контролҳо шино кунед |
Пешфарзҳои оқилона ва сабук бидуни аломатгузории иловагӣ.
- < синфи шакл = "хуб" >
- <label> Номи барчасп </label>
- < навъи вуруд = "text" class = "span3" placeholder = "Чизро нависед..." >
- <span class = "help-block" > Намунаи матни кӯмак дар сатҳи блок дар ин ҷо. </span>
- < синфи барчасп = "қуттии қайд" >
- < навъи вуруд = "қуттии қайд" > Маро санҷед
- </label>
- <button type = " submit" class = "btn" > Ирсол < /button>
- </form>
Ба .form-searchформа ва .search-queryба input.
- < синфи форма = "хуб ҷустуҷӯи шакл" >
- < навъи вуруд = "матн" синфи = "дархости ҷустуҷӯи миёна" >
- <button type = " submit" class = "btn" > Ҷустуҷӯ </button>
- </form>
Барои .form-inlineтакмил додани ҳамоҳангсозии амудӣ ва фосилаи идоракунии формаҳо илова кунед.
- < синфи форма = "хуб form-inline" >
- < навъи вуруд = "матн" синфи = "ворид-хурд" ҷойнишин = "почтаи электронӣ" >
- < навъи вуруд = "парол" синфи = "ворид-хурд" ҷойнишин = "парол" >
- < синфи барчасп = "қуттии қайд" >
- < навъи вуруд = "таҳдиқ" > Маро дар хотир доред
- </label>
- <button type = " submit" class = "btn" > Ворид шавед </button>
- </form>
Дар тарафи рост ҳамаи танзимоти пешфарз, ки мо дастгирӣ мекунем, нишон дода шудаанд. Ин аст рӯйхати нишондодашуда:
Бо дарназардошти тарҳбандии шакли намунаи дар боло зикршуда, дар ин ҷо аломатгузорӣ бо гурӯҳи аввалини вуруд ва назорат алоқаманд аст. , .control-group, .control-labelва .controlsсинфҳо ҳама барои ороиш лозиманд.
- < синфи шакл = "форма-уфуқӣ" >
- <маҷмӯаи майдон>
- <legend> Матни афсона </ legend>
- <div class = "control-group" >
- <label class = "control-label" for = "input01" > Вуруди матн </label>
- <div class = "назоратҳо" >
- < навъи вуруд = "матн" синфи = "input-xlarge" id = "input01" >
- <p class = "help-block" > Матни кӯмаки дастгирӣ </p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap услубҳо барои нигаронидашуда ва иёлатҳои аз ҷониби браузер дастгирӣшавандаро disabledфароҳам меорад. Мо Webkit-и пешфарзро нест мекунем outlineва box-shadowдар ҷои он барои :focus.
Он инчунин услубҳои тасдиқи хатоҳо, огоҳиҳо ва муваффақиятро дар бар мегирад. Барои истифода, синфи хаторо ба гирду атроф илова кунед .control-group.
- <маҷмӯаи майдонҳо
- class = "хатои гурӯҳи назоратӣ" >
- …
- </fieldset>
Гурӯҳҳои воридотӣ - бо матни замимашуда ё пешакӣ - роҳи осони додани контексти бештарро барои вурудоти худ таъмин мекунанд. Намунаҳои олӣ аломати @ барои номи корбарони Twitter ё $ барои молия мебошанд.
То v1.4, Bootstrap барои гузоштани онҳо дар атрофи қуттиҳои қайд ва радиоҳо аломатгузории иловагӣ талаб мекард. Акнун, ин як масъалаи оддии такрор кардани он аст <label class="checkbox">, ки <input type="checkbox">.
Қуттиҳои дарунсохт ва радиоҳо низ дастгирӣ карда мешаванд. Танҳо .inlineба ягон .checkboxё илова кунед .radioва шумо тамом шудед.
Барои истифодаи пешоянд ё замимаи воридот дар шакли хаттӣ, ҳатман .add-onва inputдар як сатр бе фосила ҷойгир кунед.
Барои илова кардани матни кӯмак барои воридоти шакли худ, матни ёрирасонро бо <span class="help-inline">ё блоки матнии кӯмакро бо <p class="help-block">пас аз унсури вуруд дохил кунед.
Ба ҷои он ки ҳар як нишона дархости иловагӣ гардонем, мо онҳоро ба спрайт - як даста тасвирҳо дар як файл, ки CSS-ро барои ҷойгир кардани тасвирҳо бо background-position. Ин ҳамон усулест, ки мо дар Twitter.com истифода мебарем ва он барои мо хуб кор кардааст.
Ҳама синфҳои нишонаҳо .icon-барои ҷойгиркунии дурусти номҳо ва миқёс ба мисли ҷузъҳои дигари мо бо префикс гузошта шудаанд. Ин барои пешгирӣ кардани ихтилофҳо бо дигар асбобҳо кӯмак мекунад.
Glyphicons ба мо имкон дод, ки Халфлингҳо дар маҷмӯаи кушодаи мо истифода баранд, то даме ки мо дар ҳуҷҷатҳо истинод ва кредитро пешниҳод кунем. Лутфан дар лоиҳаҳои худ низ ҳамин тавр кунед.
Bootstrap <i>барои ҳама нишонаҳо тегро истифода мебарад, аммо онҳо синфи парванда надоранд - танҳо префикси муштарак. Барои истифода, рамзи зеринро тақрибан дар ҳама ҷо ҷойгир кунед:
- <i class = "icon-search" ></i>
Инчунин сабкҳо барои нишонаҳои баръакс (сафед) мавҷуданд, ки бо як синфи иловагӣ омода шудаанд:
- <i class = "icon-search icon-white" ></i>
140 синф вуҷуд дорад, ки барои нишонаҳои шумо интихоб кунед. Танҳо як <i>барчаспро бо синфҳои мувофиқ илова кунед ва шумо омодаед. Шумо метавонед рӯйхати пурраро дар sprites.less ё худи инҷо дар ин ҳуҷҷат пайдо кунед.
Сарҳо боло! Ҳангоми истифода дар паҳлӯи сатрҳои матн, ба мисли тугмаҳо ё истинодҳои нав, ҳатман пас аз <i>тег барои фосилаи дуруст фосила гузоред.
Нишонаҳо бузурганд, аммо онҳоро дар куҷо истифода бурдан мумкин аст? Инҳоянд чанд идея:
Аслан, дар ҳама ҷое, ки шумо метавонед <i>тег гузоред, шумо метавонед нишона гузоред.
Онҳоро дар тугмаҳо, гурӯҳҳои тугмаҳо барои панели асбобҳо, паймоиш ё вуруди шакли пешакӣ истифода баред.