Друкарскі маштаб

Уся друкарская сетка заснавана на дзвюх зменных 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.

Выкарыстанне націску

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>можна выкарыстоўваць тэг:

Прыклады скарачэнняў

Абрэвіятуры афармляюцца тэкстам у верхнім рэгістры і светлай ніжняй мяжой з пункціраў. У іх таксама ёсць дапаможны курсор пры навядзенні курсора, каб карыстальнікі мелі дадатковую індыкацыю, што нешта будзе паказана пры навядзенні.

HTML - гэта лепшае з часоў нарэзанага хлеба.

Абрэвіятура слова attr - attr .

Каб уключыць цытату, абгарніце <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>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Цэлы лік нападаў lorem і маса
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Нестыляваны

<ul class="unstyled">

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Цэлы лік нападаў lorem і маса
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Замовілі

<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Цэлы лік нападаў lorem і маса
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Апісанне

<dl>

Спісы апісанняў

Спіс апісанняў ідэальна падыходзіць для вызначэння тэрмінаў.

Эўізмод

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Порта Малесуада

Etiam porta sem malesuada magna mollis euismod.

У радку

Абгарніце ўбудаваныя фрагменты кода з дапамогай <code>.

Напрыклад , раздзел < code> < / code > павінен быць абгорнуты як убудаваны .  

Базавы блок

Выкарыстоўвайце <pre>для некалькіх радкоў кода. Не забудзьцеся ператварыць любыя сімвалы ўводкі ў сімвалы Юнікода для правільнага адлюстравання.

<p>Узор тэксту тут...</p>

<папярэдні>
  <p>Узор тэксту тут...</p>
</pre>

Заўвага: пераканайцеся, што код знаходзіцца ў <pre>тэгах як мага бліжэй да левага боку; ён будзе адлюстроўваць усе ўкладкі.

Google Prettify

Вазьміце той жа <pre>элемент і дадайце два дадатковыя класы для палепшанага візуалізацыі.

<p> Прыклад тэксту тут... </p>

< pret class = "prettyprint 
     linenums" >
  <p>Узор тэксту тут...</p>
</pre>

Спампуйце google-code-prettify і праглядзіце readme, каб даведацца, як карыстацца.

<табліца>
  <загаловак>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

Табліцы аўтаматычна стылізуюцца толькі з некалькімі рамкамі для забеспячэння чытальнасці і захавання структуры. З 2.0 .tableклас абавязковы.

<table class = "table" > 
  …
</table>

Пафантазіруйце са сваімі сталамі, дадаўшы зебрападобныя паласы - проста дадайце .table-stripedклас.

Заўвага: у спрайт-табліцах выкарыстоўваецца :nth-childселектар CSS, і ён недаступны ў IE7-IE8.

<table class = "table table-striped" > 
  …
</table>

Дадайце рамкі вакол усяго стала і закругленыя куты ў эстэтычных мэтах.

<table class = "table table-bordered" > 
  …
</table>

Зрабіце свае табліцы больш кампактнымі, дадаўшы .table-condensedклас, каб скараціць запаўненне вочак табліцы напалову (з 8 пікселяў да 4 пікселяў).

<table class = "table table-condensed" > 
  …
</table>

Не саромейцеся камбінаваць любыя класы табліц, каб дасягнуць рознага выгляду, выкарыстоўваючы любы з даступных класаў.

<table class = "table table-stried table-bordered table-condensed" > 
  ...
</table>

Гнуткі HTML і CSS

Лепшая частка формаў у Bootstrap заключаецца ў тым, што ўсе вашы ўводы і элементы кіравання выглядаюць цудоўна, незалежна ад таго, як вы ствараеце іх у сваёй разметцы. Лішні HTML не патрабуецца, але мы прапануем шаблоны для тых, каму ён патрэбны.

Больш складаныя макеты пастаўляюцца з лаканічнымі і маштабаванымі класамі для лёгкага стылю і прывязкі падзей, так што вы будзеце ахоплены на кожным кроку.

Чатыры макеты ўключаны

Bootstrap пастаўляецца з падтрымкай чатырох тыпаў макетаў формаў:

• Вертыкальны (па змаўчанні)
• Пошук
• У радку
• Гарызантальны

Розныя тыпы макетаў формы патрабуюць некаторых зменаў у разметцы, але самі элементы кіравання застаюцца і паводзяць сябе такім жа чынам.

Кантрольныя стану і многае іншае

Формы Bootstrap уключаюць стылі для ўсіх асноўных элементаў кіравання формамі, такіх як увод, тэкставае поле і выбар, які вы чакаеце. Але ён таксама пастаўляецца з шэрагам карыстальніцкіх кампанентаў, такіх як дададзеныя і папярэднія ўводы і падтрымка спісаў сцяжкоў.

Такія стану, як памылка, папярэджанне і поспех, уключаны для кожнага тыпу кантролю формы. Таксама ўключаны стылі для адключаных элементаў кіравання.

