Боотстрап

Басе ЦСС

Основни ХТМЛ елементи стилизовани и побољшани проширивим класама.

Типографија

Наслови

Доступни су сви ХТМЛ наслови <h1>до краја <h6>.

х1. Наслов 1

х2. Наслов 2

х3. Наслов 3

х4. Наслов 4

х5. Наслов 5
х6. Наслов 6

Боди цопи

Боотстрап-ова глобална подразумевана величина font-sizeје 14пк , line-heightса 20пк . Ово се примењује на <body>и све параграфе. Поред тога, <p>(параграфи) добијају доњу маргину од половине своје висине линије (подразумевано 10 пиксела).

Нуллам куис рисус егет урна моллис орнаре вел еу лео. Цум социис натокуе пенатибус ет магнис дис партуриент монтес, насцетур ридицулус мус. Нуллам ид долор ид нибх ултрициес вехицула.

Цум социис натокуе пенатибус ет магнис дис партуриент монтес, насцетур ридицулус мус. Донец улламцорпер нулла нон метус ауцтор фрингилла. Дуис моллис, ест нон цоммодо луцтус, ниси ерат порттитор лигула, егет лациниа одио сем нец елит. Донец улламцорпер нулла нон метус ауцтор фрингилла.

Меценас сед диам егет рисус вариус бландит сит амет нон магна. Донец ид елит нон ми порта гравида ат егет метус. Дуис моллис, ест нон цоммодо луцтус, ниси ерат порттитор лигула, егет лациниа одио сем нец елит.

<п> ... </п>

Копија главног тела

Истакните пасус додавањем .lead.

Вивамус сагиттис лацус вел аугуе лаореет рутрум фауцибус долор ауцтор. Дуис моллис, ест нон цоммодо луцтус.

<п цласс = "леад" > ... </п>

Изграђен са мање

Типографска скала се заснива на две МАЊЕ променљиве у променљивим.мање : @baseFontSizeи @baseLineHeight. Прва је основна величина фонта која се користи у целом, а друга је висина основне линије. Користимо те варијабле и неку једноставну математику да креирамо маргине, допуне и висине линија свих наших типова и још много тога. Прилагодите их и Боотстрап се прилагођава.

Истицање

Искористите ХТМЛ-ове подразумеване ознаке за наглашавање са лаким стиловима.

<small>

Да бисте смањили нагласак на тексту или блоковима текста, користите малу ознаку.

Овај ред текста треба да се третира као ситна слова.

<п> <смалл> Овај ред текста треба да се третира као ситна слова. </смалл> </п>

Одважан

За истицање исечка текста са већом тежином фонта.

Следећи исечак текста се приказује као подебљани текст .

<стронг> приказано као подебљани текст </стронг>

Курзив

За истицање исечка текста курзивом.

Следећи исечак текста је приказан као курзив текст .

<ем> приказано као курзив текст </ем>

Главу горе!Слободно користите <b>и <i>у ХТМЛ5. <b>има за циљ да истакне речи или фразе без преношења додатне важности, док <i>је углавном за глас, техничке термине итд.

Класе поравнања

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

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

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

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

  1. <п цласс = "тект-лефт" > Текст поравнат лево. </п> 
  2. <п цласс = "тект-центер" > Текст поравнат по средини. </п> 
  3. <п цласс = "тект-ригхт" > Десно поравнат текст. </п>

Нагласни часови

Пренесите значење кроз боју помоћу прегршт корисних класа за наглашавање.

Фусце дапибус, теллус ац цурсус цоммодо, тортор маурис нибх.

Етиам порта сем малесуада магна моллис еуисмод.

Донец улламцорпер нулла нон метус ауцтор фрингилла.

Аенеан еу лео куам. Пеллентескуе орнаре сем лациниа куам вененатис.

Дуис моллис, ест нон цоммодо луцтус, ниси ерат порттитор лигула.

  1. <п цласс = "мутед" > Фусце дапибус, теллус ац цурсус цоммодо, тортор маурис нибх. </п> 
  2. <п цласс = "тект-варнинг" > Етиам порта сем малесуада магна моллис еуисмод. </п> 
  3. <п цласс = "тект-еррор" > Донец улламцорпер нулла нон метус ауцтор фрингилла. </п> 
  4. <п цласс = "тект-инфо" > Аенеан еу лео куам. Пеллентескуе орнаре сем лациниа куам вененатис. </п> 
  5. <п цласс = "тект-суццесс" > Дуис моллис, ест нон цоммодо луцтус, ниси ерат порттитор лигула. </п>

Скраћенице

Стилизована имплементација ХТМЛ <abbr>елемента за скраћенице и акрониме за приказ проширене верзије при лебдењу. Скраћенице са titleатрибутом имају доњу ивицу са светлим тачкама и курсор помоћи при лебдењу, пружајући додатни контекст при лебдењу.

<abbr>

За проширени текст при дугом курсу над скраћеницом укључите titleатрибут.

Скраћеница од речи атрибут је аттр .

<аббр титле = "аттрибуте" > аттр </аббр>

<abbr class="initialism">

Додајте .initialismскраћеници за мало мању величину фонта.

ХТМЛ је најбоља ствар од нарезаног хлеба.

<аббр титле = "ХиперТект Маркуп Лангуаге" цласс = "иницијализам" > ХТМЛ </аббр>

Аддрессес

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

<address>

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

