Bootstrap

Базов CSS

Основни HTML елементи, стилизирани и подобрени с разширяеми класове.

Горе главата! Тези документи са за v2.3.2, която вече не се поддържа официално. Вижте най-новата версия на Bootstrap!

Типография

Заглавия

Всички HTML заглавия <h1>до <h6>са налични.

h1. Заглавие 1

h2. Заглавие 2

h3. Заглавие 3

h4. Заглавие 4

h5. Заглавие 5
h6. Заглавие 6

Копие на тялото

Глобалната стойност по подразбиране на Bootstrap е font-size14px , с 20px . Това се прилага към и всички параграфи. Освен това (параграфи) получават долно поле от половината от тяхната височина на реда (10px по подразбиране).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 променливи във 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 .

<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, апартамент 600 <br>
  4.   Сан Франциско, Калифорния 94107 <br>
  5.   <abbr title = "Phone" > P: </abbr> (123) 456-7890 
  6. </address>
  7.  
  8. <адрес>
  9.   <strong> Пълно име </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </address>

Блокови цитати

За цитиране на блокове от съдържание от друг източник във вашия документ.

Цитат по подразбиране

Обвийте <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 = "Изходно заглавие" > Изходно заглавие </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
  • Integer molestie lorem at massa
  • 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. Integer molestie lorem at massa
  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
  • Integer molestie lorem at massa
  • 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>

Описание

Списък с термини със свързаните с тях описания.

Списъци с описания
Списъкът с описания е идеален за дефиниране на термини.
Euismod
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.   <dd> ... </dd>
  4. </dl>

Хоризонтално описание

Подредете термини и описания <dl>един до друг.

Списъци с описания
Списъкът с описания е идеален за дефиниране на термини.
Euismod
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.   <dd> ... </dd>
  4. </dl>

Горе главата!Хоризонталните списъци с описания ще съкратят термините, които са твърде дълги, за да се поберат в корекцията на лявата колона text-overflow. В по-тесни прозорци те ще се променят на подреденото оформление по подразбиране.

Код

В редица

Обвийте вградени фрагменти от код с <code>.

Например <section>трябва да се обвие като вграден. 
  1. Например < code > & lt ; раздел & gt ;</ code > трябва да бъде обвит като вграден .

Основен блок

Използвайте <pre>за няколко реда код. Не забравяйте да избегнете всички ъглови скоби в кода за правилно изобразяване.

<p>Примерен текст тук...</p>
  1. <преди>
  2.   <p>Примерен текст тук...</p>
  3. </pre>

Горе главата!Не забравяйте да запазите кода в <pre>етикетите възможно най-близо до ляво; ще визуализира всички раздели.

По желание можете да добавите .pre-scrollableкласа, който ще зададе максимална височина от 350px и ще предостави лента за превъртане по оста y.

Маси

Стилове по подразбиране

За основен стил—лека подложка и само хоризонтални разделители—добавете основния клас .tableкъм всеки <table>.

# Първо име Фамилия Потребителско име
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Лари птицата @туитър 
  1. < клас на таблица = "таблица" > 
  2.   …
  3. </table>

Избираеми часове

Добавете някой от следните класове към .tableбазовия клас.

.table-striped

Добавя зебра ивици към всеки ред на таблица в рамките на <tbody>чрез :nth-childCSS селектор (не е наличен в IE7-8).

# Първо име Фамилия Потребителско име
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Лари птицата @туитър 
  1. <table class = "table table-striped" > 
  2.   …
  3. </table>

.table-bordered

Добавете граници и заоблени ъгли към масата.

# Първо име Фамилия Потребителско име
1 Марк Ото @mdo
Марк Ото @getbootstrap
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър 
  1. <table class = "table table-bordered" > 
  2.   …
  3. </table>

.table-hover

Активиране на състояние на задържане върху редове на таблица в рамките на <tbody>.

# Първо име Фамилия Потребителско име
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър 
  1. <table class = "table table-hover" > 
  2.   …
  3. </table>

.table-condensed

Прави таблиците по-компактни, като нарязва наполовина подплатата на клетката.