З версіяй 2.0 у нас больш лёгкія і разумныя стандартныя налады для стыляў формы. Ніякай дадатковай разметкі, толькі элементы кіравання формай.

Адлюстроўваючы стандартныя стылі WebKit, проста дадайце .form-searchдадатковыя закругленыя палі пошуку.

Уваходы - гэта ўзровень блока для пачатку. Для .form-inlineі .form-horizontalмы выкарыстоўваем inline-block.

Што ўваходзіць

Злева паказаны ўсе элементы кіравання формамі па змаўчанні, якія мы падтрымліваем. Вось маркіраваны спіс:

• увод тэксту (тэкст, пароль, электронная пошта і г.д.)
• сцяжок
• радыё
• выбраць
• множны выбар
• увод файла
• тэкставае поле

Новыя налады па змаўчанні з v2.0

Да версіі 1.4 стандартныя стылі формы Bootstrap выкарыстоўвалі гарызантальны макет. З дапамогай Bootstrap 2 мы знялі гэтае абмежаванне, каб мець разумнейшыя і больш маштабуемыя значэнні па змаўчанні для любой формы.

Перапрацаваныя стану браўзера

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">пасля элемента ўводу.

Кнопкі для дзеянняў

Згодна з пагадненнем, кнопкі павінны выкарыстоўвацца толькі для дзеянняў, а гіперспасылкі - для аб'ектаў. Напрыклад, "Спампаваць" павінна быць кнопкай, а "апошняя дзейнасць" - спасылкай.

Для анкераў і формаў

Стылі кнопак можна ўжываць да чаго заўгодна .btn. Аднак, як правіла, вы хочаце прымяніць іх толькі <a>да <button>элементаў і.

Заўвага: усе кнопкі павінны ўключаць .btnклас. Стылі кнопак павінны прымяняцца да элементаў <button>і для ўзгодненасці.<a>

Некалькі памераў

Любіце большыя ці меншыя гузікі? Майце на гэта!

Першаснае дзеянне Дзеянне

Першаснае дзеянне Дзеянне

Інвалідны стан

Для адключаных кнопак выкарыстоўвайце .btn-disabledдля спасылак і :disabledдля <button>элементаў.

Першаснае дзеянне Дзеянне

Першаснае дзеянне Дзеянне

Кросбраўзерная сумяшчальнасць

У IE9 мы адмяняем градыент на ўсіх кнопках на карысць закругленых кутоў, паколькі IE9 не абразае фонавыя градыенты да вуглоў.

У сувязі з гэтым, IE9 скарыстоўвае адключаныя buttonэлементы, робячы тэкст шэрым з непрыемным тэкставым ценем — на жаль, мы не можам гэта выправіць.

Пабудаваны як спрайт

Замест таго, каб рабіць кожны значок дадатковым запытам, мы сабралі іх у спрайт — кучу малюнкаў у адным файле, які выкарыстоўвае CSS для размяшчэння малюнкаў з дапамогай background-position. Гэта той самы метад, які мы выкарыстоўваем на Twitter.com, і ён добра спрацаваў для нас.

Усе класы абразкоў маюць прэфікс .icon-для правільнай прасторы імёнаў і аб'ёму, як і іншыя нашы кампаненты. Гэта дапаможа пазбегнуць канфліктаў з іншымі інструментамі.

Glyphicons дазволіў нам выкарыстоўваць набор Halflings у нашым наборы інструментаў з адкрытым зыходным кодам, пакуль мы даем спасылку і крэдыт тут, у дакументацыі. Калі ласка, разгледзьце тое ж самае ў сваіх праектах.

Як выкарыстоўваць

У версіі 2.0.0 мы вырашылі выкарыстоўваць <i>тэг для ўсіх нашых значкоў, але ў іх няма класа рэгістра — толькі агульны прэфікс. Для выкарыстання размесціце наступны код дзе заўгодна:

<i class = "icon-search" ></i> 

Ёсць таксама стылі, даступныя для перавернутых (белых) значкоў, гатовых з адным дадатковым класам:

<i class = "icon-search icon-white" ></i> 

Ёсць 120 класаў для вашых значкоў. Проста дадайце <i>тэг з патрэбнымі класамі, і ўсё гатова. Вы можаце знайсці поўны спіс у sprites.less або прама тут, у гэтым дакуменце.

Случаі выкарыстання

Абразкі выдатныя, але дзе іх выкарыстоўваць? Вось некалькі ідэй:

• У якасці візуальных элементаў для бакавой панэлі навігацыі
• Для навігацыі, кіраванай выключна значкамі
• Для кнопак, якія дапамагаюць перадаць сэнс дзеяння
• Са спасылкамі для абмену кантэкстам на месцы прызначэння карыстальніка

Па сутнасці, усюды, дзе вы можаце паставіць <i>тэг, вы можаце паставіць значок.

Абнавіць Каса Выдаліць

Каментуйце Налады Дадатковая інфармацыя