Бутстрап

База CSS

Фундаментальныя элементы HTML, стылізаваныя і пашыраныя з дапамогай пашыраемых класаў.

Тыпаграфіка

Загалоўкі

<h1>Даступныя ўсе загалоўкі HTML <h6>.

h1. Загаловак 1

h2. Загаловак 2

h3. Загаловак 3

h4. Загаловак 4

h5. Загаловак 5
h6. Загаловак 6

Асноўная копія

Глабальнае значэнне Bootstrap па змаўчанні font-sizeскладае 14 пікселяў з 20 пікселямі . Гэта датычыцца і ўсіх абзацаў. Акрамя таго, (абзацы) атрымліваюць ніжняе поле ў палову іх вышыні радка (10 пікселяў па змаўчанні).line-height<body><p>

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.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Мецэнат sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Вядучая асноўная копія

Вылучыце абзац, дадаўшы .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class = "lead" > ... </p>

Пабудаваны з Less

Тыпаграфічны маштаб заснаваны на дзвюх зменных LESS у variables.less : @baseFontSizeі @baseLineHeight. Першы - гэта базавы памер шрыфта, які выкарыстоўваецца паўсюль, а другі - базавая вышыня лініі. Мы выкарыстоўваем гэтыя зменныя і некаторую простую матэматыку для стварэння палёў, водступаў і вышынь радкоў для ўсіх нашых тыпаў і шмат іншага. Наладзьце іх, і Bootstrap адаптуецца.

Націск

Скарыстайцеся тэгамі вылучэння HTML па змаўчанні з лёгкімі стылямі.

<small>

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

Гэты радок тэксту павінен разглядацца як дробны шрыфт.

<p> <small> Гэты радок тэксту павінен разглядацца як дробны шрыфт. </small> </p>

Тлусты

Для выдзялення фрагмента тэксту больш шчыльным шрыфтам.

Наступны фрагмент тэксту адлюстроўваецца тлустым шрыфтам .

<strong> выдзелены тлустым шрыфтам </strong>

Курсіў

Для вылучэння фрагмента тэксту курсівам.

Наступны фрагмент тэксту выдзелены курсівам .

<em> адлюстроўваецца як тэкст, выдзелены курсівам </em>

Галаву ўверх!Не саромейцеся выкарыстоўваць <b>і <i>ў HTML5. <b>прызначана для вылучэння слоў або фраз без перадачы дадатковай важнасці, у той час як <i>у асноўным для голасу, тэхнічных тэрмінаў і г.д.

Класы выраўноўвання

Лёгка выраўноўвайце тэкст па кампанентах з дапамогай класаў выраўноўвання тэксту.

Тэкст выраўнаваны па левым краі.

Тэкст выраўнаваны па цэнтры.

Тэкст выраўнаваны па правым краі.

  1. <p class = "text-left" > Тэкст, выраўнаваны па левым краі. </p> 
  2. <p class = "text-center" > Тэкст, выраўнаваны па цэнтры. </p> 
  3. <p class = "text-right" > Тэкст, выраўнаваны па правым краі. </p>

Акцэнтныя заняткі

Перадайце сэнс з дапамогай колеру з некалькімі акцэнтаванымі карыснымі класамі.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

  1. <p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Скарачэнні

Стылізаваная рэалізацыя элемента HTML <abbr>для абрэвіятур і абрэвіятур для паказу разгорнутай версіі пры навядзенні курсора. Скарачэнні з titleатрыбутам маюць светлую пункцірную ніжнюю мяжу і даведкавы курсор пры навядзенні, забяспечваючы дадатковы кантэкст пры навядзенні.

<abbr>

Для пашыранага тэксту пры доўгім навядзенні на абрэвіятуру ўключыце titleатрыбут.

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

<abbr title = "attribute" > attr </abbr>

<abbr class="initialism">

Дадайце .initialismда абрэвіятуры крыху меншы памер шрыфта.

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

<abbr title = "HyperText Markup Language" class = "initialism" > HTML </abbr>

Адрасы

Прадстаўце кантактную інфармацыю для бліжэйшага продка або ўсёй працы.

<address>

