Базов CSS

На върха на скелето, основните HTML елементи са стилизирани и подобрени с разширими класове, за да осигурят свеж, последователен вид и усещане.

Заглавия и основно копие

Типографски мащаб

Цялата типографска мрежа се основава на две променливи Less в нашия файл variables.less: @baseFontSizeи @baseLineHeight. Първият е основният размер на шрифта, използван навсякъде, а вторият е основната височина на реда.

Ние използваме тези променливи и някои математически изчисления, за да създадем полетата, подложките и височините на редовете на всички наши типове и други.

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

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 ultricies vehicula.

Основно копие

Изпъкнете абзац, като добавите .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

h1. Заглавие 1

h2. Заглавие 2

h3. Заглавие 3

h4. Заглавие 4

h5. Заглавие 5
h6. Заглавие 6

Акцент, обръщение и съкращение

елемент Използване Не е задължително
<strong> За подчертаване на фрагмент от текст с важно Нито един
<em> За подчертаване на фрагмент от текст с ударение Нито един
<abbr> Обгръща съкращенията и акронимите, за да покаже разширената версия при задържане

Включете незадължителен titleатрибут за разширен текст

Използвайте .initialismклас за съкращения с главни букви.
<address> За информация за контакт с най-близкия му предшественик или цялата работа Запазете форматирането, като завършите всички редове с<br>

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

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Забележка: Чувствайте се свободни да използвате <b>и <i>в HTML5, но тяхното използване се промени малко. <b>има за цел да подчертава думи или фрази, без да придава допълнителна важност, докато <i>е предимно за глас, технически термини и т.н.

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

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

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Пълно име
[email protected]

Примерни съкращения

Съкращенията с titleатрибут имат светла пунктирана долна граница и помощен курсор при задържане. Това дава на потребителите допълнителна индикация, че нещо ще бъде показано при задържане.

Добавете initialismкласа към съкращение, за да увеличите типографската хармония, като му дадете малко по-малък размер на текста.

HTML е най-доброто нещо след нарязания хляб.

Съкращение на думата атрибут е attr .

Блокови цитати

елемент Използване Не е задължително
<blockquote> Елемент на ниво блок за цитиране на съдържание от друг източник

Добавете citeатрибут за URL адрес на източника

Използване .pull-leftи .pull-rightкласове за плаващи опции
<small> Незадължителен елемент за добавяне на цитат, обърнат към потребителя, обикновено автор със заглавие на произведение Поставете <cite>около заглавието или името на източника

За да включите блоков цитат, обвийте <blockquote>всеки HTML като цитат. За директни котировки препоръчваме <p>.

Включете незадължителен <small>елемент, за да цитирате източника си и ще получите тире em &mdash;преди него за целите на стила.

  1. <блоков цитат>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  3. <small> Някой известен </small>
  4. </blockquote>

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

Цитатите по подразбиране са стилизирани по следния начин:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Някой известен в работата

За да преместите блоковия си цитат вдясно, добавете class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Някой известен в работата

Списъци

Неподредени

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

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

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Поръчан

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Описание

<dl>

Списъци с описания
Списъкът с описания е идеален за дефиниране на термини.
Euismod
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 class="dl-horizontal">

Списъци с описания
Списъкът с описания е идеален за дефиниране на термини.
Euismod
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.

Горе главата! Хоризонталните списъци с описания ще съкратят термините, които са твърде дълги, за да се поберат в корекцията на лявата колона text-overflow. В по-тесни прозорци те ще се променят на подреденото оформление по подразбиране.

В редица

Обвийте вградени фрагменти от код с <code>.

  1. Например <code> раздел < / code > трябва да бъде обвит като inline .

Основен блок

Използвайте <pre>за няколко реда код. Не забравяйте да избегнете всички ъглови скоби в кода за правилно изобразяване.

<p>Примерен текст тук...</p>
  1. <преди>
  2. <p>Примерен текст тук...</p>
  3. </pre>

