Наслови

Сите HTML наслови <h1>се <h6>достапни.

h1. Заглавие 1

h2. Заглавие 2

h3. Заглавие 3

h4. Заглавие 4

h5. Заглавие 5

h6. Заглавие 6

Тело копија

Глобалниот стандард на Bootstrap е font-size14px , со 20px . Ова се применува на и сите параграфи. Покрај тоа, (пасусите) добиваат долна маргина од половина од нивната висина на линијата (стандардно 10 px).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 ultrices 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.

Maecenas 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 = "олово" > ... </p>

Изграден со помалку

Типографската скала се заснова на две LESS променливи во променливите.помалку : @baseFontSizeи @baseLineHeight. Првата е основната големина на фонтот што се користи насекаде, а втората е висината на основната линија. Ги користиме тие променливи и некоја едноставна математика за да создадеме маргини, облоги и височини на линии од сите наши типови и многу повеќе. Приспособете ги и Bootstrap се прилагодува.

Нагласување

Користете ги стандардните ознаки за нагласување на HTML со лесни стилови.

`<small>`

За де-нагласување на линија или блокови од текст, користете ја малата ознака.

Овој ред текст е наменет да се третира како ситно печатење.

<p> <small> Овој ред текст е наменет да се третира како ситно печатење. </small> </p>

Задебелен

За нагласување фрагмент од текст со потешка тежина на фонтот.

Следниот дел од текстот е прикажан како задебелен текст .

<strong> прикажан како задебелен текст </strong>

Закосени букви

За нагласување на фрагмент од текст со закосени букви.

Следниот фрагмент од текстот е прикажан како курзив текст .

<em> изречена како курзив текст </em>

Главите горе!Слободно користете <b>и <i>во HTML5. <b>има за цел да ги потенцира зборовите или фразите без да пренесе дополнителна важност, додека <i>е претежно за гласовни, технички термини итн.

Класи за усогласување

Лесно порамнете го текстот со компонентите со класи на порамнување текст.

Лево порамнет текст.

Текст подреден во центарот.

Десно порамнет текст.

<p class = "text-left" > Лево порамнет текст. </p> 
<p class = "text-center" > Текст подреден во центарот. </p> 
<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.

Енеан еу лео квам. Pellentesque ornare sem lacinia quam venenatis.

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

<p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
<p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "текст-грешка" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = „текст-успех“ > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Кратенки

Стилизирана имплементација на елементот на HTML <abbr>за кратенки и акроними за прикажување на проширената верзија на лебди. Кратенките со titleатрибут имаат светло испреплетена долна граница и покажувач за помош при лебдењето, што обезбедува дополнителен контекст при лебдењето.

`<abbr>`

За проширен текст на долго лебдење на кратенката, вклучете го titleатрибутот.

Кратенка од зборот атрибут е attr .

<abbr title = "атрибут" > attr </abbr>

`<abbr class="initialism">`

Додајте .initialismво кратенка за малку помала големина на фонтот.

HTML е најдоброто нешто од исечениот леб.

<abbr title = "Јазик за означување на хипертекст" class = "иницијализам" > HTML </abbr>

Адреси

Презентирајте информации за контакт за најблискиот предок или целото дело.

`<address>`

Зачувајте го форматирањето завршувајќи ги сите редови со <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Целосно име
[email protected]

<адреса>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Suite 600 <br>
  Сан Франциско, CA 94107 <br>
  <abbr title = "Телефон" > П: </abbr> (123) 456-7890 
</address>
 
<адреса>
  <strong> Целосно име </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</address>

Блокцитати

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

Стандарден блок цитат

Завиткајте <blockquote>околу кој било HTML како цитат. За директни цитати препорачуваме <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број posuere erat a ante.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број posuere erat a ante. </p>
</blockquote>

Опции за блокирање на цитати

Стилот и содржината се менуваат за едноставни варијации на стандарден блок цитат.

Именување на извор