Захавайце фарматаванне, заканчваючы ўсе радкі на <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Поўнае імя
[email protected] 
  1. <адрас>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Suite 600 <br>
  4.   Сан-Францыска, Каліфорнія 94107 <br>
  5.   <abbr title = "Тэл." > Тэл .: </abbr> (123) 456-7890 
  6. </адрас>
  7.  
  8. <адрас>
  9.   <strong> Поўнае імя </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </адрас>

Цытаты

Для цытавання блокаў кантэнту з іншай крыніцы ў вашым дакуменце.

Цытата па змаўчанні

Абгарніце <blockquote>любы HTML у якасці цытаты. Для прамых двукоссяў мы рэкамендуем <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цэлы лік posuere erat a ante.

  1. <цытата>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цэлы лік posuere erat a ante. </p>
  3. </blockquote>

Параметры блокавых цытат

Змены стылю і зместу для простых варыяцый стандартнай цытаты.

Называнне крыніцы

Дадайце <small>тэг для ідэнтыфікацыі крыніцы. Абгарніце назву зыходнага твора ў <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цэлы лік posuere erat a ante.

Хтосьці вядомы ў назве крыніцы 
  1. <цытата>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цэлы лік posuere erat a ante. </p>
  3.   <small> Хтосьці вядомы <cite title = "Source Title" > Назва крыніцы </cite></small> 
  4. </blockquote>

Альтэрнатыўныя дысплеі

Выкарыстоўваецца .pull-rightдля цытаты, выраўнаванай па правым краі.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цэлы лік posuere erat a ante.

Хтосьці вядомы ў назве крыніцы 
  1. <blockquote class = "pull-right" > 
  2.   ...
  3. </blockquote>

Спісы

Неўпарадкаваны

Спіс элементаў, у якіх парадак відавочна не мае значэння.

  • 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
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Замовілі

Спіс элементаў, у якіх парадак відавочна мае значэнне .

  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
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

Нестыляваны

Выдаліце ​​стандартныя list-styleі левыя водступы для элементаў спісу (толькі для непасрэдных дзяцей).

  • 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
  1. <ul class = "unstyled" > 
  2.   <li> ... </li>
  3. </ul>

У радку

Размясціце ўсе элементы спіса ў адным радку з inline-blockлёгкай запаўненнем.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  1. <ul class = "inline" > 
  2.   <li> ... </li>
  3. </ul>

Апісанне

Спіс тэрмінаў з адпаведнымі апісаннямі.

Спісы апісанняў
Спіс апісанняў ідэальна падыходзіць для вызначэння тэрмінаў.
Эўізмод
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. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <дд> ... </дд>
  4. </dl>

Гарызантальнае апісанне

Выбудуйце тэрміны і апісанні <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.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
  1. <dl class = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <дд> ... </дд>
  4. </dl>

Галаву ўверх!Гарызантальныя спісы апісанняў будуць абрэзаць тэрміны, якія занадта доўгія, каб змясціцца ў левым слупку text-overflow. У больш вузкіх акнах прагляду яны зменяцца на макет са стосам па змаўчанні.

Код

У радку

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

Напрыклад, <section>трэба абгарнуць як убудаваны. 
  1. Напрыклад , <code > & lt ; раздзел & gt ;</ code > павінен быць абгорнуты як убудаваны .

Базавы блок

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

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

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

Пры жаданні вы можаце дадаць .pre-scrollableклас, які будзе ўсталёўваць максімальную вышыню ў 350 пікселяў і забяспечваць паласу пракруткі па восі Y.

Табліцы

Стылі па змаўчанні

Для асноўнага стылю — лёгкая падкладка і толькі гарызантальныя падзельнікі — дадайце базавы клас .tableу любы <table>.

# Імя Прозвішча Імя карыстальніка
1 Марк Ота @mdo
2 Якаў Торнтан @тоўсты
3 Лары птушка @twitter 
  1. <table class = "table" > 
  2.   …
  3. </table>

Факультатыўныя заняткі

Дадайце любы з наступных класаў да .tableбазавага класа.

.table-striped

Дадае зебрападобныя паласы ў любы радок табліцы ў межах селектара CSS (недаступна ў IE7-8) <tbody>.:nth-child

# Імя Прозвішча Імя карыстальніка
1 Марк Ота @mdo
2 Якаў Торнтан @тоўсты
3 Лары птушка @twitter 
  1. <table class = "table table-striped" > 
  2.   …
  3. </table>

.table-bordered

