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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Унордеред

<ul>

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

Унстилед

<ul class="unstyled">

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

Наручено

<ol>

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

Опис

<dl>

Листе описа

Листа описа је савршена за дефинисање појмова.

Еуисмод

Вестибулум ид лигула порта фелис ​​еуисмод семпер егет лациниа одио сем нец елит.

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

Малесуада порта

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

У реду

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

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

Основни блок

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

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

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

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

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

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

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

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

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

<табле>
  <тхеад>
    <тр>
      <тх> … </тх>
      <тх> … </тх>
    </тр>
  </тхеад>
  <тбоди>
    <тр>
      <тд> … </тд>
      <тд> … </тд>
    </тр>
  </тбоди>
</табле>

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

<табле цласс="табле"> цласс = "табела" >
  …
</табле>

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

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

<табле цласс="табле табле-стрипед"> цласс = "стол са пругастим столом" >
  …
</табле>

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

<табле цласс="табле табле-бордеред"> цласс = "табела оивичена" >
  …
</табле>

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

<табле цласс="табле табле-цонденсед"> цласс = "табела табела кондензована" >
  …
</табле>

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

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

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

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

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

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

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

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

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

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

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

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

Са в2.0, имамо лакше и паметније подразумеване поставке за стилове обрасца. Нема додатних ознака, само контроле обрасца.

Одражавајући подразумеване ВебКит стилове, само додајте .form-searchза додатна заокружена поља за претрагу.

Улази су на нивоу блока за почетак. За .form-inlineи .form-horizontal, користимо инлине-блоцк.

Шта је укључено

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

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

Нове подразумеване вредности са в2.0

До в1.4, Боотстрап-ови подразумевани стилови обрасца су користили хоризонтални распоред. Са Боотстрап 2, уклонили смо то ограничење да бисмо имали паметније, скалабилније подразумеване вредности за било који облик.

Редизајнирана стања претраживача

Боотстрап садржи стилове за фокусиране и 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">иза елемента за унос.

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

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

За анкере и форме

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

Напомена: Сва дугмад морају да садрже .btnкласу. Стилове дугмади треба применити на <button>и <a>елементе ради доследности.

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

Желите већа или мања дугмад? Имајте то!

Примарна акција поступак

Примарна акција поступак

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

За онемогућена дугмад користите .btn-disabledза везе и :disabledза <button>елементе.

Примарна акција поступак

Примарна акција поступак

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

У ИЕ9, испуштамо градијент на свим дугмадима у корист заобљених углова јер ИЕ9 не исече градијенте позадине до углова.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Освјежи Проверити Избриши

Коментар Подешавања Више информација