Забележка: Не забравяйте да запазите кода в <pre>етикетите възможно най-близо до ляво; ще визуализира всички раздели.

По желание можете да добавите .pre-scrollableкласа, който ще зададе максимална височина от 350px и ще предостави лента за превъртане по оста y.

Google Prettify

Вземете същия <pre>елемент и добавете два незадължителни класа за подобрено изобразяване.

  1. <p> Примерен текст тук... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>Примерен текст тук...</p>
  4. </pre>

Изтеглете google-code-prettify и вижте readme за това как да използвате.

Маркиране на таблица

Етикет Описание
<table> Обвиващ елемент за показване на данни в табличен формат
<thead> Елемент контейнер за заглавни редове на таблица ( <tr>) за етикетиране на колони на таблица
<tbody> Елемент контейнер за редовете на таблицата ( <tr>) в тялото на таблицата
<tr> Елемент на контейнер за набор от клетки на таблица ( <td>или <th>), който се появява на един ред
<td> Клетка на таблицата по подразбиране
<th> Специална клетка от таблица за етикети на колона (или ред, в зависимост от обхвата и разположението)
Трябва да се използва в a<thead>
<caption> Описание или резюме на това, което съдържа таблицата, особено полезно за екранни четци
  1. <таблица>
  2. <thead>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

Опции за маса

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

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

1. Стилове на таблици по подразбиране

Таблиците се оформят автоматично само с няколко граници, за да се осигури четливост и поддържане на структура. При 2.0 .tableкласът е задължителен.

  1. < клас на таблица = "таблица" >
  2. </table>
# Първо име Фамилия Потребителско име
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Лари птицата @туитър

2. Раирана маса

Вземете малко фантазия с вашите маси, като добавите зебра - просто добавете .table-stripedкласа.

Забележка: Раираните таблици използват :nth-childCSS селектора и не са налични в IE7-IE8.

  1. <table class = "table table-striped" >
  2. </table>
# Първо име Фамилия Потребителско име
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Лари птицата @туитър

3. Маса с граници

Добавете граници около цялата маса и заоблени ъгли за естетически цели.

  1. <table class = "table table-bordered" >
  2. </table>
# Първо име Фамилия Потребителско име
1 Марк Ото @mdo
Марк Ото @getbootstrap
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър

4. Съкратена таблица

Направете вашите таблици по-компактни, като добавите .table-condensedкласа, за да намалите наполовина подложката на клетките на таблицата (от 8px на 4px).

  1. <table class = "table table-condensed" >
  2. </table>
# Първо име Фамилия Потребителско име
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър

5. Комбинирайте ги всички!

Чувствайте се свободни да комбинирате всеки от класовете на таблицата, за да постигнете различен външен вид, като използвате всеки от наличните класове.

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </table>
Пълно име
# Първо име Фамилия Потребителско име
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър

Гъвкав HTML и CSS

Най-добрата част от формулярите в Bootstrap е, че всичките ви входни данни и контроли изглеждат страхотно, без значение как ги създавате в маркирането. Не се изисква излишен HTML, но ние предоставяме моделите за тези, които го изискват.

По-сложните оформления идват с кратки и мащабируеми класове за лесно оформяне и обвързване на събития, така че да сте обхванати на всяка стъпка.

Включени са четири оформления

Bootstrap идва с поддръжка за четири типа оформления на формуляри:

  • Вертикално (по подразбиране)
  • Търсене
  • В редица
  • Хоризонтална

Различните типове оформления на формуляри изискват някои промени в маркирането, но самите контроли остават и се държат по същия начин.

Контролни състояния и др

Формулярите на Bootstrap включват стилове за всички контроли на основния формуляр като въвеждане, текстово поле и избор, които бихте очаквали. Но също така идва с редица персонализирани компоненти като добавени и предварителни входове и поддръжка за списъци с квадратчета за отметка.

Състояния като грешка, предупреждение и успех са включени за всеки тип контрол на формуляр. Включени са и стилове за контроли с увреждания.

