Примеры CSS стилей
ВводнаяРазметкаОформлениеТаблицыФормыКнопкиКартинкиИконки
Всем привет. Мне пришла мысль, зачем в примерах выкладывать то, что уж давно написано, и написано гораздо лучше чем получилось бы у начинающего CSS Developer’а. Поэтому, т.к у меня появилось время, в разделе примеров по CSS будет размещена документация по CSS в Twitter Bootstrap. Это самый популярный фреймворк для веб-разработки. К тому же у него довольно много тем, ЗДЕСЬ появляются новые почти каждую неделю.
Прежде чем начать вы ОБЯЗАТЕЛЬНО должны ознакомиться со спецификой HTML и уверенно писать на нем.
Написание:
Все написание и разметка сводится к добавлению стандартных классов (для расширения используйте темы).
Прежде чем начать вы ОБЯЗАТЕЛЬНО должны ознакомиться со спецификой HTML и уверенно писать на нем.
Скачать Bootstrap:
Подключение Bootstrap в HTML:
Для подключения, необходимо указать в HTML код подгрузку CSS и JS файлов.
Пример:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html>
<html>
<head>
<title>Шаблон Bootstrap 101</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Привет, мир!</h1>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
|
Все написание и разметка сводится к добавлению стандартных классов (для расширения используйте темы).
Подробная информация:
Основа шаблона:
|
1
2
3
4
5
|
<body>
<div class="container">
...
</div>
</body>
|
Основа резинового шаблона:
|
1
2
3
4
5
6
7
8
9
10
|
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>
|
Основа сетки:
|
1
2
3
4
|
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
|
Вложенные колонки:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<div class="row">
<div class="span9">
Уровень 1
<div class="row">
<div class="span6">Уровень 2
<div class="row">
<div class="span3">Уровень 3</div>
<div class="span3">Уровень 3</div>
</div>
</div>
<div class="span3">Уровень 2</div>
</div>
</div>
</div>
|
Основа для резиновой сетки:
|
1
2
3
4
|
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
|
Вложение в резиновой сетки:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
div class="row-fluid">
<div class="span12">
Fluid 12
<div class="row-fluid">
<div class="span6">
Fluid 6
<div class="row-fluid">
<div class="span6">Fluid 6</div>
<div class="span6">Fluid 6</div>
</div>
</div>
<div class="span6">Fluid 6</div>
</div>
</div>
</div>
|
Заголовки:
Для заголосков H1-H6 уже установлены стандартные CSS классы.
Размеры:
В Bootstrap основной размер шрифта font-size по умолчанию 14px, с высотой строки line-height в 20px. Это применимо к и всем остальным абзацам. Дополнительно
Для заголосков H1-H6 уже установлены стандартные CSS классы.
Размеры:
В Bootstrap основной размер шрифта font-size по умолчанию 14px, с высотой строки line-height в 20px. Это применимо к и всем остальным абзацам. Дополнительно
(абзац) имеет нижний отступ, равный половине высоты его строки (по умолчанию 10px).
Выделение:
Выделяйте абзац путем добавления lead.
|
1
|
<p class="lead">...</p>
|
Для выделения блоков текста мелким шрифтом используйте тег small.
|
1
2
3
|
<p>
<small>Эта строка текста предназначена для того, чтобы показать, как выглядит мелкий шрифт.</small>
</p>
|
Полужирный:
|
1
|
<strong>набран полужирным шрифтом</strong>
|
Курсив:
|
1
|
<em>выделен курсивом</em>
|
Классы выделения:
|
1
2
3
4
5
|
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
Аббревиатуры:
|
1
|
<p>Аббревиатура слова «attribute» — <abbr title="attribute">attr</abbr>.</p>
|
Адреса:
|
1
2
3
4
5
6
7
8
9
10
11
|
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@gmail.com</a>
</address>
|
Цитаты:
По умолчанию:
|
1
2
3
|
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
|
Опции:
|
1
2
3
4
|
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Кто-то очень известный в <cite title="Source Title">Названии источника</cite></small>
</blockquote>
|
Списки:
Неупорядоченный:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
|
Упорядоченный:
|
1
2
3
4
5
6
7
8
9
10
|
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
|
Не стилизованный:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<ul class="unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
|
Описание:
|
1
2
3
4
5
6
7
8
9
|
<dl>
<dt>Списки описаний</dt>
<dd>Список описания идеально подходит для определения терминов.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
|
Горизонтальный список описания. Выстраивает термины и описания
- в одну линию.
-
1234567891011<dl class="dl-horizontal"><dt>Списки описания</dt><dd>Список описания идеально подходит для обозначения терминов.</dd><dt>Euismod</dt><dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd><dd>Donec id elit non mi porta gravida at eget metus.</dd><dt>Malesuada porta</dt><dd>Etiam porta sem malesuada magna mollis euismod.</dd><dt>Felis euismod semper eget lacinia</dt><dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd></dl>
По умолчанию:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Имя</th>
<th>Фамилия</th>
<th>Имя пользователя</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
|
Дополнительно:
Светло-серый фон у нечетных строк внутри.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Имя</th>
<th>Фамилия</th>
<th>Имя пользователя</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
|
Добавляет рамки и закругляет углы таблицы
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Имя</th>
<th>Фамилия</th>
<th>Имя пользователя</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
|
Делает активным наведение курсора внутри.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Имя</th>
<th>Фамилия</th>
<th>Имя пользователя</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
|
Делает таблицы более компактными, наполовину сокращая отступы.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<table class="table table-condensed">
<thead>
<tr>
<th>#</th>
<th>Имя</th>
<th>Фамилия</th>
<th>Имя пользователя</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
|
Цветные строки:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Продукт</th>
<th>Платеж</th>
<th>Статус</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>TB — Ежемесячно</td>
<td>01/04/2012</td>
<td>Подтвержден</td>
</tr>
<tr class="error">
<td>2</td>
<td>TB — Ежемесячно</td>
<td>02/04/2012</td>
<td>Отклонен</td>
</tr>
<tr class="warning">
<td>3</td>
<td>TB — Ежемесячно</td>
<td>03/04/2012</td>
<td>Задержка</td>
</tr>
<tr class="info">
<td>4</td>
<td>TB — Ежемесячно</td>
<td>04/04/2012</td>
<td>Позвонить для подтверждения</td>
</tr>
</tbody>
</table>
|
По умолчанию:
|
1
2
3
4
5
6
7
8
9
|
<legend>Условные обозначения </legend>
<p> <label>Название</label><br>
<input type="text" placeholder="Type something…"><br>
<span class="help-block">Это пример вспомогательного текста.</span><br>
<label class="checkbox"><br>
<input type="checkbox"> Проверить<br>
</label><br>
<button type="submit" class="btn">Подтвердить</button><br>
</p>
|
Дополнительно:
|
1
|
<input type="text" class="input-medium search-query"> <button type="submit" class="btn">Поиск</button></form>
|
Линейная форма:
|
1
|
<input type="text" class="input-small" placeholder="Email"> <input type="password" class="input-small" placeholder="Password"> <label class="checkbox"> <input type="checkbox"> Запомнить </label> <button type="submit" class="btn">Отправить</button><br>
|
Горизонтальная форма:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<legend>Условные обозначения</legend>
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls"> <input type="text" id="inputEmail" placeholder="Email"> </div>
<p></p></div>
<div class="control-group">
<label class="control-label" for="inputPassword">Пароль</label>
<div class="controls"> <input type="password" id="inputPassword" placeholder="Password"> </div>
<p></p></div>
<div class="control-group">
<div class="controls"> <label class="checkbox"> <input type="checkbox"> Запомнить </label> <button type="submit" class="btn">Отправить</button> </div>
<p></p></div>
<p></p>
|
Поле ввода:
|
1
2
|
<input type="text" placeholder="Text input"><br>
</form>
|
Многострочный текст:
|
1
|
<textarea rows="3"></textarea><br>
|
Флажки и радио-кнопки:
|
1
2
3
|
<label class="checkbox"> <input type="checkbox" value=""> А вот вам опция номер один — очень крутая штука. </label><br>
<label class="radio"> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked=""> А вот вам опция номер один — очень крутая штука. </label><br>
<label class="radio"> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Опция два — это нечто другое. Выбрав ее, отменяете первую. </label><br>
|
Список выбора:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<p></p>
<select multiple="multiple">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
|
Форма поиска:
|
1
2
3
|
<div class="input-append">
<input type="text" class="span2 search-query"> <button type="submit" class="btn">Поиск</button>
</div>
|
Настройка размеров:
|
1
2
3
4
5
6
7
8
9
|
<div class="controls docs-input-sizes">
<input class="input-mini" type="text" placeholder=".input-mini"><br>
<input class="input-small" type="text" placeholder=".input-small"><br>
<input class="input-medium" type="text" placeholder=".input-medium"><br>
<input class="input-large" type="text" placeholder=".input-large"><br>
<input class="input-xlarge" type="text" placeholder=".input-xlarge"><br>
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
</div>
<p></p>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<div class="controls docs-input-sizes">
<input class="span1" type="text" placeholder=".span1"><br>
<input class="span2" type="text" placeholder=".span2"><br>
<input class="span3" type="text" placeholder=".span3"><p></p>
<select class="span1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select class="span2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select class="span3">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select></div>
<p></p>
|
Неформатируемые поля:
|
1
|
<span class="input-xlarge uneditable-input">Some value here</span>
|
Вспомогательный текст:
|
1
|
<input type="text"> <span class="help-inline">Строчный вспомогательный текст</span><br>
|
Состояния:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<div class="control-group warning">
<label class="control-label" for="inputWarning">Предупреждение</label><p></p>
<div class="controls">
<input type="text" id="inputWarning"><br>
<span class="help-inline">Что-то идет не так</span>
</div>
<p></p></div>
<div class="control-group error">
<label class="control-label" for="inputError">Ошибка</label><p></p>
<div class="controls">
<input type="text" id="inputError"><br>
<span class="help-inline">Пожалуйста, исправьте ошибку</span>
</div>
<p></p></div>
<div class="control-group info">
<label class="control-label" for="inputError">Информация</label><p></p>
<div class="controls">
<input type="text" id="inputError"><br>
<span class="help-inline">Имя пользователя</span>
</div>
<p></p></div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">Выполнено успешно</label><p></p>
<div class="controls">
<input type="text" id="inputSuccess"><br>
<span class="help-inline">Урааа!</span>
</div>
<p></p></div>
<p></p>
|
По умолчанию:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Кнопка</th>
<th>class=»"</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><button type="button" class="btn">Default</button></td>
<td><code>btn</code></td>
<td>Стандартная серая кнопка с градиентом</td>
</tr>
<tr>
<td><button type="button" class="btn btn-primary">Главная кнопка</button></td>
<td><code>btn btn-primary</code></td>
<td>Обеспечивает дополнительную визуальную ширину и указывает на первичное действие в наборе кнопок</td>
</tr>
<tr>
<td><button type="button" class="btn btn-info">Информация</button></td>
<td><code>btn btn-info</code></td>
<td>Используется как альтернатива стилям по умолчанию</td>
</tr>
<tr>
<td><button type="button" class="btn btn-success">Успешное действие</button></td>
<td><code>btn btn-success</code></td>
<td>Указывает на успешное или положительное действие</td>
</tr>
<tr>
<td><button type="button" class="btn btn-warning">Предупреждение</button></td>
<td><code>btn btn-warning</code></td>
<td>Указывает на то, что действие должно совершаться с предусмотрительностью</td>
</tr>
<tr>
<td><button type="button" class="btn btn-danger">Опасность</button></td>
<td><code>btn btn-danger</code></td>
<td>Указывает на опасное или потенциально негативное действие</td>
</tr>
<tr>
<td><button type="button" class="btn btn-inverse">Инверсия</button></td>
<td><code>btn btn-inverse</code></td>
<td>Чередующиеся темно-серые кнопки, не связанные с определенным действием</td>
</tr>
<tr>
<td><button type="button" class="btn btn-link">Ссылка</button></td>
<td><code>btn btn-link</code></td>
<td>Отмена выделения кнопки. Кнопка получает вид ссылки, сохраняя при этом свои функции</td>
</tr>
</tbody>
</table>
|
Размеры:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<p>
<button type="button" class="btn btn-large btn-primary">Большая кнопка</button> <button type="button" class="btn btn-large">Большая кнопка</button>
</p>
<p>
<button type="button" class="btn btn-primary">Кнопка по умолчанию</button> <button type="button" class="btn">Кнопка по умолчанию</button>
</p>
<p>
<button type="button" class="btn btn-small btn-primary">Маленькая кнопка</button> <button type="button" class="btn btn-small">Маленькая кнопка</button>
</p>
<p>
<button type="button" class="btn btn-mini btn-primary">Мини-кнопка</button> <button type="button" class="btn btn-mini">Мини-кнопка</button>
</p>
<p></p>
|
Вложенная кнопка:
|
1
2
|
<button class="btn btn-large btn-block btn-primary" type="button">Вложенная кнопка</button>
<button class="btn btn-large btn-block" type="button">Вложенная кнопка</button>
|
Неработающая:
|
1
2
|
<a href="#" class="btn btn-large btn-primary disabled">Исходная ссылка</a>
<a href="#" class="btn btn-large disabled">Ссылка</a>
|
|
1
|
<img src="http://placehold.it/140x140" class="img-rounded"> <img src="http://placehold.it/140x140" class="img-circle"> <img src="http://placehold.it/140x140" class="img-polaroid">
|
Как использовать:
Все иконки требуют использования тега
|
1
|
<i>
|
|
1
|
icon-
|
|
1
|
<i class="icon-search"></i>
|
