На верхняй частцы рыштаванняў асноўныя элементы HTML стылізаваны і пашыраны з дапамогай пашыраемых класаў, каб забяспечыць свежы, паслядоўны выгляд і адчуванне.
Уся друкарская сетка заснавана на дзвюх зменных Less у нашым файле variables.less: @baseFontSizeі @baseLineHeight. Першы - гэта базавы памер шрыфта, які выкарыстоўваецца паўсюль, а другі - базавая вышыня лініі.
Мы выкарыстоўваем гэтыя зменныя і некаторую матэматыку, каб стварыць палі, запаўненні і вышыню радкоў для ўсіх нашых тыпаў і шмат іншага.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Вылучыце абзац, дадаўшы .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
| элемент | Выкарыстанне | Дадаткова |
|---|---|---|
<strong> |
Для вылучэння фрагмента тэксту важным | Няма |
<em> |
Для выдзялення націскам фрагмента тэксту | Няма |
<abbr> |
Размяшчае абрэвіятуры і абрэвіятуры, каб паказаць разгорнутую версію пры навядзенні курсора | Уключыце неабавязковы .initialismклас для вялікіх скарачэнняў. |
<address> |
Для атрымання кантактнай інфармацыі для яго бліжэйшага продка або ўсёй працы | Захаваць фарматаванне, заканчваючы ўсе радкі на<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Mecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
Заўвага: Вы можаце выкарыстоўваць <b>і <i>ў HTML5, але іх выкарыстанне крыху змянілася. <b>прызначана для вылучэння слоў або фраз без перадачы дадатковай важнасці, у той час як <i>у асноўным для голасу, тэхнічных тэрмінаў і г.д.
Вось два прыклады таго, як <address>можна выкарыстоўваць тэг:
Скарачэнні з titleатрыбутам маюць светлую пункцірную ніжнюю мяжу і дапаможны курсор пры навядзенні. Гэта дае карыстальнікам дадатковую індыкацыю, што нешта будзе паказана пры навядзенні курсора.
Дадайце initialismклас да абрэвіятуры, каб павялічыць друкарскую гармонію, надаўшы яму крыху меншы памер тэксту.
HTML - гэта лепшае з часоў нарэзанага хлеба.
Абрэвіятура слова attr - attr .
| элемент | Выкарыстанне | Дадаткова |
|---|---|---|
<blockquote> |
Элемент блочнага ўзроўню для цытавання кантэнту з іншай крыніцы | Дадаць .pull-leftі .pull-rightкласы для плаваючых варыянтаў |
<small> |
Неабавязковы элемент для дадання цытаты, якая паказваецца карыстальнікам, звычайна аўтара з назвай працы | Размесціце <cite>вакол загалоўка або назвы крыніцы |
Каб уключыць цытату, абгарніце <blockquote>любы HTML у якасці цытаты. Для прамых двукоссяў мы рэкамендуем <p>.
Уключыце неабавязковы <small>элемент для спасылкі на крыніцу, і вы атрымаеце працяжнік —перад ім у мэтах стылю.
- <цытата>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
- <small> Нехта вядомы </small>
- </blockquote>
Цытаты па змаўчанні маюць наступны стыль:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Нехта вядомы ў працоўным корпусе
Каб змясціць цытату справа, дадайце class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Нехта вядомы ў працоўным корпусе
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Галаву ўверх! Гарызантальныя спісы апісанняў будуць абрэзаць тэрміны, якія занадта доўгія, каб змясціцца ў левым слупку выпраўлення text-overflow. У больш вузкіх акнах прагляду яны зменяцца на макет са стосам па змаўчанні.
Абгарніце ўбудаваныя фрагменты кода з дапамогай <code>.
- Напрыклад , раздзел < code> < / code > павінен быць абгорнуты як убудаваны .
Выкарыстоўвайце <pre>для некалькіх радкоў кода. Не забудзьцеся зняць любыя вуглавыя дужкі ў кодзе для правільнай візуалізацыі.
<p>Узор тэксту тут...</p>
- <папярэдні>
- <p>Узор тэксту тут...</p>
- </pre>
Заўвага: пераканайцеся, што код знаходзіцца ў <pre>тэгах як мага бліжэй да левага боку; ён будзе адлюстроўваць усе ўкладкі.
Пры жаданні вы можаце дадаць .pre-scrollableклас, які будзе ўсталёўваць максімальную вышыню 350 пікселяў і забяспечваць паласу пракруткі па восі Y.
Вазьміце той жа <pre>элемент і дадайце два дадатковыя класы для палепшанага візуалізацыі.
- <p> Прыклад тэксту тут... </p>
- < pret class = "prettyprint
- linenums" >
- <p>Узор тэксту тут...</p>
- </pre>
Спампуйце google-code-prettify і праглядзіце readme, каб даведацца, як карыстацца.
| Тэг | Апісанне |
|---|---|
<table> |
Элемент абгорткі для адлюстравання даных у таблічным фармаце |
<thead> |
Элемент-кантэйнер для радкоў загалоўкаў табліцы ( <tr>) для пазначэння слупкоў табліцы |
<tbody> |
Элемент-кантэйнер для радкоў табліцы ( <tr>) у целе табліцы |
<tr> |
Элемент-кантэйнер для набору ячэек табліцы ( <td>або <th>), якія з'яўляюцца ў адным радку |
<td> |
Ячэйка табліцы па змаўчанні |
<th> |
Спецыяльная ячэйка табліцы для метак слупкоў (ці радкоў, у залежнасці ад аб'ёму і размяшчэння) Павінна выкарыстоўвацца ў a <thead> |
<caption> |
Апісанне або кароткі змест таго, што змяшчае табліца, асабліва карыснае для праграм чытання з экрана |
- <табліца>
- <загаловак>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| Імя | Клас | Апісанне |
|---|---|---|
| Па змаўчанні | Няма | Ніякіх стыляў, толькі слупкі і радкі |
| Базавы | .table |
Толькі гарызантальныя лініі паміж радамі |
| Аблямаваны | .table-bordered |
Закругляе куты і дадае знешнюю мяжу |
| Паласа-зебра | .table-striped |
Дадае светла-шэры колер фону ў няцотныя радкі (1, 3, 5 і г.д.) |
| Згушчаны | .table-condensed |
Скарачае вертыкальнае запаўненне напалову, ад 8 пікселяў да 4 пікселяў, ва ўсіх элементах tdіth |
Табліцы аўтаматычна стылізуюцца толькі з некалькімі рамкамі для забеспячэння чытальнасці і захавання структуры. З 2.0 .tableклас абавязковы.
- <table class = "table" >
- …
- </table>
| # | Імя | Прозвішча | Імя карыстальніка |
|---|---|---|---|
| 1 | Марк | Ота | @mdo |
| 2 | Якаў | Торнтан | @тоўсты |
| 3 | Лары | птушка |
Пафантазіруйце са сваімі сталамі, дадаўшы зебрападобныя паласы - проста дадайце .table-stripedклас.
Заўвага: паласатыя табліцы выкарыстоўваюць :nth-childселектар CSS і недаступны ў IE7-IE8.
- <table class = "table table-striped" >
- …
- </table>
| # | Імя | Прозвішча | Імя карыстальніка |
|---|---|---|---|
| 1 | Марк | Ота | @mdo |
| 2 | Якаў | Торнтан | @тоўсты |
| 3 | Лары | птушка |
Дадайце рамкі вакол усяго стала і закругленыя куты ў эстэтычных мэтах.
- <table class = "table table-bordered" >
- …
- </table>
| # | Імя | Прозвішча | Імя карыстальніка |
|---|---|---|---|
| 1 | Марк | Ота | @mdo |
| Марк | Ота | @getbootstrap | |
| 2 | Якаў | Торнтан | @тоўсты |
| 3 | Птушка Лары | ||
Зрабіце свае табліцы больш кампактнымі, дадаўшы .table-condensedклас, каб скараціць запаўненне вочак табліцы напалову (з 8 пікселяў да 4 пікселяў).
- <table class = "table table-condensed" >
- …
- </table>
| # | Імя | Прозвішча | Імя карыстальніка |
|---|---|---|---|
| 1 | Марк | Ота | @mdo |
| 2 | Якаў | Торнтан | @тоўсты |
| 3 | Птушка Лары | ||
Не саромейцеся камбінаваць любыя класы табліц, каб дасягнуць рознага выгляду, выкарыстоўваючы любы з даступных класаў.
- <table class = "table table-stried table-bordered table-condensed" >
- ...
- </table>
| Поўнае імя | |||
|---|---|---|---|
| # | Імя | Прозвішча | Імя карыстальніка |
| 1 | Марк | Ота | @mdo |
| 2 | Якаў | Торнтан | @тоўсты |
| 3 | Птушка Лары | ||
Лепшая частка формаў у Bootstrap заключаецца ў тым, што ўсе вашы ўводы і элементы кіравання выглядаюць цудоўна, незалежна ад таго, як вы ствараеце іх у сваёй разметцы. Лішні HTML не патрабуецца, але мы прапануем шаблоны для тых, каму ён патрэбны.
Больш складаныя макеты пастаўляюцца з лаканічнымі і маштабаванымі класамі для лёгкага стылю і прывязкі падзей, так што вы будзеце ахоплены на кожным кроку.
Bootstrap пастаўляецца з падтрымкай чатырох тыпаў макетаў формаў:
Розныя тыпы макетаў формы патрабуюць некаторых зменаў у разметцы, але самі элементы кіравання застаюцца і паводзяць сябе такім жа чынам.
Формы Bootstrap уключаюць стылі для ўсіх асноўных элементаў кіравання формамі, такіх як увод, тэкставае поле і выбар, які вы чакаеце. Але ён таксама пастаўляецца з шэрагам карыстальніцкіх кампанентаў, такіх як дададзеныя і папярэднія ўводы і падтрымка спісаў сцяжкоў.
Такія стану, як памылка, папярэджанне і поспех, уключаны для кожнага тыпу кантролю формы. Таксама ўключаны стылі для адключаных элементаў кіравання.
Bootstrap забяспечвае простую разметку і стылі для чатырох стыляў агульных вэб-формаў.
| Імя | Клас | Апісанне |
|---|---|---|
| Вертыкальны (па змаўчанні) | .form-vertical (не патрабуецца) |
Складаныя, выраўнаваныя па левым краі надпісы над элементамі кіравання |
| У радку | .form-inline |
Этыкетка з выраўноўваннем па левым краі і ўбудаваныя элементы кіравання для кампактнага стылю |
| Пошук | .form-search |
Экстракруглы ўвод тэксту для тыповай эстэтыкі пошуку |
| Гарызантальны | .form-horizontal |
Плаваюць па левым краі, выраўнаваныя па правым краі, у тым жа радку, што і элементы кіравання |
Разумныя і лёгкія налады па змаўчанні без дадатковай разметкі.
- <form class = "ну" >
- <label> Назва этыкеткі </label>
- <input type = "text" class = "span3" placeholder = "Увядзіце што-небудзь..." >
- <span class = "help-block" > Прыклад тэксту даведкі на ўзроўні блока тут. </span>
- <label class = "checkbox" >
- <input type = "checkbox" > Праверце мяне
- </label>
- <button type = "submit" class = "btn" > Адправіць </button>
- </form>
Дадаць .form-searchу форму і .search-queryў input.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > Пошук </button>
- </form>
Дадайце .form-inlineда вытанчанасці вертыкальнае выраўноўванне і інтэрвал элементаў кіравання формамі.
- <form class = "well form-inline" >
- <input type = "text" class = "input-small" placeholder = "Email" >
- <input type = "password" class = "input-small" placeholder = "Password" >
- <label class = "checkbox" >
- <input type = "checkbox" > Запомніць мяне
- </label>
- <button type = "submit" class = "btn" > Увайсці </button>
- </form>
Справа паказаны ўсе элементы кіравання формамі па змаўчанні, якія мы падтрымліваем. Вось маркіраваны спіс:
Улічваючы прыведзены вышэй прыклад макета формы, вось разметка, звязаная з першай групай уводу і кіравання. Усе класы .control-group, .control-label, і неабходныя для стылю..controls
- <form class = "form-horizontal" >
- <набор палёў>
- <legend> Тэкст легенды </legend>
- <div class = "control-group" >
- <label class = "control-label" for = "input01" > Увод тэксту </label>
- <div class = "элементы кіравання" >
- <input type = "text" 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 або $ для фінансаў.
Да версіі 1.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 дазволіў нам выкарыстоўваць набор Halflings у нашым наборы інструментаў з адкрытым зыходным кодам, пакуль мы даем спасылку і крэдыт тут, у дакументацыі. Калі ласка, разгледзьце тое ж самае ў сваіх праектах.
Bootstrap выкарыстоўвае <i>тэг для ўсіх значкоў, але ў іх няма класа case — толькі агульны прэфікс. Для выкарыстання размесціце наступны код дзе заўгодна:
- <i class = "icon-search" ></i>
Ёсць таксама стылі, даступныя для перавернутых (белых) значкоў, гатовых з адным дадатковым класам:
- <i class = "icon-search icon-white" ></i>
Ёсць 140 класаў для вашых значкоў. Проста дадайце <i>тэг з патрэбнымі класамі, і ўсё гатова. Вы можаце знайсці поўны спіс у sprites.less або прама тут, у гэтым дакуменце.
Галаву ўверх! Пры выкарыстанні побач радкоў тэксту, як у кнопках або навігацыйных спасылках, не забудзьцеся пакінуць прабел пасля <i>тэга для правільнага інтэрвалу.
Абразкі выдатныя, але дзе іх выкарыстоўваць? Вось некалькі ідэй:
Па сутнасці, усюды, дзе вы можаце паставіць <i>тэг, вы можаце паставіць значок.
Выкарыстоўвайце іх у кнопках, групах кнопак для панэлі інструментаў, навігацыі або ў папярэдніх формах.