Четири вида форми

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

Име Клас Описание
Вертикално (по подразбиране) .form-vertical (не е задължително) Подредени, подравнени вляво етикети над контролите
В редица .form-inline Подравнен вляво етикет и вградени блокови контроли за компактен стил
Търсене .form-search Изключително закръглено въвеждане на текст за типична естетика на търсенето
Хоризонтална .form-horizontal Плаващи вляво, подравнени вдясно етикети на същия ред като контролите

Примерни формуляри , използващи само контроли на формуляри, без допълнително маркиране

Основна форма

Интелигентни и леки настройки по подразбиране без допълнително маркиране.

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

  1. <form class = "well" >
  2. <label> Име на етикет </label>
  3. <input type = "text" class = "span3" placeholder = "Въведете нещо..." >
  4. <span class = "help-block" > Примерен помощен текст на ниво блок тук. </span>
  5. <label class = "чекбокс" >
  6. <input type = "checkbox" > Вижте ме
  7. </label>
  8. <button type = "submit" class = "btn" > Изпращане </button>
  9. </form>

Форма за търсене

Добавете .form-searchкъм формуляра и .search-queryкъм input.

  1. <form class = "well form-search" >
  2. <input type = "text" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" > Търсене </button>
  4. </form>

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

Добавете .form-inlineкъм финес вертикалното подравняване и разстоянието на контролите на формуляра.

  1. <form class = "well form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "Email" >
  3. <input type = "password" class = "input-small" placeholder = "Password" >
  4. <label class = "чекбокс" >
  5. <input type = "checkbox" > Запомни ме
  6. </label>
  7. <button type = "submit" class = "btn" > Влезте </button>
  8. </form>

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

Показани вдясно са всички контроли на формуляра по подразбиране, които поддържаме. Ето списъка с водещи символи:

  • въвеждане на текст (текст, парола, имейл и т.н.)
  • отметка
  • радио
  • изберете
  • множествен избор
  • въвеждане на файл
  • текстово поле

В допълнение към текста в свободна форма, всеки HTML5 базиран на текст вход изглежда така.

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

Като се има предвид горното примерно оформление на формуляра, ето маркирането, свързано с първата входна и контролна група. Всички класове .control-group, .control-label, и .controlsса необходими за стилизиране.

  1. <form class = "form-horizontal" >
  2. <набор от полета>
  3. <legend> Текст на легендата </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > Въвеждане на текст </label>
  6. <div class = "controls" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Поддържащ помощен текст </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Състояния на контрол на формата

Bootstrap включва стилове за поддържани от браузър фокусирани и disabledсъстояния. Ние премахваме Webkit по подразбиране outlineи прилагаме a box-shadowна негово място за :focus.


Валидиране на формуляр

Той също така включва стилове за валидиране за грешки, предупреждения и успех. За да използвате, добавете класа за грешка към заобикалящия .control-group.

  1. <fieldset
  2. class = "control-group error" >
  3. </fieldset>
Има някаква стойност тук
Може нещо да се е объркало
Моля коригирайте грешката
Уаууу!
Уаууу!

Разширяване на контролите на формуляра

Предварително и добавяне на входове

Групите за въвеждане – с добавен или предварителен текст – предоставят лесен начин да дадете повече контекст за вашите въведени данни. Страхотни примери включват знака @ за потребителски имена в Twitter или $ за финанси.


Отметки и радиостанции

До v1.4 Bootstrap изискваше допълнително маркиране около квадратчетата за отметка и радиостанциите, за да ги подреди. Сега е просто да повторите <label class="checkbox">, което обгръща <input type="checkbox">.

Поддържат се и вградени квадратчета за отметка и радиостанции. Просто добавете .inlineкъм всяко .checkboxили .radioи сте готови.


Вградени форми и добавяне/предваряване

За да използвате входове за добавяне или добавяне във вградена форма, не забравяйте да поставите .add-onи inputна един и същи ред, без интервали.