Додадете <small>ознака за идентификување на изворот. Завиткајте го името на изворната работа во <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број posuere erat a ante.
Некој познат во изворниот наслов

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број posuere erat a ante. </p>
  <small> Некој познат <cite title = "Source Title" > Наслов на изворот </cite></small> 
</blockquote>

Алтернативни прикази

Употребете .pull-rightза пловечки, десно порамнет блок цитат.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број posuere erat a ante.
Некој познат во изворниот наслов

<blockquote class = „повлечете десно“ > 
  ...
</blockquote>

Списоци

Ненарачана

Список на ставки во кои редоследот не е експлицитно важен.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Цел број molestie lorem at massa
Фацилиза во претиум нисл аликет
Нула волутпат аликвам велит
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Енеан седат амет ерат нунц
Eget porttitor lorem

<ul>
  <li> ... </li>
</ul>

Нарачано

Список на ставки во кои редоследот е експлицитно важен.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Цел број molestie lorem at massa
Фацилиза во претиум нисл аликет
Нула волутпат аликвам велит
Faucibus porta lacus fringilla vel
Енеан седат амет ерат нунц
Eget porttitor lorem

<ol>
  <li> ... </li>
</ol>

Нестилизиран

Отстранете го стандардното list-styleи левото пополнување на ставките од списокот (само за деца од непосредна близина).

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Цел број molestie lorem at massa
Фацилиза во претиум нисл аликет
Нула волутпат аликвам велит
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Енеан седат амет ерат нунц
Eget porttitor lorem

<ul class = „нестилизиран“ > 
  <li> ... </li>
</ul>

Во линија

Ставете ги сите ставки од списокот на една линија со inline-blockи малку светло полнење.

Лорем Ипсум
Phasellus iaculis
Nulla volutpat

<ul class = "inline" > 
  <li> ... </li>
</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.

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</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.

<dl class = „dl-horizontal“ > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Главите горе!Списоците со хоризонтални описи ќе ги скратат термините кои се премногу долги за да се вклопат во поправката на левата колона text-overflow. Во потесни пристаништа за гледање, тие ќе се променат на стандардниот распоред на наредени распоред.

Во линија

Завиткајте ги вградените фрагменти од кодот со <code>.

На пример, <section>треба да се завитка како внатрешно.

На пример , <code> & lt ; делот & gt ;</ code > треба да се завитка како внатрешен .

Основен блок

Користете <pre>за повеќе линии код. Не заборавајте да ги избегнете сите аголни загради во кодот за правилно прикажување.

<p>Примерок текст овде...</p>

<пред>
  <p>Примерок текст овде...</p>
</pre>

Главите горе!Не заборавајте да го чувате кодот во <pre>ознаките што е можно поблиску до лево; ќе ги прикаже сите јазичиња.

Опционално може да ја додадете .pre-scrollableкласата која ќе постави максимална висина од 350 пиксели и ќе обезбеди лента за лизгање со y-оска.

Стандардни стилови

За основен стајлинг-лесна облога и само хоризонтални прегради-додајте ја основната класа .tableна која било <table>.

#	Име	Презиме	Корисничко име
1	Означи	Ото	@mdo
2	Јаков	Торнтон	@масти
3	Лери	птицата	@twitter

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

Факултативни часови

Додадете која било од следните класи во .tableосновната класа.

`.table-striped`

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

#	Име	Презиме	Корисничко име
1	Означи	Ото	@mdo
2	Јаков	Торнтон	@масти
3	Лери	птицата	@twitter

<table class = "табела маса-риги" > 
  …
</table>

`.table-bordered`

Додајте граници и заоблени агли на масата.

#	Име	Презиме	Корисничко име
1	Означи	Ото	@mdo
1	Означи	Ото	@getbootstrap
2	Јаков	Торнтон	@масти
3	Лери птицата		@twitter

<table class = "табела граничи со маса" > 
  …
</table>

`.table-hover`

Овозможете состојба на лебдење на редовите на табелата во рамките на <tbody>.

#	Име	Презиме	Корисничко име
1	Означи	Ото	@mdo
2	Јаков	Торнтон	@масти
3	Лери птицата		@twitter

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

