Поврх скеле, основни ХТМЛ елементи су стилизовани и побољшани проширивим класама како би се обезбедио свеж, доследан изглед и осећај.
Цела типографска мрежа је заснована на две мање променљиве у нашој датотеци варијабли.лесс: @baseFontSizeи @baseLineHeight. Прва је основна величина фонта која се користи у целом, а друга је висина основне линије.
Користимо те варијабле и мало математике да креирамо маргине, допуне и висине линија свих наших типова и још много тога.
Нуллам куис рисус егет урна моллис орнаре вел еу лео. Цум социис натокуе пенатибус ет магнис дис партуриент монтес, насцетур ридицулус мус. Нуллам ид долор ид нибх ултрициес вехицула.
Истакните пасус додавањем .lead.
Вивамус сагиттис лацус вел аугуе лаореет рутрум фауцибус долор ауцтор. Дуис моллис, ест нон цоммодо луцтус.
| Елемент | Употреба | Опционо |
|---|---|---|
<strong> |
За истицање исечка текста са важним | Ниједан |
<em> |
За истицање исечка текста са нагласком | Ниједан |
<abbr> |
Обмотава скраћенице и акрониме да би се приказала проширена верзија при лебдењу | Укључите опционални .initialismкласу за велике скраћенице. |
<address> |
За контакт информације свог најближег претка или целог дела | Сачувајте форматирање завршавајући све редове са<br> |
Фусце дапибус , теллус ац цурсус цоммодо , тортор маурис цондиментум нибх , ут ферментум масса јусто сит амет рисус. Маеценас фауцибус моллис интердум. Нулла витае елит либеро, а пхаретра аугуе.
Напомена: Слободно користите <b>и <i>у ХТМЛ5, али њихова употреба се мало променила. <b>има за циљ да истакне речи или фразе без преношења додатне важности, док <i>је углавном за глас, техничке термине итд.
Ево два примера како се <address>ознака може користити:
Скраћенице са titleатрибутом имају доњу ивицу са светлим тачкама и курсор помоћи при лебдењу. Ово корисницима даје додатну индикацију да ће се нешто приказати када лебде.
Додајте initialismкласу скраћеници да повећате типографску хармонију дајући јој нешто мању величину текста.
ХТМЛ је најбоља ствар од нарезаног хлеба.
Скраћеница речи атрибут је аттр .
| Елемент | Употреба | Опционо |
|---|---|---|
<blockquote> |
Елемент на нивоу блока за цитирање садржаја из другог извора | Додајте .pull-leftи .pull-rightкласе за плутајуће опције |
<small> |
Опциони елемент за додавање цитата окренутог кориснику, обично аутора са насловом рада | Ставите <cite>око наслова или имена извора |
Да бисте укључили блок цитат, омотајте <blockquote>било који ХТМЛ као цитат. За директне цитате препоручујемо <p>.
Укључите опциони <small>елемент за цитирање извора и добићете ем цртицу —испред њега у сврху стилизовања.
- <блоцккуоте>
- <п> Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Интегер посуере ерат а анте вененатис. </п>
- <смалл> Неко познат </смалл>
- </блоцккуоте>
Подразумевани блок цитати су стилизовани овако:
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Интегер посуере ерат а анте вененатис.
Неко познат у Тело рада
Да бисте померили блок цитат удесно, додајте class="pull-right":
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Интегер посуере ерат а анте вененатис.
Неко познат у Тело рада
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Главу горе! Хоризонталне листе описа ће скратити термине који су предугачки да би стали у исправку леве колоне text-overflow. У ужим оквирима за приказ, они ће се променити у подразумевани наслагани изглед.
Умотајте уметнуте исечке кода помоћу <code>.
- На пример , <цоде> одељак </ цоде > треба да буде умотан као инлине .
Користи <pre>се за више линија кода. Обавезно избаците све угаоне заграде у коду ради правилног приказивања.
<п>Пример текста овде...</п>
- <пре>
- &лт;п&гт;Пример текста овде...&лт;/п&гт;
- </пре>
Напомена: Обавезно држите код унутар <pre>ознака што је могуће ближе левој страни; то ће приказати све картице.
Опционо можете додати .pre-scrollableкласу која ће поставити максималну висину од 350 пиксела и обезбедити траку за померање на и-оси.
Узмите исти <pre>елемент и додајте две опционе класе за побољшано приказивање.
- <п> Пример текста овде... </п>
- <пре цласс = "преттипринт
- линенумс" >
- &лт;п&гт;Пример текста овде...&лт;/п&гт;
- </пре>
Преузмите гоогле-цоде-преттифи и погледајте реадме за коришћење.
| Таг | Опис |
|---|---|
<table> |
Елемент омотача за приказ података у табеларном формату |
<thead> |
Елемент контејнера за редове заглавља табеле ( <tr>) за означавање колона табеле |
<tbody> |
Елемент контејнера за редове табеле ( <tr>) у телу табеле |
<tr> |
Елемент контејнера за скуп ћелија табеле ( <td>или <th>) који се појављује у једном реду |
<td> |
Подразумевана ћелија табеле |
<th> |
Посебна ћелија табеле за ознаке колоне (или реда, у зависности од обима и положаја) Мора се користити у оквиру а <thead> |
<caption> |
Опис или резиме онога што табела садржи, посебно корисно за читаче екрана |
- <табле>
- <тхеад>
- <тр>
- <тх> … </тх>
- <тх> … </тх>
- </тр>
- </тхеад>
- <тбоди>
- <тр>
- <тд> … </тд>
- <тд> … </тд>
- </тр>
- </тбоди>
- </табле>
| Име | Класа | Опис |
|---|---|---|
| Уобичајено | Ниједан | Нема стилова, само колоне и редови |
| Басиц | .table |
Само хоризонталне линије између редова |
| Бордеред | .table-bordered |
Заокружује углове и додаје спољну ивицу |
| Зебра-пруга | .table-striped |
Додаје светло сиву боју позадине непарним редовима (1, 3, 5, итд.) |
| Цонденсед | .table-condensed |
Сече вертикални паддинг на пола, од 8пк до 4пк, унутар свих tdи thелемената |
Табеле су аутоматски стилизоване са само неколико ивица да би се обезбедила читљивост и одржала структура. Са 2.0, .tableкласа је обавезна.
- <табле цласс = "табле" >
- …
- </табле>
| # | Име | Презиме | Корисничко име |
|---|---|---|---|
| 1 | Марк | Отто | @мдо |
| 2 | Јацоб | Тхорнтон | @дебео |
| 3 | Ларри | птица | @твиттер |
Будите мало маштовити са својим столовима додавањем зебрастих пруга—само додајте .table-stripedкласу.
Напомена: пругасте табеле користе :nth-childЦСС селектор и нису доступне у ИЕ7-ИЕ8.
- <табле цласс = "табле табле-стрипед" >
- …
- </табле>
| # | Име | Презиме | Корисничко име |
|---|---|---|---|
| 1 | Марк | Отто | @мдо |
| 2 | Јацоб | Тхорнтон | @дебео |
| 3 | Ларри | птица | @твиттер |
Додајте ивице око целог стола и заобљене углове у естетске сврхе.
- <табле цласс = "табле табле-бордеред" >
- …
- </табле>
| # | Име | Презиме | Корисничко име |
|---|---|---|---|
| 1 | Марк | Отто | @мдо |
| Марк | Отто | @гетбоотстрап | |
| 2 | Јацоб | Тхорнтон | @дебео |
| 3 | Птица Лари | @твиттер | |
Учините своје табеле компактнијим додавањем .table-condensedкласе да бисте преполовили допуну ћелија табеле (са 8пк на 4пк).
- <табле цласс = "табле табле-цонденсед" >
- …
- </табле>
| # | Име | Презиме | Корисничко име |
|---|---|---|---|
| 1 | Марк | Отто | @мдо |
| 2 | Јацоб | Тхорнтон | @дебео |
| 3 | Птица Лари | @твиттер | |
Слободно комбинујте било коју од класа табеле да бисте постигли другачији изглед користећи било коју од доступних класа.
- <табле цласс = "табле табле-стрипед табле-бордед табле-цонденсед" >
- ...
- </табле>
| Пуно име | |||
|---|---|---|---|
| # | Име | Презиме | Корисничко име |
| 1 | Марк | Отто | @мдо |
| 2 | Јацоб | Тхорнтон | @дебео |
| 3 | Птица Лари | @твиттер | |
Најбољи део образаца у Боотстрап-у је то што сви ваши улази и контроле изгледају сјајно без обзира на то како их градите у својој маркупу. Није потребан сувишни ХТМЛ, али ми обезбеђујемо обрасце за оне којима је потребан.
Компликованији распореди долазе са сажетим и скалабилним класама за лако обликовање и повезивање догађаја, тако да сте покривени на сваком кораку.
Боотстрап долази са подршком за четири типа изгледа образаца:
Различити типови изгледа образаца захтевају неке промене у означавању, али саме контроле остају и понашају се исто.
Боотстрап-ови обрасци укључују стилове за све основне контроле обрасца као што су унос, поље за текст и избор који бисте очекивали. Али такође долази са бројним прилагођеним компонентама као што су додани и претходни улази и подршка за листе поља за потврду.
Стања као што су грешка, упозорење и успех су укључена за сваки тип контроле обрасца. Такође су укључени стилови за онемогућене контроле.
Боотстрап пружа једноставне ознаке и стилове за четири стила уобичајених веб образаца.
| Име | Класа | Опис |
|---|---|---|
| Вертикално (подразумевано) | .form-vertical (није обавезно) |
Наслагане, лево поравнате ознаке преко контрола |
| У реду | .form-inline |
Лево поравнате ознаке и контроле у облику блока за компактан стил |
| Претрага | .form-search |
Екстра заокружен унос текста за типичну естетику претраживања |
| Хоризонтално | .form-horizontal |
Плутајте лево, десно поравнате ознаке на истој линији као и контроле |
Паметне и лагане подразумеване вредности без додатних ознака.
- <форм цласс = "велл" >
- <лабел> Име ознаке </лабел>
- <инпут типе = "тект" цласс = "спан3" плацехолдер = "Унесите нешто..." >
- <спан цласс = "хелп-блоцк" > Пример текста помоћи на нивоу блока овде. </спан>
- <лабел цласс = "цхецкбок" >
- <инпут типе = "цхецкбок" > Проверите ме
- </лабел>
- <буттон типе = "субмит" цласс = "бтн" > Пошаљи </буттон>
- </форм>
Додајте .form-searchу образац и .search-queryу input.
- <форм цласс = "велл форм-сеарцх" >
- <инпут типе = "тект" цласс = "инпут-медиум сеарцх-куери" >
- <буттон типе = "субмит" цласс = "бтн" > Претрага </буттон>
- </форм>
Додајте .form-inlineза финоћу вертикално поравнање и размак контрола обрасца.
- <форм цласс = "велл форм-инлине" >
- <инпут типе = "тект" цласс = "инпут-смалл" плацехолдер = "Емаил" >
- <инпут типе = "пассворд " цласс = "инпут-смалл" плацехолдер = "Пассворд" >
- <лабел цласс = "цхецкбок" >
- <инпут типе = "цхецкбок" > Запамти ме
- </лабел>
- <буттон типе = "субмит" цласс = "бтн" > Пријавите се </буттон>
- </форм>
На десној страни су приказане све подразумеване контроле обрасца које подржавамо. Ево листе са набрајањем:
С обзиром на горњи пример распореда обрасца, ево ознаке повезане са првом улазном и контролном групом. Класе .control-group, .control-labelи .controlsсве су неопходне за стилизовање.
- <форм цласс = "форм-хоризонтал" >
- <фиелдсет>
- <легенд> Текст легенде </легенд>
- <див цласс = "цонтрол-гроуп" >
- <лабел цласс = "цонтрол-лабел" фор = "инпут01" > Унос текста </лабел>
- <див цласс = "цонтролс" >
- <инпут типе = "тект" цласс = "инпут-кларге" ид = "инпут01" >
- <п цласс = "хелп-блоцк" > Подржани текст помоћи </п>
- </див>
- </див>
- </фиелдсет>
- </форм>
Боотстрап садржи стилове за фокусиране и disabledстања подржане претраживачем. Уклањамо подразумевани Вебкит outlineи примењујемо а box-shadowна његово место за :focus.
Такође укључује стилове валидације за грешке, упозорења и успех. Да бисте користили, додајте класу грешке у околину .control-group.
- <фиелдсет
- цласс = "грешка контролне групе" >
- …
- </фиелдсет>
Групе уноса—са додатком или додатком текста—пружају лак начин да дате више контекста за своје уносе. Сјајни примери укључују знак @ за Твиттер корисничка имена или $ за финансије.
До в1.4, Боотстрап је захтевао додатне ознаке око поља за потврду и радија да би их слагао. Сада је једноставно поновити оно <label class="checkbox">што обавија <input type="checkbox">.
Подржани су и инлине оквири за потврду и радио. Само додајте .inlineу било који .checkboxили .radioи готови сте.
Да бисте користили уносе за предочење или додавање у инлине форму, обавезно поставите .add-onи inputна исти ред, без размака.
Да бисте додали текст помоћи за уносе обрасца, укључите текст помоћи на линији са <span class="help-inline">или блок текста помоћи са <p class="help-block">иза елемента за унос.
Уместо да сваку икону учинимо додатним захтевом, ми смо их саставили у сприте — гомилу слика у једној датотеци која користи ЦСС за позиционирање слика помоћу background-position. Ово је исти метод који користимо на Твиттер.цом и добро нам је функционисао.
Све класе икона имају префикс .icon-за правилан размак имена и опсег, слично као и наше друге компоненте. Ово ће помоћи да се избегну сукоби са другим алатима.
Глипхицонс нам је одобрио коришћење скупа Халфлингс у нашем комплету алата отвореног кода све док ми обезбедимо везу и заслуге овде у документима. Размислите о томе да урадите исто у својим пројектима.
Боотстрап користи <i>ознаку за све иконе, али оне немају класу великих и малих слова – само дељени префикс. Да бисте га користили, поставите следећи код било где:
- <и цласс = "ицон-сеарцх" ></и>
Доступни су и стилови за обрнуте (беле) иконе, припремљене са једном додатном класом:
- <и цласс = "ицон-сеарцх ицон-вхите" ></и>
Постоји 140 класа које можете изабрати за своје иконе. Само додајте <i>ознаку са правим класама и спремни сте. Комплетну листу можете пронаћи у спритес.лесс или управо овде у овом документу.
Главу горе! Када користите поред низова текста, као у дугмадима или везама за навигацију, обавезно оставите размак после <i>ознаке за правилан размак.
Иконе су сјајне, али где би их неко користио? Ево неколико идеја:
У суштини, где год можете да ставите <i>ознаку, можете ставити икону.
Користите их у дугмадима, групама дугмади за траку са алаткама, навигацију или уносе у претходном обрасцу.