Дадайце да стала рамкі і закругленыя куты.

# Імя Прозвішча Імя карыстальніка
1 Марк Ота @mdo
Марк Ота @getbootstrap
2 Якаў Торнтан @тоўсты
3 Птушка Лары @twitter 
  1. <table class = "table table-bordered" > 
  2.   …
  3. </table>

.table-hover

Уключыць стан навядзення курсора на радкі табліцы ў межах <tbody>.

# Імя Прозвішча Імя карыстальніка
1 Марк Ота @mdo
2 Якаў Торнтан @тоўсты
3 Птушка Лары @twitter 
  1. <table class = "table table-hover" > 
  2.   …
  3. </table>

.table-condensed

Робіць табліцы больш кампактнымі, разразаючы пракладку вочак напалову.

# Імя Прозвішча Імя карыстальніка
1 Марк Ота @mdo
2 Якаў Торнтан @тоўсты
3 Птушка Лары @twitter 
  1. <table class = "table table-condensed" > 
  2.   …
  3. </table>

Неабавязковыя класы радкоў

Выкарыстоўвайце кантэкстныя класы для афарбоўкі радкоў табліцы.

Клас Апісанне
.success Паказвае на паспяховае або станоўчае дзеянне.
.error Паказвае на небяспечнае або патэнцыйна негатыўнае дзеянне.
.warning Пазначае папярэджанне, якое можа запатрабаваць увагі.
.info Выкарыстоўваецца як альтэрнатыва стандартным стылям.
# Прадукт Аплата прынята Статус
1 Сухоты - Штомесяц 01.04.2012 Зацверджаны
2 Сухоты - Штомесяц 04.02.2012 Адхілена
3 Сухоты - Штомесяц 04.03.2012 У чаканні
4 Сухоты - Штомесяц 04.04.2012 Патэлефануйце, каб пацвердзіць 
  1. ...
  2.   < tr class = "поспех" >
  3.     <td> 1 < /td>
  4.     <td>Туберкулёз - штомесяц</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Зацверджана</ td >
  7.   </ tr >
  8. ...

Разметка табліцы, якая падтрымліваецца

Спіс падтрымоўваных таблічных элементаў HTML і спосабы іх выкарыстання.