`.table-condensed`

Ги прави масите покомпактни со преполовување на облогата на ќелијата.

#	Име	Презиме	Корисничко име
1	Означи	Ото	@mdo
2	Јаков	Торнтон	@масти
3	Лери птицата		@twitter

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

Изборни класи на редови

Користете контекстуални класи за да ги обоите редовите на табелата.

Класа	Опис
`.success`	Укажува на успешна или позитивна акција.
`.error`	Укажува на опасно или потенцијално негативно дејство.
`.warning`	Покажува предупредување на кое можеби треба да му се посвети внимание.
`.info`	Се користи како алтернатива на стандардните стилови.

#	Производ	Преземено плаќање	Статус
1	ТБ - месечно	01.04.2012	Одобрено
2	ТБ - месечно	04.02.2012 година	Одбиено
3	ТБ - месечно	04.03.2012	Во очекување
4	ТБ - месечно	04.04.2012	Јавете се за да потврдите

...
  < tr class = „успех“ >
    <td> 1 < /td>
    <td>ТБ - Месечно</ td >
    < td > 01/04/2012 < / td >
    <td>Одобрено</ td >
  </ tr >
...

Поддржано обележување на табелата

Список на поддржани HTML елементи на табелата и како тие треба да се користат.

Означете	Опис
`<table>`	Елемент за завиткување за прикажување на податоци во табеларен формат
`<thead>`	Елемент на контејнер за редовите на заглавието на табелата ( `<tr>`) за означување на колоните на табелата
`<tbody>`	Елемент на контејнер за редови на табелата ( `<tr>`) во телото на табелата
`<tr>`	Елемент на контејнер за збир на ќелии на табелата ( `<td>`или `<th>`) што се појавуваат на еден ред
`<td>`	Стандардна ќелија на табелата
`<th>`	Специјална табела за етикети за колони (или ред, во зависност од обемот и поставеноста).
`<caption>`	Опис или резиме на она што содржи табелата, особено корисно за читателите на екранот

<табела>
  <caption> ... </caption>
  <глава>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

Стандардни стилови

Индивидуалните контроли за форма добиваат стил, но без потребна основна класа на <form>ознаката или големи промени во обележувањето. Резултати во наредени, лево порамнети етикети на врвот на контролите на формата.

<форма>
  <сет на полиња>
    <legend> Легенда </legend>
    <label> Име на етикетата </label>
    <input type = "text" placeholder = "Напишете нешто..." >  
    <span class = "help-block" > Пример текст за помош на ниво на блок овде. </span> 
    <label class = "проверка" > 
      <input type = "checkbox" > Проверете ме 
    </label>
    <button type = "submit" class = "btn" > Поднеси </button>  
  </fieldset>
</form>

Изборни распореди

Вклучени со Bootstrap се три опционални распореди на форми за случаи за вообичаена употреба.

Формулар за пребарување

Додадете .form-searchво формуларот и .search-queryво <input>за екстра заоблен текст.

<form class = "форма-пребарување" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > Барај </button>  
</form>

Вградена форма

Додајте .form-inlineза лево порамнети етикети и контроли со вграден блок за компактен распоред.

<form class = "form-inline" > 
  <input type = "text" class = "input-small" placeholder = "Email" >   
  <input type = "password" class = "input-small" placeholder = "Лозинка" >   
  <label class = "проверка" > 
    <input type = "checkbox" > Запомни ме 
  </label>
  <button type = "submit" class = "btn" > Најавете се </button>  
</form>

Хоризонтална форма

Десно порамнете ги етикетите и поставете ги налево за да се појават на иста линија како контролите. Бара најмногу промени за обележување од стандардна форма:

Додај .form-horizontalво формуларот
Завиткајте ги етикетите и контролите.control-group
Додај .control-labelво етикетата
Завиткајте ги сите поврзани контроли .controlsза правилно усогласување

