Басе ЦСС

Поврх скеле, основни ХТМЛ елементи су стилизовани и побољшани проширивим класама како би се обезбедио свеж, доследан изглед и осећај.

Наслови и копија тела

Типографска скала

Цела типографска мрежа је заснована на две мање променљиве у нашој датотеци варијабли.лесс: @baseFontSizeи @baseLineHeight. Прва је основна величина фонта која се користи у целом, а друга је висина основне линије.

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

Пример основног текста

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

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

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

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

х1. Наслов 1

х2. Наслов 2

х3. Наслов 3

х4. Наслов 4

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

Нагласак, адреса и скраћеница

Елемент Употреба Опционо
<strong> За истицање исечка текста са важним Ниједан
<em> За истицање исечка текста са нагласком Ниједан
<abbr> Обмотава скраћенице и акрониме да би се приказала проширена верзија при лебдењу

Укључите опционални titleатрибут за проширени текст

Користите .initialismкласу за велике скраћенице.
<address> За контакт информације свог најближег претка или целог дела Сачувајте форматирање завршавајући све редове са<br>

Коришћење нагласка

Фусце дапибус , теллус ац цурсус цоммодо , тортор маурис цондиментум нибх , ут ферментум масса јусто сит амет рисус. Маеценас фауцибус моллис интердум. Нулла витае елит либеро, а пхаретра аугуе.

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

Примери адреса

Ево два примера како се <address>ознака може користити:

Твиттер, Инц.
795 Фолсом Аве, Суите 600
Сан Францисцо, ЦА 94107
П: (123) 456-7890
Пуно име
фирст.ласт@гмаил.цом

Примери скраћеница

Скраћенице са titleатрибутом имају доњу ивицу са светлим тачкама и курсор помоћи при лебдењу. Ово корисницима даје додатну индикацију да ће се нешто приказати када лебде.

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

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

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

Блоцккуотес

Елемент Употреба Опционо
<blockquote> Елемент на нивоу блока за цитирање садржаја из другог извора

Додајте citeатрибут за изворни УРЛ

Употреба .pull-leftи .pull-rightкласе за плутајуће опције
<small> Опциони елемент за додавање цитата окренутог кориснику, обично аутора са насловом рада Ставите <cite>око наслова или имена извора

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

Укључите опциони <small>елемент за цитирање извора и добићете ем цртицу &mdash;испред њега у сврху стилизовања.

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

Пример блок цитата

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

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

Неко познат у Тело рада

Да бисте померили блок цитат удесно, додајте class="pull-right":

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

Неко познат у Тело рада

Листе

Унордеред

<ul>

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

Унстилед

<ul class="unstyled">

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

Наручено

<ol>

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

Опис

<dl>

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

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

<dl class="dl-horizontal">

Листе описа
Листа описа је савршена за дефинисање појмова.
Еуисмод
Вестибулум ид лигула порта фелис ​​еуисмод семпер егет лациниа одио сем нец елит.
Донец ид елит нон ми порта гравида ат егет метус.
Малесуада порта
Етиам порта сем малесуада магна моллис еуисмод.
Фелис еуисмод семпер егет лациниа
Фусце дапибус, теллус ац цурсус цоммодо, тортор маурис цондиментум нибх, ут ферментум масса јусто сит амет рисус.

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

У реду

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

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

Основни блок

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

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

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

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

Гоогле Преттифи

Узмите исти <pre>елемент и додајте две опционе класе за побољшано приказивање.

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

Преузмите гоогле-цоде-преттифи и погледајте реадме за коришћење.

Маркуп табеле

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

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

Име Класа Опис
Уобичајено Ниједан Нема стилова, само колоне и редови
Басиц .table Само хоризонталне линије између редова
Бордеред .table-bordered Заокружује углове и додаје спољну ивицу
Зебра-пруга .table-striped Додаје светло сиву боју позадине непарним редовима (1, 3, 5, итд.)
Цонденсед .table-condensed Сече вертикални паддинг на пола, од 8пк до 4пк, унутар свих tdи thелемената

Пример табеле

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

Табеле су аутоматски стилизоване са само неколико ивица да би се обезбедила читљивост и одржала структура. Са 2.0, .tableкласа је обавезна.

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

2. пругасти сто

Будите мало маштовити са својим столовима додавањем зебрастих пруга—само додајте .table-stripedкласу.

Напомена: пругасте табеле користе :nth-childЦСС селектор и нису доступне у ИЕ7-ИЕ8.

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

3. Обрубљена табела

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

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

4. Згуснута табела

Учините своје табеле компактнијим додавањем .table-condensedкласе да бисте преполовили допуну ћелија табеле (са 8пк на 4пк).

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

5. Комбинујте их све!

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

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

Флексибилни ХТМЛ и ЦСС

Најбољи део образаца у Боотстрап-у је то што сви ваши улази и контроле изгледају сјајно без обзира на то како их градите у својој маркупу. Није потребан сувишни ХТМЛ, али ми обезбеђујемо обрасце за оне којима је потребан.

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

Укључена четири распореда

Боотстрап долази са подршком за четири типа изгледа образаца:

  • Вертикално (подразумевано)
  • Претрага
  • У реду
  • Хоризонтално

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

Контролна стања и још много тога

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

