На верхняй частцы рыштаванняў асноўныя элементы 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 ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
| элемент | Выкарыстанне | Дадаткова |
|---|---|---|
<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">пасля элемента ўводу.
Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.
All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.
Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.
Bootstrap uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:
- <i class="icon-search"></i>
There are also styles available for inverted (white) icons, made ready with one extra class:
- <i class="icon-search icon-white"></i>
There are 120 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.
Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.
Icons are great, but where would one use them? Here are a few ideas:
Essentially, anywhere you can put an <i> tag, you can put an icon.
Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.