<form class = „форма-хоризонтална“ > 
  <div class = "контролна група" > 
    <label class = "control-label" for = "inputEmail" > Е-пошта </label>  
    <div class = "контроли" > 
      <input type = "text" id = "inputEmail" placeholder = "Email" >   
    </div>
  </div>
  <div class = "контролна група" > 
    <label class = "control-label" for = "inputPassword" > Лозинка </label>  
    <div class = "контроли" > 
      <input type = "password" id = "inputPassword" placeholder = "Лозинка" >   
    </div>
  </div>
  <div class = "контролна група" > 
    <div class = "контроли" > 
      <label class = "проверка" > 
        <input type = "checkbox" > Запомни ме 
      </label>
      <button type = "submit" class = "btn" > Најавете се </button>  
    </div>
  </div>
</form>

Поддржани контроли за формулари

Примери на стандардни контроли на формулари поддржани во примерен распоред на формулари.

Влезови

Најчеста контрола на формата, полиња за внесување базирани на текст. Вклучува поддршка за сите типови HTML5: текст, лозинка, датум време, датум-време-локално, датум, месец, време, недела, број, е-пошта, URL, пребарување, тел и боја.

Потребна е употреба на одредено typeво секое време.

<input type = "text" placeholder = "Внесување текст" >

Текстареа

Контрола на форма која поддржува повеќе линии текст. Променете rowsго атрибутот по потреба.

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

Поле за избор и радија

Полето за избор се за избор на една или неколку опции во списокот, додека радијата се за избор на една опција од многу.

Стандардно (наредени)

<label class = "проверка" > 
  <input type = "checkbox" value = "" >  
  Опција една е ова и тоа - не заборавајте да вклучите зошто е одлично
</label>
 
<label class = „радио“ > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" е проверено >     
  Опција една е ова и тоа - не заборавајте да вклучите зошто е одлично
</label>
<label class = „радио“ > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  Опцијата два може да биде нешто друго, а со нејзино избирање ќе се поништи првата опција
</label>

Вградени полиња за избор

Додајте ја .inlineкласата во низа полиња за избор или радија за контроли се појавуваат на истата линија.

<label class = "вклучено поле за проверка" > 
  <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
</label>
<label class = "вклучено поле за проверка" > 
  <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
</label>
<label class = "вклучено поле за проверка" > 
  <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
</label>

Избира

Користете ја стандардната опција или наведете a multiple="multiple"за да се прикажат повеќе опции одеднаш.

<избери>
  <опција> 1 </option>
  <опција> 2 </option>
  <опција> 3 </option>
  <опција> 4 </option>
  <опција> 5 </option>
</select>
 
<select multiple = "multiple" > 
  <опција> 1 </option>
  <опција> 2 </option>
  <опција> 3 </option>
  <опција> 4 </option>
  <опција> 5 </option>
</select>

Проширување на контролите на формуларот

Додавајќи ги на врвот на постоечките контроли на прелистувачот, Bootstrap вклучува и други корисни компоненти на формата.

Подготвени и додадени влезови

Додајте текст или копчиња пред или после било кое внесување базирано на текст. Имајте предвид дека selectелементите не се поддржани овде.

Стандардни опции

Завиткајте ги an .add-onи an inputсо една од двете класи за да приложите или да додадете текст на влез.

<div class = "input-prepend" > 
  <span class = "додаток" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "text" placeholder = "Корисничко име" >    
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput " type = "текст" >   
  <span class = "add-on" > .00 </span> 
</div>

Комбинирани

Користете ги двете класи и два примери на .add-onза да прикачите и да приложите влез.

<div class = "input-prepend input-append" > 
  <span class = "додаток" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput " тип = "текст" >   
  <span class = "add-on" > .00 </span> 
</div>

Копчиња наместо текст

Наместо a <span>со текст, користете a .btnза да прикачите копче (или две) на влез.

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton " тип = "текст" >   
  <button class = "btn" type = "button" > Оди! </button>  
</div>

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons " тип = "текст" >   
  <button class = "btn" type = "button" > Барај </button>  
  <button class = "btn" type = "button" > Опции </button>  
</div>