Твиттер, Инц.
795 Фолсом Аве, Суите 600
Сан Францисцо, ЦА 94107
П: (123) 456-7890
Пуно име
фирст.ласт@екампле.цом 
  1. <адреса>
  2.   <стронг> Твиттер, Инц. </стронг><бр>
  3.   795 Фолсом Аве, Суите 600 <бр >
  4.   Сан Францисцо, ЦА 94107 <бр >
  5.   <аббр титле = "Телефон" > П: </аббр> (123) 456-7890 
  6. </адреса>
  7.  
  8. <адреса>
  9.   <стронг> Пуно име </стронг><бр>
  10.   < а хреф = "маилто:#" > фирст.ласт@екампле.цом < / а > 
  11. </адреса>

Блоцккуотес

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

Подразумевани блок цитат

Замотајте <blockquote>било који ХТМЛ као цитат. За директне цитате препоручујемо <p>.

Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Интегер посуере ерат а анте.

  1. <блоцккуоте>
  2.   <п> Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Интегер посуере ерат а анте. </п>
  3. </блоцккуоте>

Опције блок цитата

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

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

Додајте <small>ознаку за идентификацију извора. Умотајте име изворног дела у <cite>.

Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Интегер посуере ерат а анте.

Неко познат у наслову извора 
  1. <блоцккуоте>
  2.   <п> Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Интегер посуере ерат а анте. </п>
  3.   <смалл> Неко познат <ците титле = "Наслов извора" > Наслов извора </ците></смалл> 
  4. </блоцккуоте>

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

Користите .pull-rightза плутајући, десно поравнат блок цитат.

Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Интегер посуере ерат а анте.

Неко познат у наслову извора 
  1. <блоцккуоте цласс = "повуци-десно" > 
  2.   ...
  3. </блоцккуоте>

Листе

Унордеред

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

  • Лорем ипсум долор сит амет
  • Цонсецтетур адиписцинг елит
  • Интегер молестие лорем ат масса
  • Фацилисис ин претиум нисл аликует
  • Нулла волутпат аликуам велит
    • Пхаселлус иацулис некуе
    • Пурус содалес ултрициес
    • Вестибулум лаореет порттитор сем
    • Ац тристикуе либеро волутпат ат
  • Фауцибус порта лацус фрингилла вел
  • Аенеан сит амет ерат нунц
  • Егет порттитор лорем
  1. <ул>
  2.   <ли> ... </ли>
  3. </ул>

Наручено

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

  1. Лорем ипсум долор сит амет
  2. Цонсецтетур адиписцинг елит
  3. Интегер молестие лорем ат масса
  4. Фацилисис ин претиум нисл аликует
  5. Нулла волутпат аликуам велит
  6. Фауцибус порта лацус фрингилла вел
  7. Аенеан сит амет ерат нунц
  8. Егет порттитор лорем
  1. <ол>
  2.   <ли> ... </ли>
  3. </ол>

Унстилед

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

  • Лорем ипсум долор сит амет
  • Цонсецтетур адиписцинг елит
  • Интегер молестие лорем ат масса
  • Фацилисис ин претиум нисл аликует
  • Нулла волутпат аликуам велит
    • Пхаселлус иацулис некуе
    • Пурус содалес ултрициес
    • Вестибулум лаореет порттитор сем
    • Ац тристикуе либеро волутпат ат
  • Фауцибус порта лацус фрингилла вел
  • Аенеан сит амет ерат нунц
  • Егет порттитор лорем
  1. <ул цласс = "унстилед" > 
  2.   <ли> ... </ли>
  3. </ул>

У реду

Поставите све ставке листе у један ред са inline-blockи неким светлом допуном.

  • Лорем ипсум
  • Пхаселлус иацулис
  • Нулла волутпат
  1. <ул цласс = "инлине" > 
  2.   <ли> ... </ли>
  3. </ул>

Опис

Листа термина са њиховим придруженим описима.

Листе описа
Листа описа је савршена за дефинисање појмова.
Еуисмод
Вестибулум ид лигула порта фелис ​​еуисмод семпер егет лациниа одио сем нец елит.
Донец ид елит нон ми порта гравида ат егет метус.
Малесуада порта
Етиам порта сем малесуада магна моллис еуисмод. 
  1. <дл>
  2.   <дт> ... </дт>
  3.   <дд> ... </дд>
  4. </дл>

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

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

Листе описа
Листа описа је савршена за дефинисање појмова.
Еуисмод
Вестибулум ид лигула порта фелис ​​еуисмод семпер егет лациниа одио сем нец елит.
Донец ид елит нон ми порта гравида ат егет метус.
Малесуада порта
Етиам порта сем малесуада магна моллис еуисмод.
Фелис еуисмод семпер егет лациниа
Фусце дапибус, теллус ац цурсус цоммодо, тортор маурис цондиментум нибх, ут ферментум масса јусто сит амет рисус. 
  1. <дл цласс = "дл-хоризонтал" > 
  2.   <дт> ... </дт>
  3.   <дд> ... </дд>
  4. </дл>

Главу горе!Хоризонталне листе описа ће скратити термине који су предугачки да би стали у исправку леве колоне text-overflow. У ужим оквирима за приказ, они ће се променити у подразумевани наслагани изглед.

Код

У реду

Умотајте уметнуте исечке кода помоћу <code>.

На пример, <section>требало би да буде умотано као инлине. 
  1. На пример , <цоде> & лт ; одељак & гт ;</ цоде > треба да буде умотан као инлине .

Основни блок

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

<п>Пример текста овде...</п>
  1. <пре>
  2.   &лт;п&гт;Пример текста овде...&лт;/п&гт;
  3. </пре>

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

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