Тэг Апісанне
<table> Элемент абгорткі для адлюстравання даных у таблічным фармаце
<thead> Элемент-кантэйнер для радкоў загалоўкаў табліцы ( <tr>) для пазначэння слупкоў табліцы
<tbody> Элемент-кантэйнер для радкоў табліцы ( <tr>) у целе табліцы
<tr> Элемент-кантэйнер для набору ячэек табліцы ( <td>або <th>), якія з'яўляюцца ў адным радку
<td> Ячэйка табліцы па змаўчанні
<th> Спецыяльная ячэйка табліцы для метак слупкоў (ці радкоў, у залежнасці ад аб'ёму і размяшчэння).
<caption> Апісанне або кароткі змест таго, што змяшчае табліца, асабліва карыснае для праграм чытання з экрана 
  1. <табліца>
  2.   <caption> ... </caption>
  3.   <загаловак>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </thead>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </table>

Формы

Стылі па змаўчанні

Асобныя элементы кіравання формы атрымліваюць стыль, але без неабходнага базавага класа <form>або вялікіх змен у разметцы. Вынікі ў складзеныя, выраўнаваныя па левым краі цэтлікі на верхняй частцы элементаў кіравання формы.

Легенда Прыклад тэксту даведкі на ўзроўні блока тут. 
  1. <форма>
  2.   <набор палёў>
  3.     <legend> Легенда </legend>
  4.     <label> Назва этыкеткі </label>
  5.     <input type = "text" placeholder = "Увядзіце што-небудзь..." >  
  6.     <span class = "help-block" > Прыклад тэксту даведкі на ўзроўні блока тут. </span> 
  7.     <label class = "checkbox" > 
  8.       <input type = "checkbox" > Праверце мяне 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Адправіць </button>  
  11.   </fieldset>
  12. </form>

Дадатковыя макеты

У камплекце Bootstrap ёсць тры дадатковыя макеты формы для звычайных выпадкаў выкарыстання.

Форма пошуку

Дадайце .form-searchў форму і .search-queryў <input>для дадатковага ўводу тэксту.

  1. <form class = "form-search" > 
  2.   <input type = "text" class = "input-medium search-query" >  
  3.   <button type = "submit" class = "btn" > Пошук </button>  
  4. </form>

Убудаваная форма

Дадайце .form-inlineдля выраўноўвання па левым краі цэтлікаў і ўбудаваных блокаў для кампактнага макета.

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-small" placeholder = "Email" >   
  3.   <input type = "password" class = "input-small" placeholder = "Password" >   
  4.   <label class = "checkbox" > 
  5.     <input type = "checkbox" > Запомніць мяне 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Увайсці </button>  
  8. </form>

Гарызантальная форма

Выраўнуйце меткі па правым краі і перамесціце іх улева, каб яны з'явіліся ў адным радку з элементамі кіравання. Патрабуецца больш за ўсё змяненняў разметкі ў форме па змаўчанні:

  • Дадаць .form-horizontalу форму
  • Абгарніце этыкеткі і элементы кіравання.control-group
  • Дадаць .control-labelда этыкеткі
  • Загарніце ўсе звязаныя элементы кіравання .controlsдля правільнага выраўноўвання
  1. <form class = "form-horizontal" > 
  2.   <div class = "control-group" > 
  3.     <label class = "control-label" for = "inputEmail" > Электронная пошта </label>  
  4.     <div class = "элементы кіравання" > 
  5.       <input type = "text" id = "inputEmail" placeholder = "Email" >   
  6.     </div>
  7.   </div>
  8.   <div class = "control-group" > 
  9.     <label class = "control-label" for = "inputPassword" > Пароль </label>  
  10.     <div class = "элементы кіравання" > 
  11.       <input type = "password" id = "inputPassword" placeholder = "Password" >   
  12.     </div>
  13.   </div>
  14.   <div class = "control-group" > 
  15.     <div class = "элементы кіравання" > 
  16.       <label class = "checkbox" > 
  17.         <input type = "checkbox" > Запомніць мяне 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Увайсці </button>  
  20.     </div>
  21.   </div>
  22. </form>

Падтрымліваюцца элементы кіравання формамі

Прыклады стандартных элементаў кіравання формамі, якія падтрымліваюцца ў прыкладзе макета формы.

Уваходы

Самы распаўсюджаны кантроль формы, тэкставыя палі ўводу. Уключае падтрымку ўсіх тыпаў HTML5: тэкст, пароль, дата-час, лакальная дата-час, дата, месяц, час, тыдзень, лік, электронная пошта, URL-адрас, пошук, тэлефон і колер.

Патрабуецца выкарыстанне ўказанага typeў любы час.

  1. <input type = "text" placeholder = "Text input" >

Тэкставае поле

Элемент кіравання формай, які падтрымлівае некалькі радкоў тэксту. Пры неабходнасці змяніце rowsатрыбут.

  1. <textarea rows = "3" ></textarea>

Сцяжкі і радыё

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

Па змаўчанні (у стос)


  1. <label class = "checkbox" > 
  2.   <input type = "checkbox" value = "" >  
  3.   Варыянт першы - гэта і гэта - не забудзьцеся ўключыць, чаму гэта выдатна
  4. </label>
  5.  
  6. <label class = "радыё" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" адзначана >     
  8.   Варыянт першы - гэта і гэта - не забудзьцеся ўключыць, чаму гэта выдатна
  9. </label>
  10. <label class = "радыё" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  12.   Варыянт два можа быць чымсьці іншым, і яго выбар адменіць выбар варыянту адзін
  13. </label>

Убудаваныя сцяжкі

Дадайце .inlineклас да серыі сцяжкоў або радыё, каб элементы кіравання з'явіліся ў тым жа радку.

  1. <label class = "checkbox inline" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
  3. </label>
  4. <label class = "checkbox inline" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
  6. </label>
  7. <label class = "checkbox inline" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
  9. </label>

Выбірае

Выкарыстоўвайце параметр па змаўчанні або ўкажыце, multiple="multiple"каб паказаць некалькі варыянтаў адначасова.


  1. <выбраць>
  2.   <параметр> 1 </параметр>
  3.   <параметр> 2 </параметр>
  4.   <параметр> 3 </параметр>
  5.   <параметр> 4 </параметр>
  6.   <параметр> 5 </параметр>
  7. </выбраць>
  8.  
  9. <select multiple = "multiple" > 
  10.   <параметр> 1 </параметр>
  11.   <параметр> 2 </параметр>
  12.   <параметр> 3 </параметр>
  13.   <параметр> 4 </параметр>
  14.   <параметр> 5 </параметр>
  15. </выбраць>

Пашырэнне элементаў кіравання формай

У дадатак да існуючых элементаў кіравання браўзера Bootstrap уключае іншыя карысныя кампаненты формы.

Дададзеныя і дададзеныя ўваходы

Дадайце тэкст або кнопкі да або пасля любога тэкставага ўводу. Звярніце ўвагу, што selectэлементы тут не падтрымліваюцца.

Параметры па змаўчанні

Абгарніце an .add-onі an inputадным з двух класаў, каб дадаць тэкст да ўводу або папярэдне.

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" type = "text" placeholder = "Імя карыстальніка" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInput " type = "text" >   
  7.   <span class = "add-on" > 0,00 </span> 
  8. </div>

Камбінаваныя

Выкарыстоўвайце як класы, так і два асобнікі, .add-onкаб дадаць да ўводу і да яго.

$ .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "add-on" > $ </span> 
  3.   <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  4.   <span class = "add-on" > 0,00 </span> 
  5. </div>

Кнопкі замест тэксту

Замест a <span>з тэкстам выкарыстоўвайце a .btn, каб далучыць кнопку (ці дзве) да ўводу.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton " type = "text" >   
  3.   <button class = "btn" type = "button" > Наперад! </button>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons " type = "text" >   
  3.   <button class = "btn" type = "button" > Пошук </button>  
  4.   <button class = "btn" type = "button" > Параметры </button>  
  5. </div>

Выпадаючыя кнопкі

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  3.   <div class = "btn-group" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  5.       Дзеянне
  6.       <span class = "caret" ></span> 
  7.     </button>
  8.     <ul class = "dropdown-menu" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Дзеянне
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "dropdown-menu" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "prependedDropdownButton" type = "text" >   
  12. </div>
  1. <div class = "input-prepend input-append" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Дзеянне
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "dropdown-menu" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "appendedPrependedDropdownButton " type = "text" >   
  12.   <div class = "btn-group" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  14.       Дзеянне
  15.       <span class = "caret" ></span> 
  16.     </button>
  17.     <ul class = "dropdown-menu" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Сегментаваныя выпадальныя групы

  1. <форма>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <тып уводу = " тэкст" > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     <тып уводу = " тэкст" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

Форма пошуку

  1. <form class = "form-search" > 
  2.   <div class = "input-append" > 
  3.     <input type = "text" class = "span2 search-query" >  
  4.     <button type = "submit" class = "btn" > Пошук </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Пошук </button>  
  8.     <input type = "text" class = "span2 search-query" >  
  9.   </div>
  10. </form>

Кантрольны памер

Выкарыстоўвайце адносныя класы памераў, напрыклад, .input-largeабо супастаўляйце свае ўводы з памерамі слупкоў сеткі з дапамогай .span*класаў.

Уваходы на ўзроўні блока

Прымусіць элемент <input>або <textarea>паводзіць сябе як элемент на ўзроўні блока.

  1. <input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

Адносная памернасць

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >   
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >   
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >   
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >   
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
  6. <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Галаву ўверх!У наступных версіях мы будзем змяняць выкарыстанне гэтых адносных класаў уводу, каб яны адпавядалі нашым памерам кнопак. Напрыклад, .input-largeпавялічыць запаўненне і памер шрыфта ўводу.

Памер сеткі

Выкарыстоўвайце .span1для .span12ўводу, які адпавядае аднолькавым памерам слупкоў сеткі.

  1. <input class = "span1" type = "text" placeholder = ".span1" >   
  2. <input class = "span2" type = "text" placeholder = ".span2" >   
  3. <input class = "span3" type = "text" placeholder = ".span3" >   
  4. <select class = "span1" > 
  5.   ...
  6. </выбраць>
  7. <select class = "span2" > 
  8.   ...
  9. </выбраць>
  10. <select class = "span3" > 
  11.   ...
  12. </выбраць>

Для некалькіх уводаў сеткі ў радку выкарыстоўвайце .controls-rowклас мадыфікатара для правільнага інтэрвалу . Ён перамяшчае ўваходы, каб згарнуць прабелы, усталёўвае належныя палі і ачышчае паплавок.

  1. <div class = "элементы кіравання" > 
  2.   <input class = "span5" type = "text" placeholder = ".span5" >   
  3. </div>
  4. <div class = "controls controls-row" > 
  5.   <input class = "span4" type = "text" placeholder = ".span4" >   
  6.   <input class = "span1" type = "text" placeholder = ".span1" >   
  7. </div>
  8. ...

Нерэдагуемыя ўваходы

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

Нейкая каштоўнасць тут 
  1. <span class = "input-xlarge uneditable-input" > Некаторае значэнне тут </span>

Фарміруйце дзеянні

Заканчвайце форму групай дзеянняў (кнопак). Пры размяшчэнні ў межах .form-actions, кнопкі будуць аўтаматычна адступаць у адну лінію з элементамі кіравання формы.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > Захаваць змены </button>  
  3.   <button type = "button" class = "btn" > Адмена </button>  
  4. </div>

Тэкст даведкі

Убудаваная і блочная падтрымка тэксту даведкі, які з'яўляецца вакол элементаў кіравання формы.

Убудаваная даведка

Убудаваны тэкст даведкі 
  1. <input type = "text" ><span class = "help-inline" > Убудаваны тэкст даведкі </span>

Заблакіраваць дапамогу

Больш доўгі блок тэксту даведкі, які разбіваецца на новы радок і можа выходзіць за межы аднаго радка. 
  1. <input type = "text" ><span class = "help-block" > Больш доўгі блок тэксту даведкі, які разбіваецца на новы радок і можа выходзіць за межы аднаго радка. </span>

Станы кантролю формы

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

Фокус уводу

Мы выдаляем outlineстылі па змаўчанні з некаторых элементаў кіравання формай і ўжываем box-shadowзамест іх для :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Гэта ў фокусе..." >

Няправільныя ўводы

Увод стылю праз функцыянальнасць браўзера па змаўчанні з дапамогай :invalid. Укажыце type, дадайце requiredатрыбут, калі поле не з'яўляецца абавязковым, і (калі дастасавальна) укажыце pattern.

Гэта недаступна ў версіях Internet Explorer 7-9 з-за адсутнасці падтрымкі псеўдаселектараў CSS.

  1. <input class = "span3" type = "email" required >

Адключаныя ўваходы

Дадайце disabledатрыбут на ўвод, каб прадухіліць увод карыстальнікам і выклікаць крыху іншы выгляд.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Увод тут адключаны..." адключаны >

Станы праверкі

Bootstrap уключае стылі праверкі для паведамленняў аб памылках, папярэджаннях, інфармацыі і аб паспяховым выкананні. Для выкарыстання дадайце адпаведны клас у навакольны .control-group.

Магчыма, нешта пайшло не так
Калі ласка, выпраўце памылку
Імя карыстальніка занята
Ура! 
  1. <div class = "папярэджанне кантрольнай групы" > 
  2.   <label class = "control-label" for = "inputWarning" > Увод з папярэджаннем </label>  
  3.   <div class = "элементы кіравання" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Магчыма, нешта пайшло не так </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "памылка кантрольнай групы" > 
  10.   <label class = "control-label" for = "inputError" > Увод з памылкай </label>  
  11.   <div class = "элементы кіравання" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Выпраўце памылку </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "інфармацыя пра групу кіравання" > 
  18.   <label class = "control-label" for = "inputInfo" > Увод з інфармацыяй </label>  
  19.   <div class = "элементы кіравання" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Імя карыстальніка ўжо занята </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "control-group success" > 
  26.   <label class = "control-label" for = "inputSuccess" > Паспяховы ўвод </label>  
  27.   <div class = "элементы кіравання" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Ура! </span> 
  30.   </div>
  31. </div>

Гузікі

Кнопкі па змаўчанні

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

Кнопка клас="" Апісанне
btn Стандартная шэрая кнопка з градыентам
btn btn-primary Забяспечвае дадатковую візуальную вагу і вызначае асноўнае дзеянне ў наборы кнопак
btn btn-info Выкарыстоўваецца як альтэрнатыва стандартным стылям
btn btn-success Паказвае на паспяховае або станоўчае дзеянне
btn btn-warning Паказвае, што з гэтым дзеяннем трэба быць асцярожным
btn btn-danger Паказвае на небяспечнае або патэнцыйна негатыўнае дзеянне
btn btn-inverse Альтэрнатыўная цёмна-шэрая кнопка, не прывязаная да семантычнага дзеяння або выкарыстання
btn btn-link Паменшыце падкрэсліванне кнопкі, зрабіўшы яе падобнай на спасылку, захаваўшы паводзіны кнопкі

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

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

Памеры гузікаў

Неабходныя большыя ці меншыя гузікі? Дадайце .btn-large, .btn-small, або .btn-miniдля дадатковых памераў.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Вялікая кнопка </button>  
  3.   <button class = "btn btn-large" type = "button" > Вялікая кнопка </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Кнопка па змаўчанні </button>  
  7.   <button class = "btn" type = "button" > Кнопка па змаўчанні </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Маленькая кнопка </button>  
  11.   <button class = "btn btn-small" type = "button" > Маленькая кнопка </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Міні-кнопка </button>  
  15.   <button class = "btn btn-mini" type = "button" > Міні-кнопка </button>  
  16. </p>

Стварыце кнопкі ўзроўню блока — тыя, што ахопліваюць поўную шырыню бацькоўскага — шляхам дадання .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Кнопка ўзроўню блока </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Кнопка ўзроўню блока </button>

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

Зрабіце так, каб кнопкі выглядалі непрыдатнымі для націскання, знікнуўшы іх на 50%.

Анкерны элемент

Дадайце .disabledклас да <a>кнопак.

Першаснае звяно Спасылка 

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > Асноўная спасылка </a>  
  2. <a href = "#" class = "btn btn-large disabled" > Спасылка </a>

Галаву ўверх!Мы выкарыстоўваем .disabledтут у якасці карыснага класа, падобнага да звычайнага .activeкласа, таму прэфікс не патрабуецца. Акрамя таго, гэты клас прызначаны толькі для эстэтыкі; вы павінны выкарыстоўваць уласны JavaScript, каб адключыць спасылкі тут.

Кнопкавы элемент

Дадайце disabledатрыбут да <button>кнопак.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Асноўная кнопка </button>   
  2. <button type = "button" class = "btn btn-large" disabled > Кнопка </button>

Адзін клас, некалькі тэгаў

Выкарыстоўвайце .btnклас для элементаў <a>, <button>, або .<input>

Спасылка 
  1. <a class = "btn" href = "" > Спасылка </a>  
  2. <button class = "btn" type = "submit" > Кнопка </button>  
  3. <input class = "btn" type = "button" value = "Input" >   
  4. <input class = "btn" type = "submit" value = "Submit" >

У якасці лепшай практыкі паспрабуйце падабраць элемент у адпаведнасці з вашым кантэкстам, каб забяспечыць адпаведную рэндэрынг у розных браўзерах. Калі ў вас ёсць input, выкарыстоўвайце <input type="submit">для сваёй кнопкі.

Малюнкі

Дадайце класы да <img>элемента, каб лёгка стылізаваць выявы ў любым праекце.

140х140 140х140 140х140 
  1. <img src = "..." class = "img-rounded" >  
  2. <img src = "..." class = "img-circle" >  
  3. <img src = "..." class = "img-polaroid" >

Галаву ўверх! .img-roundedі .img-circleне працуюць у IE7-8 з-за адсутнасці border-radiusпадтрымкі.

Абразкі ад Glyphicons

Значкі значкоў

140 значкоў у выглядзе спрайтаў, даступных у цёмна-шэрым (па змаўчанні) і белым колерах, прадастаўлены Glyphicons .

  • абраз-шклярус
  • абраз-муз
  • значок-пошук
  • абразок-канверт
  • абраз-сэрца
  • абраз-зорка
  • значок-зорка-пусты
  • значок карыстальніка
  • абраз-фільм
  • значок-й-вялік
  • абразок-й
  • значок-й-спіс
  • значок-ок
  • значок-выдаліць
  • icon-zoom-in
  • icon-zoom-out
  • значок выкл
  • значок-сігнал
  • значок-вінцік
  • значок-сметніца
  • абраз-дом
  • значок-файл
  • абраз-час
  • абраз-дарога
  • значок-загрузка-альт
  • значок загрузкі
  • загрузка значкоў
  • icon-box
  • абразок-гульня-кружок
  • значок-паўтор
  • абнавіць значок
  • значок-спіс-альт
  • значок-замак
  • абраз-сцяг
  • значок-навушнікі
  • icon-volume-off
  • значок памяншэння гучнасці
  • icon-volume-up
  • значок-qrcode
  • значок-штрых-код
  • значок-тэг
  • значкі-тэгі
  • іконнік
  • значок-закладка
  • абраз-друк
  • значок-фотаапарат
  • значок-шрыфт
  • абразок-тлусты
  • абразок-курсіў
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • значок-спіс
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • абраз-карціна
  • значок-аловак
  • значок-карта-маркер
  • абразок-адрэгуляваць
  • абраз-адценне
  • значок-рэдагаваць
  • значок-доля
  • значок-праверка
  • значок-ход
  • значок-крок-назад
  • icon-fast-backward
  • значок-назад
  • абраз-п'еса
  • значок-паўза
  • значок-стоп
  • значок-наперад
  • icon-fast-forward
  • значок-крок-наперад
  • значок-выкід
  • значок-шаўрон-злева
  • icon-chevron-справа
  • значок-плюс
  • значок-мінус-знак
  • значок-выдаліць-знак
  • значок-ок-знак
  • значок-пытальнік-знак
  • значок-інфармацыя-знак
  • значок-скрыншот
  • значок-выдаліць-круг
  • значок-ок-круг
  • значок-бан-круг
  • значок-стрэлка-налева
  • icon-arrow-right
  • значок-стрэлка-уверх
  • значок-стрэлка-ўніз
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • значок-плюс
  • значок-мінус
  • значок-зорачка
  • значок-клічнік-знак
  • ікона-дар
  • абраз-ліст
  • абраз-вогнішча
  • абраз-вока-адкрыць
  • значок-вока-закрыць
  • значок-папярэджанне-знак
  • значок-плоскасць
  • абразок-каляндар
  • значок-выпадковы
  • значок-каментар
  • абразок-магніт
  • значок-шаўрон уверх
  • значок-шаўрон уніз
  • значок-рэтвіт
  • значок-кошык
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • значок-hdd
  • абразок-мегафон
  • абраз-звон
  • ікона-грамата
  • значок-палец уверх
  • icon-thumbs-down
  • значок-рука-права
  • значок-рука-лева
  • значок-рука ўверх
  • абразок-з рук
  • значок-круг-стрэлка-направа
  • значок-круг-стрэлка-налева
  • icon-circle-arrow-up
  • значок-круг-стрэлка-ўніз
  • абраз-глобус
  • іконнік
  • значкі-заданні
  • значок-фільтр
  • абразок-партфель
  • значок на ўвесь экран

Атрыбуцыя гліфіконаў

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

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

Усе значкі патрабуюць <i>тэга з унікальным класам з прэфіксам icon-. Для выкарыстання змесціце наступны код дзе заўгодна:

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

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

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

Галаву ўверх!Пры выкарыстанні побач радкоў тэксту, як у кнопках або навігацыйных спасылках, не забудзьцеся пакінуць прабел пасля <i>тэга для правільнага інтэрвалу.

Прыклады значкоў

Выкарыстоўвайце іх у кнопках, групах кнопак для панэлі інструментаў, навігацыі або ў папярэдніх формах.

Гузікі

Група кнопак на панэлі інструментаў кнопак
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div>
  8. </div>
Выпадальнае меню ў групе кнопак
Карыстальнік 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Карыстальнік </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "dropdown-menu" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Рэдагаваць </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Выдаліць </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Забаніць </a></li>  
  8.     <li class = "падзельнік" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Зрабіць адміністратарам </a></li>  
  10.   </ul>
  11. </div>
Памеры гузікаў
Зорка Зорка Зорка 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Зорка </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Зорка </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Зорка </a>

Навігацыя

  1. <ul class = "nav nav-list" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Галоўная </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> Бібліятэка </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Праграмы </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Рознае </a></li>  
  6. </ul>

Палі формы

  1. <div class = "control-group" > 
  2.   <label class = "control-label" for = "inputIcon" > Адрас электроннай пошты </label>  
  3.   <div class = "элементы кіравання" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>