Css · twitter bootstrap російською

h6. Тема 6

Приклад основного тексту

У Bootstrap за замовчуванням font-size дорівнює 14px. а line-height становить 20px. Ці правила застосовуються до елементу і всьому тексту. На додаток, елемент

(Параграф) має відступ знизу в половину line-height тобто дорівнює 10px за замовчуванням.

Було восьмій годині ранку - час, коли офіцери, чиновники і приїжджі звичайно після спекотної, задушливій ночі купалися в морі і потім йшли в павільйон пити каву або чай. Іван Андрійович Лаєвський, молода людина ліг двадцяти восьми, худорлявий блондин, в кашкеті міністерства фінансів і в туфлях, прийшовши купатися, застав на березі багато знайомих і між ними свого приятеля, військового доктора Самойленко.

З великою стриженої головою, без шиї, червоний, носастий, з волохатими чорними бровами і з сивими бакенами, товстий, обрюзглого, та ще до того ж з хрипким армійським басом, цей Самойленко на всякого знову приїжджав виробляв неприємне враження бурбона і Хрипуна, але проходило два- три дні після першого знайомств, і обличчя його починало здаватися незвичайна добрим, милим і навіть красивим. Незважаючи на свою незграбність і грубуватий тон. его була людина сумирний, безмежно добрий, благодушний і обов'язковий.

Цей лист повинен Вам доставити мій ключник Трохим рівно о 8 годині вечора. Якщо ж привезе його пожже, то побийте його по щоках, по професорськи, нічого з цим племенем церемониться. Якщо доставить пожже то значить в шинок анафема заходив. Звичай їздити до сусідів не нами вигадана не нами і закінчиться, а тому неодмінно пріежжайте з машинками і книгами. Я б сам до Вас поїхав, так конфузлів дуже і сміливості не вистачає ..

клас Lead

Виділіть параграф додавши клас .lead.

Цей лист повинен Вам доставити мій ключник Трохим рівно о 8 годині вечора.

Створено за допомогою Less

Оформлення засноване на двох LESS-змінних у файлі variables.less. @baseFontSize і @baseLineHeight. Перша задає font-size. друга встановлює line-height. Використовуючи прості математичні рівняння ми задаємо зовнішні і внутрішні відступи елементів, висоту рядка і багато іншого. Редагуйте їх для оптимізації і створення свого персонального Bootstrap'а.

виділення шрифту

Використовуйте стандартні HTML-теги для виділення шрифту.

Для зменшення значення тексту на сторінці використовуйте тег small.

Було восьмій годині ранку - час, коли офіцери, чиновники і приїжджі звичайно після спекотної, задушливій ночі купалися в морі і потім йшли в павільйон пити каву або чай.

виділення напівжирним

Використовується для виділення важливого тексту

Наступні слова в реченні дуже важливі і вимагають особливої ​​уваги з боку Новомосковсктеля.

виділення Курсивом

Використовуйте для виділення цитат і мови в тексті

Наступний текст був сказаний дуже давно: Ніколи не воюйте з українськими. На кожну вашу військову хитрість вони відповідять непередбачуваною дурістю.

Хвилину уваги! використовуйте тег і в стандарті HTML5. тег використовуйте для простого виділення тексту, акцентуючи на ньому увагу, коли як тег використовується для виділення мови, технічної інформації тощо

Класи для виділення тексту

Передайте додаткове значення тексту використовуючи колірне рішення.

Науки юнаків живлять

Отрада старим подають

У щасливого життя прикрашають

У нещасний випадок бережуть

У домашніх труднощі втіха

абревіатура

Стилізоване уявлення стандартного HTML-тега . Помістіть слово всередину елемента для створення абревіатури або акронима - при наведенні на який користувач побачить розшифровку. Абревіатури з атрибутом title мають точкове підкреслення і курсор довідки при наведенні.

Використовуйте для абревіатур і скорочень; пояснення скорочення відображається при наведенні курсору, Вкладіть додатковий атрибут title до тегу для пояснювального тексту

Абревіатура "Комплексне Автомобільне Страхування Крім Відповідальності" - КАСКО.

Додайте клас .initialism для виділення абревіатури великими літерами.

html найкраща річ придумана людиною після винаходу колеса.

Нижче два приклади як тег

може бути використаний:

При форматуванні використовуйте тег
для розриву рядків.

Цитати за замовчуванням

В горах цієї ночі прохолодно.
У розвідці втомившись днем.

Доповнення в цитатах

Додаткові стилі і елементи для використання з цитатами.

Вказівка ​​оригінального джерела

Add tag for identifying the source. Wrap the name of the source work in .

У кавнику кави клекоче,
Солдати втомлені сплять.
Над ним арагонские лаври
Важкою листям шелестять.

альтернативне розташування

Для вирівнювання тексту по праву сторону, додайте клас class = "pull-right" до тегу

:

Я вас благаю - тіштеся, пане!
Спасенью радіти треба більше,
Чим сумувати про тяжких втрати.

Шекспір ​​Вільям - Буря

невпорядкований

Список в якому розташування елементів не має особливого значення.

  • 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

упорядкований

Список в якому нумерація елементів має особливе значення.

  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

Чи не стилізований

Список елементів без нумерації і стилю, де list-style: none.

  • 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

списки опису

Список елементів з додатковим описом.

Списки описів Списки описів ідеально підходять для визначення термінів. Термін Опис терміна. Donec id elit non mi porta gravida at eget metus. Malesuada porta Etiam porta sem malesuada magna mollis euismod.

Горизонтальні списки опису

Термін і опис в елементі

будуть розташовуватися горизонтально відносно один одного.

Списки описів Списки описів ідеально підходять для визначення термінів. Термін Опис терміна. 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.