Стања као што су грешка, упозорење и успех су укључена за сваки тип контроле обрасца. Такође су укључени стилови за онемогућене контроле.

Четири врсте образаца

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

Име Класа Опис
Вертикално (подразумевано) .form-vertical (није обавезно) Наслагане, лево поравнате ознаке преко контрола
У реду .form-inline Лево поравнате ознаке и контроле у ​​облику блока за компактан стил
Претрага .form-search Екстра заокружен унос текста за типичну естетику претраживања
Хоризонтално .form-horizontal Плутајте лево, десно поравнате ознаке на истој линији као и контроле

Примери образаца који користе само контроле обрасца, без додатних ознака

Основни облик

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

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

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

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

Додајте .form-searchу образац и .search-queryу input.

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

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

Додајте .form-inlineза финоћу вертикално поравнање и размак контрола обрасца.

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

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

На десној страни су приказане све подразумеване контроле обрасца које подржавамо. Ево листе са набрајањем:

  • унос текста (текст, лозинка, емаил, итд.)
  • поље за потврду
  • радио
  • изаберите
  • вишеструки избор
  • унос датотеке
  • тектареа

Поред текста слободног облика, сваки унос заснован на ХТМЛ5 тексту изгледа тако.

Пример маркупа

С обзиром на горњи пример распореда обрасца, ево ознаке повезане са првом улазном и контролном групом. Класе .control-group, .control-labelи .controlsсве су неопходне за стилизовање.

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

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

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


Валидација обрасца

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

  1. <фиелдсет
  2. цласс = "грешка контролне групе" >
  3. </фиелдсет>
Нека вредност овде
Можда је нешто пошло наопако
Исправите грешку
Воохоо!
Воохоо!

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

Додај и додај улазе

Групе уноса—са додатком или додатком текста—пружају лак начин да дате више контекста за своје уносе. Сјајни примери укључују знак @ за Твиттер корисничка имена или $ за финансије.


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

До в1.4, Боотстрап је захтевао додатне ознаке око поља за потврду и радија да би их слагао. Сада је једноставно поновити оно <label class="checkbox">што обавија <input type="checkbox">.

Подржани су и инлине оквири за потврду и радио. Само додајте .inlineу било који .checkboxили .radioи готови сте.


Уграђени обрасци и додавање/претполагање

Да бисте користили уносе за предочење или додавање у инлине форму, обавезно поставите .add-onи inputна исти ред, без размака.


Текст помоћи за образац

Да бисте додали текст помоћи за уносе обрасца, укључите текст помоћи на линији са <span class="help-inline">или блок текста помоћи са <p class="help-block">иза елемента за унос.

Користите исте .span*класе из система мреже за улазне величине.

Такође можете користити статичке класе које се не мапирају на мрежу, прилагођавају се ЦСС стиловима који реагују или узимају у обзир различите типове контрола (нпр. у inputодносу на select).

@

Ево мало текста помоћи

.00
Ево још текста помоћи
$ .00

Напомена: Ознаке окружују све опције за много веће површине кликова и употребљивију форму.

Дугме цласс="" Опис
btn Стандардно сиво дугме са градијентом
btn btn-primary Пружа додатну визуелну тежину и идентификује примарну радњу у сету дугмади
btn btn-info Користи се као алтернатива подразумеваним стиловима
btn btn-success Указује на успешну или позитивну акцију
btn btn-warning Означава да треба бити опрезан са овом радњом
btn btn-danger Указује на опасну или потенцијално негативну акцију
btn btn-inverse Алтернативно тамно сиво дугме, није везано за семантичку радњу или употребу

Дугмад за радње

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

Стилови дугмади се могу применити на било шта са .btnпримењеном класом. Међутим, обично ћете желети да их примените само на <a>елементе и <button>.

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

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

Више величина

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


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

За онемогућена дугмад, додајте .disabledкласу везама и disabledатрибут за <button>елементе.

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

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

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

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

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

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

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

Изграђен као дух

Уместо да сваку икону учинимо додатним захтевом, ми смо их саставили у сприте — гомилу слика у једној датотеци која користи ЦСС за позиционирање слика помоћу background-position. Ово је исти метод који користимо на Твиттер.цом и добро нам је функционисао.

Све класе икона имају префикс .icon-за правилан размак имена и опсег, слично као и наше друге компоненте. Ово ће помоћи да се избегну сукоби са другим алатима.

Глипхицонс нам је одобрио коришћење скупа Халфлингс у нашем комплету алата отвореног кода све док ми обезбедимо везу и заслуге овде у документима. Размислите о томе да урадите исто у својим пројектима.

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

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

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

Доступни су и стилови за обрнуте (беле) иконе, припремљене са једном додатном класом:

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

Постоји 140 класа које можете изабрати за своје иконе. Само додајте <i>ознаку са правим класама и спремни сте. Комплетну листу можете пронаћи у спритес.лесс или управо овде у овом документу.

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

Случајеви употребе

Иконе су сјајне, али где би их неко користио? Ево неколико идеја:

  • Као визуелни материјал за навигацију на бочној траци
  • За чисто навигацију вођену иконама
  • За дугмад која помажу у преношењу значења радње
  • Са везама за дељење контекста на одредишту корисника

У суштини, где год можете да ставите <i>ознаку, можете ставити икону.

Примери

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