Табле

Подразумевани стилови

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

# Име Презиме Корисничко име
1 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Ларри птица @твиттер 
  1. <табле цласс = "табле" > 
  2.   …
  3. </табле>

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

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

.table-striped

Додаје зебрасте пруге у било који ред табеле у оквиру <tbody>ЦСС :nth-childселектора (није доступно у ИЕ7-8).

# Име Презиме Корисничко име
1 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Ларри птица @твиттер 
  1. <табле цласс = "табле табле-стрипед" > 
  2.   …
  3. </табле>

.table-bordered

Додајте ивице и заобљене углове столу.

# Име Презиме Корисничко име
1 Марк Отто @мдо
Марк Отто @гетбоотстрап
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
  1. <табле цласс = "табле табле-бордеред" > 
  2.   …
  3. </табле>

.table-hover

Омогућите стање лебдења на редовима табеле у оквиру <tbody>.

# Име Презиме Корисничко име
1 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
  1. <табле цласс = "табле табле-ховер" > 
  2.   …
  3. </табле>

.table-condensed

Чини столове компактнијим тако што преполови сечење ћелија.

# Име Презиме Корисничко име
1 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
  1. <табле цласс = "табле табле-цонденсед" > 
  2.   …
  3. </табле>

Опционе класе редова

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

Класа Опис
.success Указује на успешну или позитивну акцију.
.error Указује на опасну или потенцијално негативну акцију.
.warning Означава упозорење на које би можда требало обратити пажњу.
.info Користи се као алтернатива подразумеваним стиловима.
# Производ Преузето плаћање Статус
1 ТБ - месечно 01/04/2012 Одобрено
2 ТБ - месечно 04.02.2012 Одбијено
3 ТБ - месечно 03/04/2012 нерешен
4 ТБ - месечно 04.04.2012 Позовите да потврдите 
  1. ...
  2.   < тр цласс = "успех" >
  3.     <тд> 1 < /тд>
  4.     <тд>ТБ – месечно</ тд >
  5.     <тд> 01 / 04 / 2012 < /тд>
  6.     <тд>Одобрено</ тд >
  7.   </ тр >
  8. ...

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

Листа подржаних ХТМЛ елемената табеле и како их треба користити.

Таг Опис
<table> Елемент омотача за приказ података у табеларном формату
<thead> Елемент контејнера за редове заглавља табеле ( <tr>) за означавање колона табеле
<tbody> Елемент контејнера за редове табеле ( <tr>) у телу табеле
<tr> Елемент контејнера за скуп ћелија табеле ( <td>или <th>) који се појављује у једном реду
<td> Подразумевана ћелија табеле
<th> Посебна ћелија табеле за ознаке колона (или реда, у зависности од обима и положаја).
<caption> Опис или резиме онога што табела садржи, посебно корисно за читаче екрана 
  1. <табле>
  2.   <цаптион> ... </цаптион>
  3.   <тхеад>
  4.     <тр>
  5.       <тх> ... </тх>
  6.       <тх> ... </тх>
  7.     </тр>
  8.   </тхеад>
  9.   <тбоди>
  10.     <тр>
  11.       <тд> ... </тд>
  12.       <тд> ... </тд>
  13.     </тр>
  14.   </тбоди>
  15. </табле>

Формс

Подразумевани стилови

Појединачне контроле обрасца добијају стил, али без икакве потребне основне класе на <form>или великих промена у маркупу. Резултат је наслаганих, лево поравнатих ознака на врху контрола обрасца.

Легенда Пример текста помоћи на нивоу блока овде. 
  1. <форм>
  2.   <фиелдсет>
  3.     <легенд> Легенда </легенд>
  4.     <лабел> Име ознаке </лабел>
  5.     <инпут типе = "тект" плацехолдер = "Унесите нешто..." >  
  6.     <спан цласс = "хелп-блоцк" > Пример текста помоћи на нивоу блока овде. </спан> 
  7.     <лабел цласс = "цхецкбок" > 
  8.       <инпут типе = "цхецкбок" > Проверите ме 
  9.     </лабел>
  10.     <буттон типе = "субмит" цласс = "бтн" > Пошаљи </буттон>  
  11.   </фиелдсет>
  12. </форм>

Опциони изгледи

Уз Боотстрап су укључена три опциона изгледа образаца за уобичајене случајеве употребе.

Образац за претрагу

Додајте .form-searchу образац и .search-queryза <input>додатно заокружени унос текста.

  1. <форм цласс = "форм-сеарцх" > 
  2.   <инпут типе = "тект" цласс = "инпут-медиум сеарцх-куери" >  
  3.   <буттон типе = "субмит" цласс = "бтн" > Претрага </буттон>  
  4. </форм>

Инлине формулар

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

  1. <форм цласс = "форм-инлине" > 
  2.   <инпут типе = "тект" цласс = "инпут-смалл" плацехолдер = "Емаил" >   
  3.   <инпут типе = "пассворд " цласс = "инпут-смалл" плацехолдер = "Пассворд" >   
  4.   <лабел цласс = "цхецкбок" > 
  5.     <инпут типе = "цхецкбок" > Запамти ме 
  6.   </лабел>
  7.   <буттон типе = "субмит" цласс = "бтн" > Пријавите се </буттон>  
  8. </форм>

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