Помощен текст на формуляра

За да добавите помощен текст за вашите входове във формуляра, включете вграден помощен текст с <span class="help-inline">или помощен текстов блок с <p class="help-block">след елемента за въвеждане.

Използвайте същите .span*класове от мрежовата система за входни размери.

Можете също така да използвате статични класове, които не се съпоставят с мрежата, адаптират се към отзивчивите CSS стилове или отчитат различни видове контроли (напр. inputсрещу select).

@

Ето малко помощен текст

0,00
Ето още помощен текст
$ 0,00

Забележка: Етикетите обграждат всички опции за много по-големи области за щракване и по-използваема форма.

Бутон клас="" Описание
btn Стандартен сив бутон с градиент
btn btn-primary Осигурява допълнителна визуална тежест и идентифицира основното действие в набор от бутони
btn btn-info Използва се като алтернатива на стиловете по подразбиране
btn btn-success Показва успешно или положително действие
btn btn-warning Показва, че трябва да се внимава с това действие
btn btn-danger Показва опасно или потенциално негативно действие
btn btn-inverse Алтернативен тъмносив бутон, необвързан със семантично действие или употреба

Бутони за действия

Като конвенция бутоните трябва да се използват само за действия, докато хипервръзките трябва да се използват за обекти. Например „Изтегляне“ трябва да е бутон, докато „скорошна дейност“ трябва да е връзка.

Стиловете на бутоните могат да се прилагат към всичко с приложен .btnклас. Въпреки това, обикновено ще искате да ги приложите само към <a>и <button>елементи.

Съвместимост между браузъри

IE9 не изрязва фонови градиенти на заоблени ъгли, така че го премахваме. Свързано, IE9 jankifies деактивираните buttonелементи, изобразявайки текста в сиво с неприятна текстова сянка, която не можем да коригираме.

Множество размери

Искате ли по-големи или по-малки копчета? Добавете .btn-large, .btn-small, или .btn-miniза два допълнителни размера.


Състояние с увреждания

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

Основна връзка Връзка

Горе главата! Ние използваме .disabledкато полезен клас тук, подобно на общия .activeклас, така че не се изисква префикс.

Един клас, множество тагове

Използвайте .btnкласа върху <a>, <button>или <input>елемент.

Връзка
  1. <a class = "btn" href = "" > Връзка </a>
  2. <button class = "btn" type = "submit" >
  3. Бутон
  4. </button>
  5. <input class = "btn" type = "button"
  6. стойност = "Вход" >
  7. <input class = "btn" type = "submit"
  8. value = "Изпращане" >

