CSS

Примеры CSS стилей

примеры css стилей

ВводнаяРазметкаОформлениеТаблицыФормыКнопкиКартинкиИконки
Всем привет. Мне пришла мысль, зачем в примерах выкладывать то, что уж давно написано, и написано гораздо лучше чем получилось бы у начинающего CSS Developer’а. Поэтому, т.к у меня появилось время, в разделе примеров по CSS будет размещена документация по CSS в Twitter Bootstrap. Это самый популярный фреймворк для веб-разработки. К тому же у него довольно много тем, ЗДЕСЬ появляются новые почти каждую неделю.
Прежде чем начать вы ОБЯЗАТЕЛЬНО должны ознакомиться со спецификой HTML и уверенно писать на нем.

Подключение Bootstrap в HTML:
Для подключения, необходимо указать в HTML код подгрузку CSS и JS файлов.
Пример:

Написание:
Все написание и разметка сводится к добавлению стандартных классов (для расширения используйте темы).

Подробная информация:
Основа шаблона:
примеры css стилей

Основа резинового шаблона:
примеры css стилей

Основа сетки:
примеры css стилей

Вложенные колонки:

Основа для резиновой сетки:

Вложение в резиновой сетки:

Заголовки:
примеры css стилей
Для заголосков H1-H6 уже установлены стандартные CSS классы.
Размеры:
В Bootstrap основной размер шрифта font-size по умолчанию 14px, с высотой строки line-height в 20px. Это применимо к и всем остальным абзацам. Дополнительно

(абзац) имеет нижний отступ, равный половине высоты его строки (по умолчанию 10px).
примеры css стилей

Выделение:

Выделяйте абзац путем добавления lead.
примеры css стилей

Для выделения блоков текста мелким шрифтом используйте тег small.
примеры css стилей

Полужирный:
примеры css стилей

Курсив:
примеры css стилей

Классы выделения:
примеры css стилей

Аббревиатуры:
примеры css стилей

Адреса:
примеры css стилей

Цитаты:

По умолчанию:
примеры css стилей

Опции:
примеры css стилей

Списки:

Неупорядоченный:
примеры css стилей

Упорядоченный:
примеры css стилей

Не стилизованный:
примеры css стилей

Описание:
примеры css стилей

Горизонтальный список описания. Выстраивает термины и описания

в одну линию.
примеры css стилей
По умолчанию:
примеры css стилей

Дополнительно:
Светло-серый фон у нечетных строк внутри.
примеры css стилей

Добавляет рамки и закругляет углы таблицы
примеры css стилей

Делает активным наведение курсора внутри.
примеры css стилей

Делает таблицы более компактными, наполовину сокращая отступы.
примеры css стилей

Цветные строки:
примеры css стилей
примеры css стилей

По умолчанию:
примеры css стилей

Дополнительно:
примеры css стилей

Линейная форма:
примеры css стилей

Горизонтальная форма:
примеры css стилей

Поле ввода:
примеры css стилей

Многострочный текст:
примеры css стилей

Флажки и радио-кнопки:
примеры css стилей

Список выбора:
примеры css стилей

Форма поиска:
примеры css стилей
примеры css стилей

Настройка размеров:
примеры css стилей

Сетка размеров:
примеры css стилей
примеры css стилей

Неформатируемые поля:
примеры css стилей

Вспомогательный текст:
примеры css стилей

Состояния:
примеры css стилей

По умолчанию:
примеры css стилей

Размеры:
примеры css стилей

Вложенная кнопка:

Неработающая:
примеры css стилей

примеры css стилей

Как использовать:
Все иконки требуют использования тега

с уникальным классом и префиксом . Для использования поместите код с примера ниже в нужное место:

примеры css стилей
примеры css стилей
примеры css стилей