Десно поравнајте ознаке и повуците их налево да би се појавиле на истој линији као и контроле. Захтева највише промена ознака из подразумеваног обрасца:

  • Додајте .form-horizontalу образац
  • Умотајте етикете и контроле.control-group
  • Додајте .control-labelна етикету
  • Замотајте све повезане контроле .controlsза правилно поравнање
  1. <форм цласс = "форм-хоризонтал" > 
  2.   <див цласс = "цонтрол-гроуп" > 
  3.     <лабел цласс = "цонтрол-лабел" фор = "инпутЕмаил" > Е- пошта </лабел>  
  4.     <див цласс = "цонтролс" > 
  5.       <инпут типе = "тект" ид = "инпутЕмаил" плацехолдер = "Емаил" >   
  6.     </див>
  7.   </див>
  8.   <див цласс = "цонтрол-гроуп" > 
  9.     <лабел цласс = "цонтрол-лабел" фор = "инпутПассворд" > Лозинка </лабел>  
  10.     <див цласс = "цонтролс" > 
  11.       <инпут типе = "пассворд " ид = "инпутПассворд" плацехолдер = "Лозинка" >   
  12.     </див>
  13.   </див>
  14.   <див цласс = "цонтрол-гроуп" > 
  15.     <див цласс = "цонтролс" > 
  16.       <лабел цласс = "цхецкбок" > 
  17.         <инпут типе = "цхецкбок" > Запамти ме 
  18.       </лабел>
  19.       <буттон типе = "субмит" цласс = "бтн" > Пријавите се </буттон>  
  20.     </див>
  21.   </див>
  22. </форм>

Подржане контроле обрасца

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

Инпутс

Најчешћа контрола обрасца, поља за унос заснована на тексту. Укључује подршку за све типове ХТМЛ5: текст, лозинку, датум и време, локални датум и време, датум, месец, време, седмицу, број, е-пошту, урл, претрагу, тел и боју.

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

  1. <инпут типе = "тект" плацехолдер = "Тект инпут" >

Тектареа

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

  1. <тектареа ровс = "3" ></тектареа>

Поља за потврду и радио

Поља за потврду служе за бирање једне или више опција на листи, док су радио уређаји за избор једне од више опција.

Подразумевано (наслагано)


  1. <лабел цласс = "цхецкбок" > 
  2.   <инпут типе = "цхецкбок" валуе = "" >  
  3.   Прва опција је ово и оно - обавезно наведите зашто је то одлично
  4. </лабел>
  5.  
  6. <лабел цласс = "радио" > 
  7.   <инпут типе = "радио" наме = "оптионсРадиос" ид = "оптионсРадиос1" валуе = "оптион1" цхецкед >     
  8.   Прва опција је ово и оно - обавезно наведите зашто је то одлично
  9. </лабел>
  10. <лабел цласс = "радио" > 
  11.   <инпут типе = "радио" наме = "оптионсРадиос" ид = "оптионсРадиос2" валуе = "оптион2" >    
  12.   Друга опција може бити нешто друго, а избором ће се поништити избор опције један
  13. </лабел>

Инлине поља за потврду

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

  1. <лабел цласс = "цхецкбок инлине" > 
  2.   <инпут типе = "цхецкбок " ид = "инлинеЦхецкбок1" валуе = "оптион1" > 1   
  3. </лабел>
  4. <лабел цласс = "цхецкбок инлине" > 
  5.   <инпут типе = "цхецкбок " ид = "инлинеЦхецкбок2" валуе = "оптион2" > 2   
  6. </лабел>
  7. <лабел цласс = "цхецкбок инлине" > 
  8.   <инпут типе = "цхецкбок " ид = "инлинеЦхецкбок3" валуе = "оптион3" > 3   
  9. </лабел>

Бира

Користите подразумевану опцију или наведите а multiple="multiple"да бисте истовремено приказали више опција.


  1. <селецт>
  2.   <оптион> 1 </оптион>
  3.   <оптион> 2 </оптион>
  4.   <оптион> 3 </оптион>
  5.   <оптион> 4 </оптион>
  6.   <оптион> 5 </оптион>
  7. </селецт>
  8.  
  9. <селецт мултипле = "вишеструко" > 
  10.   <оптион> 1 </оптион>
  11.   <оптион> 2 </оптион>
  12.   <оптион> 3 </оптион>
  13.   <оптион> 4 </оптион>
  14.   <оптион> 5 </оптион>
  15. </селецт>

Проширивање контрола обрасца

Додајући поред постојећих контрола прегледача, Боотстрап укључује и друге корисне компоненте обрасца.

Претходни и придодати улази

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

Подразумеване опције

Премотајте ан .add-onи ан inputса једном од две класе да бисте додали текст на почетку или уносу.

@

.00 
  1. <див цласс = "инпут-препенд" > 
  2.   <спан цласс = "додатак" > @ </спан> 
  3.   <инпут цласс = "спан2" ид = "препендедИнпут" типе = "тект" плацехолдер = "Усернаме" >    
  4. </див>
  5. <див цласс = "инпут-аппенд" > 
  6.   <инпут цласс = "спан2" ид = "аппендедИнпут " типе = "тект" >   
  7.   <спан цласс = "адд-он" > .00 </спан> 
  8. </див>

Комбиновано

Користите обе класе и две инстанце да .add-onбисте додали улаз испред и додали.

$ .00 
  1. <див цласс = "инпут-препенд инпут-аппенд" > 
  2.   <спан цласс = "додатак" > $ </спан> 
  3.   <инпут цласс = "спан2" ид = "аппендедПрепендедИнпут " типе = "тект" >   
  4.   <спан цласс = "адд-он" > .00 </спан> 
  5. </див>