Като най-добра практика, опитайте се да съпоставите елемента с вашия контекст, за да осигурите съвпадащо рендиране в различни браузъри. Ако имате input, използвайте <input type="submit">за вашия бутон.

  • икона-стъкло
  • икона-музика
  • търсене на икони
  • икона-плик
  • икона-сърце
  • икона-звезда
  • икона-звезда-празна
  • икона-потребител
  • икона-филм
  • икона-та-голяма
  • икона-та
  • икона-ти-списък
  • икона-ок
  • икона-премахване
  • icon-zoom-in
  • icon-zoom-out
  • изключване на иконата
  • икона-сигнал
  • икона-зъбче
  • икона-кошче
  • икона-дом
  • икона-файл
  • икона-време
  • икона-път
  • икона-изтегляне-алт
  • икона за изтегляне
  • качване на икони
  • икона-входяща кутия
  • икона-игра-кръг
  • икона-повтаряне
  • икона-опресняване
  • icon-list-alt
  • икона-заключване
  • икона-знаме
  • икона-слушалки
  • icon-volume-off
  • икона-намаляване на звука
  • икона-обем нагоре
  • икона-qrcode
  • икона-баркод
  • икона-етикет
  • етикети за икони
  • иконна книга
  • икона-отметка
  • печат на икони
  • икона-камера
  • икона-шрифт
  • икона-удебелен
  • икона-курсив
  • icon-text-height
  • ширина на текста на иконата
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • списък с икони
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • икона-картина
  • икона-молив
  • икона-карта-маркер
  • настройка на икони
  • икона-оттенък
  • редактиране на икони
  • споделяне на икони
  • икона-проверка
  • икона-преместване
  • икона-стъпка-назад
  • икона-бързо-назад
  • икона-назад
  • игра на икони
  • икона-пауза
  • икона-стоп
  • икона-напред
  • икона-бързо напред
  • икона-стъпка-напред
  • изваждане на икона
  • икона-шеврон-вляво
  • икона-шеврон-вдясно
  • икона-знак плюс
  • икона-знак-минус
  • икона-премахване-знак
  • икона-ок-знак
  • икона-въпрос-знак
  • икона-информационен знак
  • икона-екранна снимка
  • икона-премахване-кръг
  • икона-ок-кръг
  • икона-бан-кръг
  • икона-стрелка-наляво
  • икона-стрелка-надясно
  • икона-стрелка-нагоре
  • икона-стрелка-надолу
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • икона-плюс
  • икона-минус
  • икона-звездичка
  • икона-удивителен-знак
  • икона-дар
  • икона-лист
  • икона-огън
  • икона-око-отворено
  • icon-eye-close
  • икона-предупредителен-знак
  • икона-равнина
  • икона-календар
  • икона-произволна
  • икона-коментар
  • икона-магнит
  • икона-шеврон-нагоре
  • икона-шеврон-надолу
  • икона-ретуит
  • икона-пазарска количка
  • икона-папка-затваряне
  • икона-папка-отворена
  • icon-resize-vertical
  • icon-resize-horizontal
  • икона-hdd
  • икона-мегафон
  • икона-камбана
  • икона-сертификат
  • икона-палец нагоре
  • икона-палец-надолу
  • икона-ръка-дясна
  • икона-ръка-лява
  • икона-ръка нагоре
  • икона-ръка-надолу
  • икона-кръг-стрелка-надясно
  • икона-кръг-стрелка-наляво
  • икона-кръг-стрелка-нагоре
  • икона-кръг-стрелка-надолу
  • икона-глобус
  • икона-гаечен ключ
  • икони-задачи
  • икона-филтър
  • икона-куфарче
  • икона на цял екран

Изграден като спрайт

Вместо да правим всяка икона допълнителна заявка, ние ги компилирахме в спрайт – куп изображения в един файл, който използва CSS за позициониране на изображенията с background-position. Това е същият метод, който използваме в Twitter.com и работи добре за нас.

Всички класове икони са с префикс .icon-за правилното пространство на имената и обхват, подобно на другите ни компоненти. Това ще помогне да се избегнат конфликти с други инструменти.

Glyphicons ни предостави да използваме комплекта Halflings в нашия инструментариум с отворен код, стига да предоставим връзка и кредит тук в документите. Моля, обмислете да направите същото във вашите проекти.

Как да използвам

Bootstrap използва <i>таг за всички икони, но те нямат клас за регистър - само споделен префикс. За да използвате, поставете следния код почти навсякъде:

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

Има и налични стилове за обърнати (бели) икони, готови с един допълнителен клас:

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

Има 140 класа, от които да избирате за вашите икони. Просто добавете <i>етикет с правилните класове и сте готови. Можете да намерите пълния списък в sprites.less или точно тук в този документ.

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

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

Иконите са страхотни, но къде да ги използвате? Ето няколко идеи:

  • Като визуални елементи за вашата навигация в страничната лента
  • За навигация, управлявана изцяло от икони
  • За бутони, които помагат да се предаде значението на дадено действие
  • С връзки за споделяне на контекст на дестинацията на потребителя

По същество навсякъде, където можете да поставите <i>етикет, можете да поставите икона.

Примери

Използвайте ги в бутони, групи бутони за лента с инструменти, навигация или добавяне на формуляр.