Спуштање на копчињата

<div class = "input-append" > 
  <input class = "span2" id = "appendedDropdownButton " тип = "текст" >   
  <div class = "btn-група" > 
    <button class = "btn dropdown-toggle" data-toggle = "паѓачко" >  
      Акција
      <span class = "caret" ></span> 
    </button>
    <ul class = „паѓачко мени“ > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-група" > 
    <button class = "btn dropdown-toggle" data-toggle = "паѓачко" >  
      Акција
      <span class = "caret" ></span> 
    </button>
    <ul class = „паѓачко мени“ > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton" тип = "текст" >   
</div>

<div class = "input-prepend input-append" > 
  <div class = "btn-група" > 
    <button class = "btn dropdown-toggle" data-toggle = "паѓачко" >  
      Акција
      <span class = "caret" ></span> 
    </button>
    <ul class = „паѓачко мени“ > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton " type = "текст" >   
  <div class = "btn-група" > 
    <button class = "btn dropdown-toggle" data-toggle = "паѓачко" >  
      Акција
      <span class = "caret" ></span> 
    </button>
    <ul class = „паѓачко мени“ > 
      ...
    </ul>
  </div>
</div>

Сегментирани паѓачки групи

<форма>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    < тип на внесување = „текст“ > 
  </div>
  <div class = "input-append" > 
    < тип на внесување = „текст“ > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Формулар за пребарување

<form class = "форма-пребарување" > 
  <div class = "input-append" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit" class = "btn" > Барај </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > Барај </button>  
    <input type = "text" class = "span2 search-query" >  
  </div>
</form>

Контрола на големината

Користете класи за релативна големина како .input-largeили усогласете ги вашите влезови со големини на колоните на мрежата користејќи .span*класи.

Блокирајте ги влезовите на ниво

Направете кој било <input>или <textarea>елемент да се однесува како елемент на ниво на блок.

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

Релативна големина

<input class = "input-mini" type = "text" placeholder = ".input-mini" >   
<input class = "input-small" type = "text" placeholder = ".input-small" >   
<input class = "input-medium" type = "text" placeholder = ".input-medium" >   
<input class = "input-large" type = "text" placeholder = ".input-large" >   
<input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
<input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Главите горе!Во идните верзии, ќе ја менуваме употребата на овие релативни влезни класи за да одговараат на нашите големини на копчиња. На пример, .input-largeќе го зголеми полнењето и големината на фонтот на влезот.

Димензионирање на решетката

Користете .span1го за .span12за влезови што одговараат на истите големини на колоните на мрежата.

<input class = "span1" type = "text" placeholder = ".span1" >   
<input class = "span2" type = "text" placeholder = ".span2" >   
<input class = "span3" type = "text" placeholder = ".span3" >   
<select class = "span1" > 
  ...
</select>
<select class = "span2" > 
  ...
</select>
<select class = "span3" > 
  ...
</select>

За повеќекратни влезови на мрежа по линија, користете ја .controls-rowкласата на модификатор за правилно растојание . Ги плови влезовите за да го сруши белиот простор, ги поставува соодветните маргини и го брише пловиот.

<div class = "контроли" > 
  <input class = "span5" type = "text" placeholder = ".span5" >   
</div>
<div class = "controls controls-row" > 
  <input class = "span4" type = "text" placeholder = ".span4" >   
  <input class = "span1" type = "text" placeholder = ".span1" >   
</div>
...

Неуредливи влезови

Презентирајте ги податоците во форма што не може да се уредува без користење на вистинско обележување на формуларот.

<span class = "input-xlarge uneditable-input" > Некои вредности овде </span>

Формирајте дејства

Завршете форма со група дејства (копчиња). Кога ќе се стават во .form-actions, копчињата автоматски ќе се вовлекуваат за да се усогласат со контролите на формуларот.

<div class = "форма-дејства" > 
  <button type = "submit" class = "btn btn-primary" > Зачувај промени </button>  
  <button type = "button" class = "btn" > Откажи </button>  
</div>

Текст за помош