Дугмад уместо текста

Уместо <span>са текстом, користите а .btnда бисте приложили дугме (или два) на унос.

  1. <див цласс = "инпут-аппенд" > 
  2.   <инпут цласс = "спан2" ид = "аппендедИнпутБуттон " типе = "тект" >   
  3.   <буттон цласс = "бтн" типе = "буттон" > Иди! </буттон>  
  4. </див>
  1. <див цласс = "инпут-аппенд" > 
  2.   <инпут цласс = "спан2" ид = "аппендедИнпутБуттонс " типе = "тект" >   
  3.   <буттон цласс = "бтн" типе = "буттон" > Претрага </буттон>  
  4.   <буттон цласс = "бтн" типе = "буттон" > Опције </буттон>  
  5. </див>

Падајући мени са дугметом

  1. <див цласс = "инпут-аппенд" > 
  2.   <инпут цласс = "спан2" ид = "аппендедДропдовнБуттон " типе = "тект" >   
  3.   <див цласс = "бтн-гроуп" > 
  4.     <буттон цласс = "бтн дропдовн-тоггле" дата-тоггле = "дропдовн" >  
  5.       поступак
  6.       <спан цласс = "царет" ></спан> 
  7.     </буттон>
  8.     <ул цласс = "падајући мени" > 
  9.       ...
  10.     </ул>
  11.   </див>
  12. </див>
  1. <див цласс = "инпут-препенд" > 
  2.   <див цласс = "бтн-гроуп" > 
  3.     <буттон цласс = "бтн дропдовн-тоггле" дата-тоггле = "дропдовн" >  
  4.       поступак
  5.       <спан цласс = "царет" ></спан> 
  6.     </буттон>
  7.     <ул цласс = "падајући мени" > 
  8.       ...
  9.     </ул>
  10.   </див>
  11.   <инпут цласс = "спан2" ид = "препендедДропдовнБуттон" типе = "тект" >   
  12. </див>
  1. <див цласс = "инпут-препенд инпут-аппенд" > 
  2.   <див цласс = "бтн-гроуп" > 
  3.     <буттон цласс = "бтн дропдовн-тоггле" дата-тоггле = "дропдовн" >  
  4.       поступак
  5.       <спан цласс = "царет" ></спан> 
  6.     </буттон>
  7.     <ул цласс = "падајући мени" > 
  8.       ...
  9.     </ул>
  10.   </див>
  11.   <инпут цласс = "спан2" ид = "аппендедПрепендедДропдовнБуттон " типе = "тект" >   
  12.   <див цласс = "бтн-гроуп" > 
  13.     <буттон цласс = "бтн дропдовн-тоггле" дата-тоггле = "дропдовн" >  
  14.       поступак
  15.       <спан цласс = "царет" ></спан> 
  16.     </буттон>
  17.     <ул цласс = "падајући мени" > 
  18.       ...
  19.     </ул>
  20.   </див>
  21. </див>

Сегментиране падајуће групе

  1. <форм>
  2.   <див цласс = "инпут-препенд" > 
  3.     <див цласс = "бтн-гроуп" > ... </див> 
  4.     <инпут типе = "тект" > 
  5.   </див>
  6.   <див цласс = "инпут-аппенд" > 
  7.     <инпут типе = "тект" > 
  8.     <див цласс = "бтн-гроуп" > ... </див> 
  9.   </див>
  10. </форм>

Образац за претрагу

  1. <форм цласс = "форм-сеарцх" > 
  2.   <див цласс = "инпут-аппенд" > 
  3.     <инпут типе = "тект" цласс = "спан2 сеарцх-куери" >  
  4.     <буттон типе = "субмит" цласс = "бтн" > Претрага </буттон>  
  5.   </див>
  6.   <див цласс = "инпут-препенд" > 
  7.     <буттон типе = "субмит" цласс = "бтн" > Претрага </буттон>  
  8.     <инпут типе = "тект" цласс = "спан2 сеарцх-куери" >  
  9.   </див>
  10. </форм>

Контрола величине

Користите релативне класе величине попут .input-largeили ускладите своје уносе са величинама колона мреже помоћу .span*класа.

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

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

  1. <инпут цласс = "инпут-блоцк-левел" типе = "тект" плацехолдер = ".инпут-блоцк-левел" >

Релативна величина

  1. <инпут цласс = "инпут-мини" типе = "тект" плацехолдер = ".инпут-мини" >   
  2. <инпут цласс = "инпут-смалл" типе = "тект" плацехолдер = ".инпут-смалл" >   
  3. <инпут цласс = "инпут-медиум" типе = "тект" плацехолдер = ".инпут-медиум" >   
  4. <инпут цласс = "инпут-ларге" типе = "тект" плацехолдер = ".инпут-ларге" >   
  5. <инпут цласс = "инпут-кларге" типе = "тект" плацехолдер = ".инпут-кларге" >   
  6. <инпут цласс = "инпут-ккларге" типе = "тект" плацехолдер = ".инпут-ккларге" >

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

