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

Цялата типографска мрежа се основава на две променливи 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.

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

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>всеки HTML като цитат. За директни котировки препоръчваме <p>.

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

<блоков цитат>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  <small> Някой известен </small>
</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>.

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

Основен блок

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

<p>Примерен текст тук...</p>

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

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

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

Google Prettify

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

<p> Примерен текст тук... </p>

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

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

Етикет	Описание
<table>	Обвиващ елемент за показване на данни в табличен формат
<thead>	Елемент контейнер за заглавни редове на таблица ( <tr>) за етикетиране на колони на таблица
<tbody>	Елемент контейнер за редовете на таблицата ( <tr>) в тялото на таблицата
<tr>	Елемент на контейнер за набор от клетки на таблица ( <td>или <th>), който се появява на един ред
<td>	Клетка на таблицата по подразбиране
<th>	Специална клетка от таблица за етикети на колона (или ред, в зависимост от обхвата и разположението) Трябва да се използва в a<thead>
<caption>	Описание или резюме на това, което съдържа таблицата, особено полезно за екранни четци

<таблица>
  <thead>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

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

< клас на таблица = "таблица" > 
  …
</table>

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

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

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

<table class = "table table-striped" > 
  …
</table>

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

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

<table class = "table table-bordered" > 
  …
</table>

#	Първо име	Фамилия	Потребителско име
1	Марк	Ото	@mdo
	Марк	Ото	@getbootstrap
2	Джейкъб	Торнтън	@дебел
3	Птицата Лари		@туитър

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

<table class = "table table-condensed" > 
  …
</table>

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

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

<table class = "table table-striped table-bordered table-condensed" > 
  ...
</table>

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

Гъвкав HTML и CSS

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

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

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

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

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

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

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

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

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

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

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

Име на етикета

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

Проверете ме Изпращане

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

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

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

Търсене

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

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

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

Помни ме Впиши се

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

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

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

Въвеждане на текст

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

Квадратче за отметка

Първият вариант е това и това - не забравяйте да включите защо е страхотно

Изберете списък

нещо 2 3 4 5

Избор на множество символи

1 2 3 4 5

Въвеждане на файл

Текстово поле

Запазите промените Отказ

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

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

<form class = "form-horizontal" > 
  <набор от полета>
    <legend> Текст на легендата </legend>
    <div class = "control-group" > 
      <label class = "control-label" for = "input01" > Въвеждане на текст </label>  
      <div class = "controls" > 
        <input type = "text" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > Поддържащ помощен текст </p> 
      </div>
    </div>
  </fieldset>
</form>

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

---

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

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

<fieldset
  class = "control-group error" >
  …
</fieldset>

Фокусиран вход

Нередактируем вход

Има някаква стойност тук

Дезактивиран вход

Деактивирано квадратче за отметка

Това квадратче е деактивирано

Вход с предупреждение

Може нещо да се е объркало

Въвеждане с грешка

Моля коригирайте грешката

Въвеждане с успех

Уаууу!

Изберете с успех

1 2 3 4 5 Уаууу!

Запазите промените Отказ

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

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

---

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

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

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

---

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

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

---

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

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

Размери на мрежата на формата

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

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

Алтернативни размери

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

Добавен текст

@

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

Добавен текст

0,00

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

Добавяне и предваряване

$ 0,00

Добавяне с бутон

Отивам!

Добавяне с два бутона

Търсене Настроики

Вградени квадратчета за отметка

1 2 3

Квадратчета за отметка

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

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

Радио бутони

Първият вариант е това и това - не забравяйте да включите защо е страхотно Вариант две може да е нещо друго и избирането му ще премахне избора на опция едно

Запазите промените Отказ

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

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

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

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

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

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

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

Първично действие Действие

Първично действие Действие

Първично действие Действие

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

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

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

Основен бутон Бутон

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

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

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

Връзка Бутон

<a class = "btn" href = "" > Връзка </a>  
<button class = "btn" type = "submit" >  
  Бутон
</button>
<input class = "btn" type = "button"  
         стойност = "Вход" >
<input class = "btn" type = "submit"  
         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>таг за всички икони, но те нямат клас за регистър - само споделен префикс. За да използвате, поставете следния код почти навсякъде:

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

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

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

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

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

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

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

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

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

Опресняване Разгледайте Изтрий

Коментирайте Настройки Повече информация

Имейл адрес