Поддршка на ниво и на ниво на блок за текст за помош што се појавува околу контролите на формуларот.

Вградена помош

<input type = "text" ><span class = "help-inline" > Вграден текст за помош </span>

Блокирај помош

<input type = "text" ><span class = "help-block" > Подолг блок од текст за помош што се пробива на нова линија и може да се протега надвор од една линија. </span>

Контролни состојби на формата

Обезбедете повратни информации за корисниците или посетителите со основните состојби на повратни информации за контролите на формуларите и етикетите.

Влезен фокус

Ги отстрануваме стандардните outlineстилови на некои контроли на формулари и применуваме a box-shadowна негово место за :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "Ова е фокусирано..." >

Неважечки влезови

Стилски внесувања преку стандардната функционалност на прелистувачот со :invalid. Наведете a type, додајте го requiredатрибутот ако полето не е изборно и (ако е применливо) наведете a pattern.

Ова не е достапно во верзиите на Internet Explorer 7-9 поради недостаток на поддршка за CSS псевдо селектори.

<input class = "span3" type = " потребна е-пошта" >

Оневозможени влезови

Додајте го disabledатрибутот на влез за да спречите внесување на корисникот и да активирате малку поинаков изглед.

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Оневозможен внес овде..." оневозможен >

Состојби на валидација

Bootstrap вклучува стилови за валидација за пораки за грешка, предупредување, информации и успех. За користење, додајте ја соодветната класа на околните .control-group.

<div class = "предупредување на контролната група" > 
  <label class = "control-label" for = "inputWarning" > Внесување со предупредување </label>  
  <div class = "контроли" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > Можеби нешто тргна наопаку </span> 
  </div>
</div>
 
<div class = "грешка во контролната група" > 
  <label class = "control-label" for = "inputError" > Внесување со грешка </label>  
  <div class = "контроли" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > Поправете ја грешката </span> 
  </div>
</div>
 
<div class = "информации за контролната група" > 
  <label class = "control-label" for = "inputInfo" > Внеси со информации </label>  
  <div class = "контроли" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" > Корисничкото име е веќе преземено </span> 
  </div>
</div>
 
<div class = "успех на контролната група" > 
  <label class = "control-label" for = "inputSuccess" > Внесување со успех </label>  
  <div class = "контроли" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > Уууу! </span> 
  </div>
</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за дополнителни големини.

<p>
  <button class = "btn btn-large btn-primary" type = "button" > Големо копче </button>  
  <button class = "btn btn-large" type = "button" > Големо копче </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > Стандардно копче </button>  
  <button class = "btn" type = "button" > Стандардно копче </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > Мало копче </button>  
  <button class = "btn btn-small" type = "button" > Мало копче </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > Мини копче </button>  
  <button class = "btn btn-mini" type = "button" > Мини копче </button>  
</p>

Креирајте копчиња за нивоа на блок - оние што ја опфаќаат целата ширина на родител - со додавање .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "button" > Копче за ниво на блокирање </button>  
<button class = "btn btn-large btn-block" type = "button" > Копче за ниво на блокирање </button>

Состојба со инвалидитет

Направете копчињата да изгледаат неможно за кликање така што ќе ги избледите 50%.

Елемент за сидро

Додајте ја .disabledкласата во <a>копчињата.

Примарна врска Врска

<a href = "#" class = "btn btn-large btn-primary disabled" > Примарна врска </a>  
<a href = "#" class = "btn btn-large disabled" > Врска </a>

Главите горе!Овде користиме .disabledкако услужна класа, слична на заедничката .activeкласа, така што не е потребен префикс. Исто така, оваа класа е само за естетски; мора да користите прилагоден JavaScript за да ги оневозможите врските овде.

Елемент на копче

Додадете го disabledатрибутот на <button>копчињата.

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Примарно копче </button>   
<button type = "button" class = "btn btn-large" оневозможено > Копче </button>

Една класа, повеќе ознаки

Користете ја .btnкласата на <a>, <button>, или <input>елемент.