Одређивање величине мреже

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

  1. <инпут цласс = "спан1" типе = "тект" плацехолдер = ".спан1" >   
  2. <инпут цласс = "спан2" типе = "тект" плацехолдер = ".спан2" >   
  3. <инпут цласс = "спан3" типе = "тект" плацехолдер = ".спан3" >   
  4. <селецт цласс = "спан1" > 
  5.   ...
  6. </селецт>
  7. <селецт цласс = "спан2" > 
  8.   ...
  9. </селецт>
  10. <селецт цласс = "спан3" > 
  11.   ...
  12. </селецт>

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

  1. <див цласс = "цонтролс" > 
  2.   <инпут цласс = "спан5" типе = "тект" плацехолдер = ".спан5" >   
  3. </див>
  4. <див цласс = "цонтролс цонтролс-ров" > 
  5.   <инпут цласс = "спан4" типе = "тект" плацехолдер = ".спан4" >   
  6.   <инпут цласс = "спан1" типе = "тект" плацехолдер = ".спан1" >   
  7. </див>
  8. ...

Уноси који се не могу мењати

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

Нека вредност овде 
  1. <спан цласс = "инпут-кларге унедитабле-инпут" > Нека вредност овде </спан>

Формирајте радње

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

  1. <див цласс = "форм-ацтионс" > 
  2.   <буттон типе = "субмит" цласс = "бтн бтн-примари" > Сачувај промене </буттон>  
  3.   <буттон типе = "буттон" цласс = "бтн" > Откажи </буттон>  
  4. </див>

Текст помоћи

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

Инлине помоћ

Инлине текст помоћи 
  1. <инпут типе = "тект" ><спан цласс = "хелп-инлине" > Инлине текст помоћи </спан>

Помоћ за блокирање

Дужи блок текста помоћи који се прелама на нови ред и може да се протеже даље од једног реда. 
  1. <инпут типе = "тект" ><спан цласс = "хелп-блоцк" > Дужи блок текста помоћи који се прелама на нови ред и може да се протеже даље од једног реда. </спан>

Контролна стања облика

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

Фокус уноса

Уклањамо подразумеване outlineстилове на неким контролама обрасца и примењујемо а box-shadowна његово место за :focus.

  1. <инпут цласс = "инпут-кларге" ид = "фоцуседИнпут" типе = "тект" валуе = "Ово је фокусирано..." >

Неважећи улази

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

Ово није доступно у верзијама Интернет Екплорер-а 7-9 због недостатка подршке за ЦСС псеудо селекторе.

  1. <инпут цласс = "спан3" типе = "емаил" потребан >

Онемогућени улази

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

  1. <инпут цласс = "инпут-кларге" ид = "дисабледИнпут" типе = "тект" плацехолдер = "Овде је онемогућен унос..." онемогућен >

Стања валидације

Боотстрап укључује стилове валидације за поруке о грешци, упозорењима, информацијама и успеху. Да бисте користили, додајте одговарајућу класу у окружење .control-group.

Можда је нешто пошло наопако
Исправите грешку
Корисничко име је заузето
Воохоо! 
  1. <див цласс = "упозорење контролне групе" > 
  2.   <лабел цласс = "цонтрол-лабел" фор = "инпутВарнинг" > Унос са упозорењем </лабел>  
  3.   <див цласс = "цонтролс" > 
  4.     <инпут типе = "тект" ид = "инпутВарнинг" >  
  5.     <спан цласс = "хелп-инлине" > Нешто је можда пошло наопако </спан> 
  6.   </див>
  7. </див>
  8.  
  9. <див цласс = "грешка контролне групе" > 
  10.   <лабел цласс = "цонтрол-лабел" фор = "инпутЕррор" > Унос са грешком </лабел>  
  11.   <див цласс = "цонтролс" > 
  12.     <инпут типе = "тект" ид = "инпутЕррор" >  
  13.     <спан цласс = "хелп-инлине" > Исправите грешку </спан> 
  14.   </див>
  15. </див>
  16.  
  17. <див цласс = "информације о контролној групи" > 
  18.   <лабел цласс = "цонтрол-лабел" фор = "инпутИнфо" > Унос са информацијама </лабел>  
  19.   <див цласс = "цонтролс" > 
  20.     <инпут типе = "тект" ид = "инпутИнфо" >  
  21.     <спан цласс = "хелп-инлине" > Корисничко име је већ заузето </спан> 
  22.   </див>
  23. </див>
  24.  
  25. <див цласс = "успех контролне групе" > 
  26.   <лабел цласс = "цонтрол-лабел" фор = "инпутСуццесс" > Унос са успехом </лабел>  
  27.   <див цласс = "цонтролс" > 
  28.     <инпут типе = "тект" ид = "инпутСуццесс" >  
  29.     <спан цласс = "хелп-инлине" > Воохоо! </спан> 
  30.   </див>
  31. </див>

Дугмад

Подразумевана дугмад

Стилови дугмади се могу применити на било шта са .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 Смањите нагласак на дугмету тако што ћете га учинити да изгледа као веза уз задржавање понашања дугмета

Унакрсна компатибилност претраживача

ИЕ9 не обрезује градијенте позадине на заобљеним угловима, па га уклањамо. С тим у вези, ИЕ9 јанкификује онемогућене buttonелементе, чинећи текст сивим са гадном сенком текста коју не можемо да поправимо.

Величине дугмади