Рядкове виділення коду

Помістіть строковий код в тег .

наприклад:

виділений в рядку.

Блочне виділення коду

використовуйте 

 для виділення 2-х і більше рядків коду. Уникайте використання кутових дужок <и>, для коректного відображення фрагментів коду.


Ви можете додатково додати клас .pre-scrollable. який задасть максимальну висоту (max-width) блоку в 350px і додасть вертикальний скроллбар.


За допомогою функції htmlspecialchars () ви можете отримати автоматичне перетворення кутових "<>"Дужок в спецсимволи. І всіх інших символів HTML розмітки.


Використовуйте той же самий тег 
 як і в попередньому прикладі з додаванням двох класів.


Таблиця за замовчуванням


Для додавання стандартного і мінімального форматування таблиці-просто додайте клас .table до будь-якого елементу 
. Стандартне форматування містить мінімальні відступи і тільки горизонтальні лінії розділяють рядки.
стандартні форми
Стандартне форматування форм включено в Bootstrap і працює без додаткових класів для 
 і без якої-небудь зміни в стандартній HTML-розмітці форм. За замовчуванням: вирівняні по лівому краю, підписи елементів зверху від полів і компактні за розміром.
Додаткові класи форматування
Bootstrap включає в себе чотири найбільш часто використовуваних стилю форм.
форма пошуку
Додайте клас .form-search до форми, і клас .search-query до полю  для додавання поля з сильно закругленими кутами.
лінійна форма
Додайте клас .form-inline для поліпшення виду форми в горизонтальному положенні і оптимізації відступів між елементами форми.
горизонтальні форми
Вирівняні по правому краю і розташовані зліва підпису полів. Вимагає невелика зміна в стандартній розмітці форми:
    

  • Додайте клас .form-horizontal до форми
    • 

  • Помістіть лейбли і елементи форми в div з класом .control-group
    • 

  • Додайте клас .control-label до елементу label
    • 

  • Помістіть всі додаткові елементи управління (кнопки, чекбокси і т.п.) в div з класом .controls це необхідно для правильного розташування елементів
    • 

Підтримувані елементи форм
Приклади використання стандартних елементів форм.
Input Текстове поле
Обов'язково завжди вказуйте type. не дивлячись на значення за замовчуванням.
Поле підтримуване введення тексту в декілька рядків. Змінюйте значення атрибута rows для завдання мінімальної кількості відображуваних рядків.
Відключення зміни розміру поля textarea через CSS:
 Для відключення можливості змінювати розмір поля textarea в CSS-код описує властивості елемента необхідно прописати resize: none; (Працює не у всіх браузерах).
Обмеження максимальної кількості символів, що вводять:
 Для обмеження максимальної кількості символів, що вводять в поле textarea використовуйте атрибут maxlength = "число"
Checkbox і radio прапорці та радіо-кнопки
Чек-бокси використовуються для множинного вибору в формі, коли як Кадіо-кнопки для вибору одного пункту з безлічі представлених.
За замовчуванням
Лінійні чек-бокси
Додайте клас .inline до чек-боксів які необхідно розташувати в один рядок.
Select селектор
Використовуйте елемент за замовчуванням або додайте атрибут multiple = "multiple" для множинного вибору зі списку.
Додатки до форм
Використовуйте додаткові елементи в формах для найкращого user experience.
Пред-йдуть і Пост-йдуть елементи
За замовчуванням
Помістіть span елемент з класом .add-on і елемент input з одним або двома класами для додавання Перед- і Пост-йдуть елементів.
комбіновані
Використовуйте відразу два елементи з класом .add-on.
Кнопки замість тексту
замість . використовуйте button з класом .btn для додавання Перед- і Пост-йдуть кнопок.
форма пошуку
Управління розмірами полів
Використовуйте стандартні класи .input-large для контролю розмірів, або .span * класи для відповідності розмірам вашої сітки шаблону.
стандартні класи
Класи відповідно до сіткою шаблону
Використовуйте класи починаючи від .span1 до .span12 для створення полів введення розміром відповідає розміру сітки шаблону.
Для розташування полів введення на одному рядку, при цьому використовуючи розміри відповідно до розмірів сітки шаблону, використовуйте клас .controls-row для правильного розташування елементів.
Відключене (неактивний) поле
Відключення елемента форми без зміни коду елемента і додавання додаткових атрибутів.
Елементи управління формами
Закінчити форму найлогічніше групою елементів контролю (кнопками). Використовуючи .form-horizontal. кнопки та інші елементи будуть автоматично поміщені відразу після інших елементів форми.
допоміжний текст
Рядковий допоміжний текст
Блоковий допоміжний текст
Контроль станів елементів форми
Input focus
Bootstrap надає стилі для активних елементів форм і disabled (відключені елементи). Ми відключили стандартні стилі форм в Webkit, такі як outline. натомість додавши box-shadow для селектора: focus.
Поля з невірно введеними даними
Стилі поля через стандартний браузерні селектор: invalid. Вкажіть тип type поля через та додайте атрибут required. Якщо ввести дані невірно, поле буде червоним і форма не буде відправлена, якщо ввести email в поле нижче - поле буде виділено синім кольором і форма буде відправлена. Дії полів, робота форми і реакція браузера залежить від бренду і версії браузера.
Відключене (неактивний) поле
Додайте атрибут disabled до поля input.
Стану елементів форми валідація
Додані стану для errors (помилок), warnings (попереджень) і success (успішних). Наприклад, для відображення помилки в заповненні поля додайте клас .error до батьківського елементу носить клас .control-group.
стандартні кнопки
Стиль кнопки може бути застосований до будь-якого елементу з класом .btn. Але швидше за все Ви будете застосувати його до елементів  і