<a class = "btn" href = "" > Врска </a>  
<button class = "btn" type = "submit" > Копче </button>  
<input class = "btn" type = "button" value = "Влез" >   
<input class = "btn" type = "submit" value = "Поднеси" >

Како најдобра практика, обидете се да го усогласите елементот за вашиот контекст за да обезбедите совпаѓање на прикажување меѓу прелистувачите. Ако имате input, користете го <input type="submit">за вашето копче.

Додајте класи на <img>елемент за лесно да стилизирате слики во кој било проект.

<img src = "..." class = "img-rounded" >  
<img src = "..." class = "img-circle" >  
<img src = "..." class = "img-polaroid" >

Главите горе! .img-roundedи .img-circleне работат во IE7-8 поради недостаток на border-radiusподдршка.

Зглобови на икони

140 икони во sprite форма, достапни во темно сива (стандардно) и бела боја, обезбедени од Glyphicons .

икона-стакло
икона-музика
пребарување на икони
икона-плик
икона-срце
икона-ѕвезда
икона-ѕвезда-празна
икона-корисник
икона-филм
икона-та-голема
икона-та
икона-та листа
икона-ок
икона-отстрани
икона-зумирање
икона-зумирање
исклучување на иконата
икона-сигнал
икона-запчаник
икона-ѓубре
икона-дома
икона-датотека
икона-време
икона-пат
икона-преземи-алт
преземање на икони
икона-подигање
икона-инбокс
икона-игра-круг
икона-повтори
освежување на иконите
icon-list-alt
икона-заклучување
икона-знаме
икона-слушалки
исклучување на јачината на иконата
икона-намалување на јачината на звукот
зголемување на јачината на иконата
икона-qcode
икона-баркод
икона-ознака
икони-ознаки
икона-книга
икона-обележувач
печатење на икони
икона-камера
икона-фонт
задебелена икона
икона-курзив
икона-текст-висина
икона-текст-ширина
икона-порамни-лево
икона-порамнување-центар
икона-порамни-десно
икона-порамни-оправда
листа на икони
икона-вовлекување-лево
икона-вовлекување-десно
икона-facetime-видео
икона-слика
икона-молив
икона-мапа-маркер
икона-прилагоди
икона-нијанса
икона-уредување
икона-споделување
проверка на иконите
икона-поместување
икона-чекор-назад
икона-брзо-назад
икона-наназад
играње со икони
икона-пауза
икона-стоп
икона-напред
икона-брзо напред
икона-чекор-напред
исфрлање на иконата
икона-шеврон-лево
икона-шеврон-десно
икона-плус-знак
икона-минус-знак
икона-отстрани-знак
икона-во ред
икона-прашање-знак
икона-инфо-знак
икона-скриншот
икона-отстрани-круг
икона-ok-круг
икона-забрана-круг
икона-стрелка-лево
икона-стрелка-десно
икона-стрелка нагоре
икона-стрелка-надолу
икона-сподели-алт
icon-size-full
икона-промени големина-мала
икона-плус
икона-минус
икона-ѕвездичка
икона-извичник-знак
икона-подарок
икона-лист
икона-оган
икона-отворени очи
икона-затвори очи
икона-предупредувачки знак
икона-рамнина
икона-календар
икона-случајно
икона-коментар
икона-магнет
икона-шеврон-ап
икона-шеврон-долу
икона-ретвит
икона-количка
икона-папка-затвори
икона-папка-отвори
икона-промена на големина-вертикална
icon-size-horizontal
икона-HDD
икона-bullhorn
икона-ѕвонче
икона-сертификат
икона-палци нагоре
икона-палци-надолу
икона-рака-десно
икона-рака-лево
икона-рака нагоре
икона-рака надолу
икона-круг-стрелка-десно
икона-круг-стрелка-лево
икона-круг-стрелка-нагоре
икона-круг-стрелка-надолу
икона-глобус
икона-клуч
икони-задачи
икона-филтер
икона-актовка
икона на цел екран

Атрибуција на глификони