Желите већа или мања дугмад? Додајте .btn-large, .btn-small, или .btn-miniза додатне величине.

  1. <п>
  2.   <буттон цласс = "бтн бтн-ларге бтн-примари" типе = "буттон" > Велико дугме </буттон>  
  3.   <буттон цласс = "бтн бтн-ларге" типе = "буттон" > Велико дугме </буттон>  
  4. </п>
  5. <п>
  6.   <буттон цласс = "бтн бтн-примари" типе = "буттон" > Подразумевано дугме </буттон>  
  7.   <буттон цласс = "бтн" типе = "буттон" > Подразумевано дугме </буттон>  
  8. </п>
  9. <п>
  10.   <буттон цласс = "бтн бтн-смалл бтн-примари" типе = "буттон" > Мало дугме </буттон>  
  11.   <буттон цласс = "бтн бтн-смалл" типе = "буттон" > Мало дугме </буттон>  
  12. </п>
  13. <п>
  14.   <буттон цласс = "бтн бтн-мини бтн-примари" типе = "буттон" > Мини дугме </буттон>  
  15.   <буттон цласс = "бтн бтн-мини" типе = "буттон" > Мини дугме </буттон>  
  16. </п>

Креирајте дугмад на нивоу блока—она која обухватају пуну ширину родитеља— додавањем .btn-block.

  1. <буттон цласс = "бтн бтн-ларге бтн-блоцк бтн-примари" типе = "буттон" > Дугме нивоа блока </буттон>  
  2. <буттон цласс = "бтн бтн-ларге бтн-блоцк" типе = "буттон" > Дугме нивоа блока </буттон>

Дисаблед стате

Учините да дугмад изгледају на које се не може кликнути тако што ћете их избледети уназад 50%.

Анцхор елемент

Додајте .disabledкласу <a>дугмадима.

Примарна веза Линк 

  1. < а хреф = "#" цласс = "бтн бтн-ларге бтн- примари дисаблед" > Примарна веза </ а>  
  2. < а хреф = "#" цласс = "бтн бтн-ларге дисаблед" > Веза </ а>

Главу горе!Овде користимо .disabledкао услужну класу, слично обичној .activeкласи, тако да префикс није потребан. Такође, ова класа је само за естетику; морате користити прилагођени ЈаваСцрипт да бисте онемогућили везе овде.

Елемент дугмета

Додајте disabledатрибут <button>дугмадима.

  1. <буттон типе = "буттон" цласс = "бтн бтн-ларге бтн-примари дисаблед" дисаблед = "дисаблед" > Примарно дугме </буттон>   
  2. <буттон типе = "буттон" цласс = "бтн бтн-ларге" дисаблед > Дугме </буттон>

Једна класа, више ознака

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

Линк 
  1. < а цласс = "бтн" хреф = "" > Веза < /а>  
  2. <буттон цласс = "бтн" типе = "субмит" > Дугме </буттон>  
  3. <инпут цласс = "бтн" типе = "буттон" валуе = "Инпут" >   
  4. <инпут цласс = "бтн" типе = "субмит" валуе = "Субмит" >

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

Слике

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

140к140 140к140 140к140 
  1. <имг срц = "..." цласс = "имг-роундед" >  
  2. <имг срц = "..." цласс = "имг-цирцле" >  
  3. <имг срц = "..." цласс = "имг-полароид" >

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

Иконе од Глификона

Икони глифови

140 икона у облику сприте-а, доступних у тамно сивој (подразумевано) и белој, обезбедили су Глипхицонс .

  • икона-стакло
  • икона-музика
  • икона-претрага
  • икона-коверат
  • икона-срце
  • икона-звезда
  • икона-звезда-празна
  • икона-корисник
  • икона-филм
  • икона-та-велика
  • икона-тх
  • ицон-тх-лист
  • икона-ок
  • икона-уклони
  • икона-зум-ин
  • икона-зум-оут
  • икона искључена
  • икона-сигнал
  • икона-зупчаник
  • икона-смеће
  • икона-дом
  • икона-фајл
  • икона-време
  • икона-пут
  • икона-преузимање-алт
  • преузимање икона
  • ицон-уплоад
  • икона пријемно сандуче
  • икона-игра-круг
  • икона-понављање
  • икона-рефресх
  • икона-лист-алт
  • ицон-лоцк
  • икона-застава
  • икона-слушалице
  • икона-искључена јачина звука
  • икона-смањивање јачине звука
  • икона-појачавање јачине звука
  • икона-крцоде
  • икона-баркод
  • икона-ознака
  • иконе-ознаке
  • књига икона
  • икона-обележивач
  • икона-штампа
  • икона-камера
  • икона-фонт
  • икона подебљано
  • икона-курзив
  • икона-текст-висина
  • икона-текст-ширина
  • икона-поравнај-лево
  • ицон-алигн-центер
  • ицон-алигн-ригхт
  • икона-поравнати-поравнати
  • листа икона
  • икона-увлачење-лево
  • икона-увлачење-десно
  • икона-фацетиме-видео
  • икона-слика
  • икона-оловка
  • икона-мапа-маркер
  • икона-подесите
  • икона нијанса
  • икона-уреди
  • ицон-схаре
  • икона-провера
  • икона-померај
  • икона-корак-назад
  • икона-брзо-назад
  • икона уназад
  • ицон-плаи
  • икона-пауза
  • икона-стоп
  • икона унапред
  • икона-премотавање унапред
  • икона-корак-напред
  • икона-избаци
  • икона-шеврон-лево
  • икона-шеврон-десно
  • икона-плус-знак
  • икона-минус-знак
  • икона-уклони-знак
  • икона-ок-знак
  • икона-питање-знак
  • икона-инфо-знак
  • икона-снимак екрана
  • икона-уклони-круг
  • икона-ок-круг
  • икона-забрана-круг
  • икона-стрелица-лево
  • икона-стрелица-десно
  • икона-стрелица-горе
  • икона-стрелица-доле
  • икона-дељење-алт
  • икона-промена величине-пуна
  • икона-промена величине-мала
  • икона-плус
  • икона-минус
  • икона-звездица
  • икона-узвичник-знак
  • икона-дар
  • икона-лист
  • икона-ватра
  • икона-око-отворено
  • икона-око-затвори
  • икона-знак-упозорење
  • икона-план
  • икона-календар
  • икона-случајна
  • икона-коментар
  • икона-магнет
  • икона-шеврон-уп
  • икона-шеврон-доле
  • икона-ретвит
  • икона-колица
  • икона-фолдер-цлосе
  • икона-фасцикла-отворена
  • икона-промена величине-вертикала
  • икона-промена величине-хоризонтално
  • икона-хдд
  • икона-булхорн
  • икона-звоно
  • икона-сертификат
  • икона-палац горе
  • икона-палац-доле
  • икона-рука-десно
  • икона-рука-лево
  • икона-рука-горе
  • икона-рука-доле
  • икона-круг-стрелица-десно
  • икона-круг-стрелица-лево
  • икона-круг-стрелица-горе
  • икона-круг-стрелица-доле
  • икона-глобус
  • икона-кључ
  • икона-задаци
  • икона-филтер
  • икона-актовна
  • икона преко целог екрана

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