# Първо име Фамилия Потребителско име
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър 
  1. <table class = "table table-condensed" > 
  2.   …
  3. </table>

Незадължителни класове редове

Използвайте контекстуални класове, за да оцветите редовете на таблицата.

Клас Описание
.success Показва успешно или положително действие.
.error Показва опасно или потенциално негативно действие.
.warning Показва предупреждение, което може да изисква внимание.
.info Използва се като алтернатива на стиловете по подразбиране.
# Продукт Плащането е взето Статус
1 ТБ - Месечно 04.01.2012 г Одобрено
2 ТБ - Месечно 04.02.2012 г Отказано
3 ТБ - Месечно 04.03.2012 г В очакване
4 ТБ - Месечно 04.04.2012 г Обадете се за потвърждение 
  1. ...
  2.   < tr class = "success" >
  3.     <td> 1 < /td>
  4.     <td>TB - месечно</ 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.   <thead>
  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 = "чекбокс" > 
  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 = "чекбокс" > 
  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 = "controls" > 
  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 = "controls" > 
  11.       <input type = "password" id = "inputPassword" placeholder = "Password" >   
  12.     </div>
  13.   </div>
  14.   <div class = "control-group" > 
  15.     <div class = "controls" > 
  16.       <label class = "чекбокс" > 
  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 = "чекбокс" > 
  2.   <input type = "checkbox" value = "" >  
  3.   Първият вариант е това и това - не забравяйте да включите защо е страхотно
  4. </label>
  5.  
  6. <label class = "radio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" отметнато >     
  8.   Първият вариант е това и това - не забравяйте да включите защо е страхотно
  9. </label>
  10. <label class = "radio" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  12.   Вариант две може да е нещо друго и избирането му ще премахне избора на опция едно
  13. </label>

Вградени квадратчета за отметка

Добавете .inlineкласа към поредица от квадратчета за отметка или радиостанции за контроли, които се показват на същия ред.

  1. <label class = "вградено поле за отметка" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
  3. </label>
  4. <label class = "вградено поле за отметка" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
  6. </label>
  7. <label class = "вградено поле за отметка" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
  9. </label>

Избира

Използвайте опцията по подразбиране или задайте a multiple="multiple", за да покажете няколко опции наведнъж.


  1. <изберете>
  2.   <опция> 1 </опция>
  3.   <опция> 2 </опция>
  4.   <option> 3 </option>
  5.   <option> 4 </option>
  6.   <опция> 5 </опция>
  7. </select>
  8.  
  9. <select multiple = "multiple" > 
  10.   <опция> 1 </опция>
  11.   <опция> 2 </опция>
  12.   <option> 3 </option>
  13.   <option> 4 </option>
  14.   <опция> 5 </опция>
  15. </select>

Разширяване на контролите на формуляра

Добавяйки към съществуващите контроли на браузъра, Bootstrap включва други полезни компоненти на формуляра.

Добавени и добавени входове

Добавете текст или бутони преди или след всяко текстово въвеждане. Имайте предвид, че selectелементите не се поддържат тук.

Опции по подразбиране

Обвийте an .add-onи an inputс един от два класа, за да добавите текст пред или към вход.

@

0,00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" type = "text" placeholder = "Username" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInput " type = "text" >   
  7.   <span class = "add-on" > .00 </span> 
  8. </div>

Комбиниран

Използвайте двата класа и два екземпляра на .add-on, за да добавите пред и вход.

$ 0,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" > .00 </span> 
  5. </div>

Бутони вместо текст

Вместо <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 = "падащо меню" > 
  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 = "падащо меню" > 
  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 = "падащо меню" > 
  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 = "падащо меню" > 
  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. </select>
  7. <изберете клас = "span2" > 
  8.   ...
  9. </select>
  10. <select class = "span3" > 
  11.   ...
  12. </select>

За множество въведени мрежи на ред използвайте .controls-rowмодификаторния клас за правилно разстояние . Той премества входовете, за да свие празното пространство, задава правилните полета и изчиства плаващото поле.

  1. <div class = "controls" > 
  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 = "имейл" се изисква >