Glyphicons Halflings вообичаено не се достапни бесплатно, но аранжманот помеѓу Bootstrap и креаторите на Glyphicons го овозможи тоа без трошоци за вас како програмери. Како благодарност, ве молиме да вклучите опционална врска назад до Glyphicons секогаш кога е практично.

Како да се користи

Сите икони бараат <i>ознака со единствена класа, со префикс со icon-. За да го користите, ставете го следниов код речиси насекаде:

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

Достапни се и стилови за превртени (бели) икони, подготвени со една дополнителна класа. Конкретно ќе ја наметнеме оваа класа на лебдечки и активни состојби за навигација и паѓачки врски.

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

Главите горе!Кога користите покрај низи текст, како во копчињата или на навигациските врски, погрижете се да оставите празно место по <i>ознаката за правилно растојание.

Примери за икони

Користете ги во копчиња, групи на копчиња за лента со алатки, навигација или претходно поставени внесувања.

Копчиња

Група на копчиња во алатникот со копчиња

<div class = "btn-toolbar" > 
  <div class = "btn-група" > 
    <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  </div>
</div>

Спуштање во група на копчиња

Корисник

<div class = "btn-група" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" </i> Корисник </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = „паѓачко мени“ > 
    <li><a href = "#" ><i class = "icon-pencil" ></i> Уреди </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> Избриши </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> забрана </a></li>  
    <li class = „разделник“ ></li> 
    <li><a href = "#" ><i class = "i" ></i> Направете администратор </a></li>  
  </ul>
</div>

Големини на копчиња

Ѕвезда Ѕвезда Ѕвезда

<a class = "btn btn-large" href = "#" ><i class = "icon-star" </i> Ѕвезда </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Ѕвезда </a>   
<a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Ѕвезда </a>

Навигација

<ul class = "nav nav-list" > 
  <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Почетна </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> Библиотека </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> Апликации </a></li>  
  <li><a href = "#" ><i class = "i" ></i> Различно </a></li>  
</ul>

Формирајте полиња

<div class = "контролна група" > 
  <label class = "control-label" for = "inputIcon" > Адреса на е-пошта </label>  
  <div class = "контроли" > 
    <div class = "input-prepend" > 
      <span class = "add-on" ><i class = "icon-плик" </i></span>  
      <input class = "span2" id = "inputIcon" type = "текст" >   
    </div>
  </div>
</div>

Типографија

Наслови

h1. Заглавие 1

h2. Заглавие 2

h3. Заглавие 3

h4. Заглавие 4

h5. Заглавие 5

h6. Заглавие 6

Тело копија

Копија на водечкото тело

Изграден со помалку

Нагласување

<small>

Задебелен

Закосени букви

Класи за усогласување

Часови за акцент

Кратенки

<abbr>

<abbr class="initialism">

Адреси

<address>

Блокцитати

Стандарден блок цитат

Опции за блокирање на цитати

Именување на извор

Алтернативни прикази

Списоци

Ненарачана

Нарачано

Нестилизиран

Во линија

Опис

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

Код

Во линија

Основен блок

Табели

Стандардни стилови

Факултативни часови

.table-striped

.table-bordered

.table-hover

.table-condensed

Изборни класи на редови

Поддржано обележување на табелата

Форми

Стандардни стилови

Изборни распореди

Формулар за пребарување

Вградена форма

Хоризонтална форма

Поддржани контроли за формулари

Влезови

Текстареа

Поле за избор и радија

Стандардно (наредени)

Вградени полиња за избор

Избира

Проширување на контролите на формуларот

Подготвени и додадени влезови

Стандардни опции

Комбинирани

Копчиња наместо текст

Спуштање на копчињата

Сегментирани паѓачки групи

Формулар за пребарување

Контрола на големината

Блокирајте ги влезовите на ниво

Релативна големина

Димензионирање на решетката

Неуредливи влезови

Формирајте дејства

Текст за помош

Вградена помош

Блокирај помош

Контролни состојби на формата

Влезен фокус

Неважечки влезови

Оневозможени влезови

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`