Глипхицонс Халфлингс обично нису доступни бесплатно, али договор између Боотстрап-а и креатора Глипхицонс-а је то омогућио без икаквих трошкова за вас као програмере. У знак захвалности, молимо вас да укључите опционалну везу назад до Глификона кад год је то практично.

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

Све иконе захтевају <i>ознаку са јединственом класом, са префиксом icon-. Да бисте га користили, поставите следећи код било где:

  1. <и цласс = "ицон-сеарцх" ></и>

Доступни су и стилови за обрнуте (беле) иконе, припремљене са једном додатном класом. Посебно ћемо применити ову класу на лебдећи и активним стањима за навигацију и падајуће везе.

  1. <и цласс = "ицон-сеарцх ицон-вхите" ></и>

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

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

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

Дугмад

Група дугмади на траци са дугмадима
  1. <див цласс = "бтн-тоолбар" > 
  2.   <див цласс = "бтн-гроуп" > 
  3.     < а цласс = "бтн" хреф = "#" ><и цласс = "ицон-алигн-лефт" ></и></ а>   
  4.     < а цласс = "бтн" хреф = "#" ><и цласс = "ицон-алигн-центер" ></и></ а>   
  5.     < а цласс = "бтн" хреф = "#" ><и цласс = "ицон-алигн-ригхт" ></и></ а>   
  6.     < а цласс = "бтн" хреф = "#" ><и цласс = "ицон-алигн-јустифи" > </и></ а>   
  7.   </див>
  8. </див>
Падајући мени у групи дугмади
Корисник 
  1. <див цласс = "бтн-гроуп" > 
  2.   < а цласс = "бтн бтн-примари" хреф = "#" ><и цласс = "ицон-усер ицон-вхите" ></и> Корисник < /а>   
  3.   < а цласс = "бтн бтн-примари дропдовн-тоггле" дата- тоггле = "дропдовн" хреф = " # " ><спан цласс = "царет" ></спан></ а>    
  4.   <ул цласс = "падајући мени" > 
  5.     <ли>< а хреф = "#" ><и цласс = "ицон-пенцил" ></и> Измени </а ></ли>  
  6.     <ли>< а хреф = "#" ><и цласс = "ицон-трасх" ></и> Избриши </а ></ли>  
  7.     <ли>< а хреф = "#" ><и цласс = "ицон-бан-цирцле" ></и> Бан </а ></ли>  
  8.     <ли цласс = "дивидер" ></ли> 
  9.     <ли>< а хреф = " # " ><и цласс = "и" ></и> Постави администратором </а ></ли>  
  10.   </ул>
  11. </див>
Величине дугмади
Звезда Звезда Звезда 
  1. < а цласс = "бтн бтн-ларге" хреф = "#" ><и цласс = "ицон-стар" ></и> Звездица < /а>   
  2. < а цласс = "бтн бтн-смалл" хреф = "#" ><и цласс = "ицон-стар" ></и> Звездица < /а>   
  3. < а цласс = "бтн бтн-мини" хреф = "#" ><и цласс = "ицон-стар" ></и> Звездица < /а>

Навигација

  1. <ул цласс = "нав нав-лист" > 
  2.   <ли цласс = "ацтиве" >< а хреф = " # " ><и цласс = "ицон-хоме ицон-вхите" ></и> Почетна </а ></ли>   
  3.   <ли>< а хреф = "#" ><и цласс = "ицон-боок" ></и> Библиотека </а ></ли>  
  4.   <ли>< а хреф = "#" ><и цласс = "ицон-пенцил" ></и> Апликације </а ></ли>  
  5.   <ли>< а хреф = " # " ><и цласс = "и" ></и> Разно </а ></ли>  
  6. </ул>

Поља обрасца

  1. <див цласс = "цонтрол-гроуп" > 
  2.   <лабел цласс = "цонтрол-лабел" фор = "инпутИцон" > Адреса е- поште </лабел>  
  3.   <див цласс = "цонтролс" > 
  4.     <див цласс = "инпут-препенд" > 
  5.       <спан цласс = "адд-он" ><и цласс = "ицон-енвелопе" ></и></спан>  
  6.       <инпут цласс = "спан2" ид = "инпутИцон" типе = "тект" >   
  7.     </див>
  8.   </див>
  9. </див>