Забранени входове

Добавете disabledатрибута към вход, за да предотвратите въвеждането от потребителя и да задействате малко по-различен изглед.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Деактивирано въвеждане тук..." деактивирано >

Състояния на валидиране

Bootstrap включва стилове за проверка за съобщения за грешка, предупреждение, информация и успех. За да използвате, добавете подходящия клас към околните .control-group.

Може нещо да се е объркало
Моля коригирайте грешката
името е заето
Уаууу! 
  1. <div class = "control-group warning" > 
  2.   <label class = "control-label" for = "inputWarning" > Въвеждане с предупреждение </label>  
  3.   <div class = "controls" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Нещо може да се е объркало </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "control-group error" > 
  10.   <label class = "control-label" for = "inputError" > Въвеждане с грешка </label>  
  11.   <div class = "controls" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Моля, коригирайте грешката </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "control-group info" > 
  18.   <label class = "control-label" for = "inputInfo" > Въвеждане с информация </label>  
  19.   <div class = "controls" > 
  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 = "controls" > 
  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 jankifies деактивираните 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>елемент, за да стилизирате лесно изображения във всеки проект.

140x140 140x140 140x140 
  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-list-alt
  • икона-заключване
  • икона-знаме
  • икона-слушалки
  • icon-volume-off
  • икона-намаляване на звука
  • икона-обем нагоре
  • икона-qrcode
  • икона-баркод
  • икона-етикет
  • етикети за икони
  • иконна книга
  • икона-отметка
  • печат на икони
  • икона-камера
  • икона-шрифт
  • икона-удебелен
  • икона-курсив
  • icon-text-height
  • ширина на текста на иконата
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • списък с икони
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • икона-картина
  • икона-молив
  • икона-карта-маркер
  • настройка на икони
  • икона-оттенък
  • редактиране на икони
  • споделяне на икони
  • икона-проверка
  • икона-преместване
  • икона-стъпка-назад
  • икона-бързо-назад
  • икона-назад
  • игра на икони
  • икона-пауза
  • икона-стоп
  • икона-напред
  • икона-бързо напред
  • икона-стъпка-напред
  • изваждане на икона
  • икона-шеврон-вляво
  • икона-шеврон-вдясно
  • икона-знак плюс
  • икона-знак-минус
  • икона-премахване-знак
  • икона-ок-знак
  • икона-въпрос-знак
  • икона-информационен знак
  • икона-екранна снимка
  • икона-премахване-кръг
  • икона-ок-кръг
  • икона-бан-кръг
  • икона-стрелка-наляво
  • икона-стрелка-надясно
  • икона-стрелка-нагоре
  • икона-стрелка-надолу
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • икона-плюс
  • икона-минус
  • икона-звездичка
  • икона-удивителен-знак
  • икона-дар
  • икона-лист
  • икона-огън
  • икона-око-отворено
  • icon-eye-close
  • икона-предупредителен-знак
  • икона-равнина
  • икона-календар
  • икона-произволна
  • икона-коментар
  • икона-магнит
  • икона-шеврон-нагоре
  • икона-шеврон-надолу
  • икона-ретуит
  • икона-пазарска количка
  • икона-папка-затваряне
  • икона-папка-отворена
  • icon-resize-vertical
  • icon-resize-horizontal
  • икона-hdd
  • икона-мегафон
  • икона-камбана
  • икона-сертификат
  • икона-палец нагоре
  • икона-палец-надолу
  • икона-ръка-дясна
  • икона-ръка-лява
  • икона-ръка нагоре
  • икона-ръка-надолу
  • икона-кръг-стрелка-надясно
  • икона-кръг-стрелка-наляво
  • икона-кръг-стрелка-нагоре
  • икона-кръг-стрелка-надолу
  • икона-глобус
  • икона-гаечен ключ
  • икони-задачи
  • икона-филтър
  • икона-куфарче
  • икона на цял екран

Приписване на глификони

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 = "падащо меню" > 
  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 = "divider" ></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 = "controls" > 
  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>