HTML KickStart

Ultra–Lean HTML5, CSS, & JS Building Blocks
for Rapid Website Production


Responsive

MIT Open Source

479 Icons

Designer Friendly

Download (Github)

Скачано более 91036 раз :)

Перво-наперво

Установка

  1. Скачайте HTML KickStart
  2. Включите jQuery и HTML KickStart
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="js/kickstart.js"></script> <!-- KICKSTART -->
    <link rel="stylesheet" href="css/kickstart.css" media="all" /> <!-- KICKSTART -->
    
  3. Скопируйте элементы в ваш HTML

Браузеры

HTML KickStart пртестирован и работает в IE 8+, Safari, Chrome, Firefox, Opera, Safari IOS, Browser и Chrome Android.

Примечание

Не забудьте использовать доктайп HTML5 <!DOCTYPE html>

Кнопки

Кнопки


Ещё одна



Со значком




Цвета


.orange


Стили



.pop

Панель кнопок

  
     
<!-- Размеры кнопок -->
<button>Button</button>
<a class="button" href="">A.button</a>
<button class="small">Small</button>
<button class="small" disabled="disabled">Small (disabled)</button>
<button class="medium">Medium</button>
<button class="large">Large</button>
<!-- Кнопки со значком -->
<button class="small"><i class="fa fa-picture-o"></i> Small</button>
<button class="medium"><i class="fa fa-coffee"></i> Medium</button>
<button class="large"><i class="fa fa-leaf"></i> Large</button>
<!-- Цвета кнопок -->
<button class="blue"><i class="fa fa-star"></i> .blue</button>
<a class="button orange" href=""><i class="fa fa-music"></i> .orange</a>
<button class="small pink"><i class="fa fa-plus-square"></i> .pink</button>
<button class="medium green"><i class="fa fa-play-circle"></i> .green</button>
<button class="large red"><i class="fa fa-minus-square"></i> .red</button>
<!-- По умолчанию (без стилизации) -->
<button>default</button>

<!-- Pill -->
<button class="pill"><i class="fa fa-star"></i> .pill</button>

<!-- Pop -->
<a class="button pop" href=""><i class="fa fa-music"></i> .pop</a>

<!-- Inset -->
<button class="inset"><i class="fa fa-plus-square"></i> .inset</button>

<!-- Square -->
<button class="square"><i class="icon-minus-square"></i> .square</button>
<!-- Панель кнопок со значками -->
<ul class="button-bar">
<li><a href=""><i class="fa fa-pencil"></i> Edit</a></li>
<li><a href=""><i class="fa fa-tag"></i> Tag</a></li>
<li><a href=""><i class="fa fa-upload"></i> Upload</a></li>
<li><a href=""><i class="fa fa-plus-sign"></i></a></li>
</ul>

Списки

Неупорядоченный

  • Яблоко
  • Банан
  • Апельсин
  • Груша

Упорядоченный

  1. Яблоко
  2. Банан
  3. Апельсин
  4. Груша

UL.icons

  • Яблоко
  • Банан
  • Апельсин
  • Груша

UL.alt

  • Яблоко
  • Банан
  • Апельсин
  • Груша
<!-- Неупорядоченный список -->
<ul>
<li>Яблоко</li>
<li>Банан</li>
<li>Апельсин</li>
<li>Груша</li>
</ul>
<!-- Упорядоченный список -->
<ol>
<li>Яблоко</li>
<li>Банан</li>
<li>Апельсин</li>
<li>Груша</li>
</ol>
<!-- Список со значками -->
<ul class="icons">
<li><i class="fa fa-check"></i>Яблоко</li>
<li><i class="fa fa-check"></i>Банан</li>
<li><i class="fa fa-check"></i>Апельсин</li>
<li><i class="fa fa-remove"></i>Груша</li>
</ul>
<!-- Альтернативный стиль списка -->
<ul class="alt">
<li>Яблоко</li>
<li>Банан</li>
<li>Апельсин</li>
<li>Груша</li>
</ul>

Таблицы

Таблица (по умолчанию)

Item1 Item2 Item3
Item1 Item2 Item3
Item1 Item2 Item3
Item1 Item2 Item3
Item1 Item2 Item3

Table.striped

  Item2 Item3
Item1 Item2 Item3
Item1 Item2 Item3
Item1 Item2 Item3
Item1 Item2 Item3

Table.tight

Item1 Item2 Item3
Item1 Item2 Item3
Item1 Item2 Item3
Item1 Item2 Item3
Item1 Item2 Item3

Table.sortable

Name Number Color Actions
Joshua 555-4325 Blue
Peter 555-5698 Gold
Mary 666-7654 Red
Gretty 555-6732 Pink
<!-- Таблица -->
<table cellspacing="0" cellpadding="0">
<thead><tr>
	<th>Item1</th>
	<th>Item2</th>
	<th>Item3</th>
</tr></thead>
<tbody><tr>
	<td>Item1</td>
	<td>Item2</td>
	<td>Item3</td>
</tr><tr>
	<td>Item1</td>
	<td>Item2</td>
	<td>Item3</td>
</tr><tr>
	<td>Item1</td>
	<td>Item2</td>
	<td>Item3</td>
</tr><tr>
	<td>Item1</td>
	<td>Item2</td>
	<td>Item3</td>
</tr></tbody>
</table>
<!-- Table w/Side -->
<table cellspacing="0" cellpadding="0">
<thead><tr>
	<th> </th>
	<th>Item2</th>
	<th>Item3</th>
</tr></thead>
<tbody><tr>
	<th>Item1</th>
	<td>Item2</td>
	<td>Item3</td>
</tr><tr>
	<th>Item1</th>
	<td>Item2</td>
	<td>Item3</td>
</tr><tr>
	<th>Item1</th>
	<td>Item2</td>
	<td>Item3</td>
</tr><tr>
	<th>Item1</th>
	<td>Item2</td>
	<td>Item3</td>
</tr></tbody>
</table>
<!-- Table striped -->
<table class="striped">
...
</table>

<!-- Table tight -->
<table class="tight">
...
</table>

<!-- Table sortable -->
<table class="sortable">
...
</table>

<!-- Table combined Styles -->
<table class="striped tight sortable">
...
</table>

Всплывающие подсказки

Подсказка

Всплывающие подсказки удивительны. Они подсказки разработаны, чтобы имитировать подсказки браузера по умолчанию.

Наведите курсор на примеры снизу и справа.

Использование
class="tooltip" +
title="Это содержание подсказки"

Позиции подсказок

  • .tooltip (по умолчанию)
  • .tooltip-top
  • .tooltip-right
  • .tooltip-left
  • .tooltip-bottom

Подсказка с HTML-контентом

.tooltip + data-content="#ID"
 
HTML-контент

Это содержание HTML. Вы можете разместить любой HTML-код в подсказке.

<!-- Подсказка по умолчанию (сверху) -->
<span class="tooltip" title="Это подсказка по умолчанию (сверху)">.tooltip</span>

<!-- Подсказка сверху -->
<span class="tooltip-top" title="Это подсказка сверху">.tooltip-top</span>

<!-- Подсказка справа -->
<span class="tooltip-right" title="Это подсказка справа">.tooltip-right</span>

<!-- Подсказка слева -->
<span class="tooltip-left" title="Это подсказка слева">.tooltip-left</span>

<!-- Подсказка снизу -->
<span class="tooltip-bottom" title="Это подсказка снизу">.tooltip-bottom</span>
<!-- Наведение -->
<button class="tooltip medium orange pill" data-content="#tooltipcontentID">Hover Over Me</button>

<!-- Щелчок -->
<button class="tooltip medium blue pill" data-content="#tooltipcontentID" data-action="click">Click Me</button>

<!-- Содержание подсказки -->
<div class="tooltip-content" id="tooltipcontentID"><h5>HTML-контент</h5>
<img src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" />
<p>Это содержание HTML. Вы можете разместить любой HTML-код в подсказке.</p></div>

Типографика

Абзацы

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat

El illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Цитата

lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio Someone Important

Малая цитата

lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio Someone Important

Инлайн-стили

  • Выделение
  • Выразительность
  • Ссылка
  • Зачеркивание
  • Значок в строке
  • <h1>Образец кода</h1>

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5
Заголовок 6

Адрес

1234 South Creek Lane
Calgary, Alberta, Canada
T4B–1S6

<!-- Заголовки 1–6 -->
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>
<!-- Абзац -->
<p>Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt...</p>
<p>El illum dolore eu feugiat nulla facilisis at vero eros et accumsan...</p>
<!-- Цитата -->
<blockquote>
<p>
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit 
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
et iusto odio
<span>Someone Important</span>
</p>
</blockquote>
<!-- Малая цитата -->
<blockquote class="small">
<p>
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit 
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
et iusto odio
<span>Someone Important</span>
</p>
</blockquote>
<!-- Выделение -->
<strong>Strong</strong>

<!-- Выразительность -->
<em>Emphasis</em>

<!-- Ссылка -->
<a href="">Inline Link</a>

<!-- Зачеркивание -->
<strike>Strike</strike>

<!--Значок в строке -->
Inline <i class="icon-film"></i> Icons

<!--Образец кода -->
<code>&lt;h1&gt;Sample Code&lt;/h1&gt;</code>
<!-- Адрес -->
<address><p>
1234 South Creek Lane<br />
Calgary, Alberta, Canada<br />
T4B–1S6
</p>
</address>

Горизонтальные линии

HR


HR.alt1


HR.alt2


<!-- HR -->
<hr />

<!-- HR.alt1 -->
<hr class="alt1" />

<!-- HR.alt2 -->
<hr class="alt2" />

Значки/Глифы (иконки)

HTML KickStart использует
Значки Font Awesome 4.2.0!

Использование значков: <i class="fa fa-globe"></i>.
Замените fa-globe значком, который вы хотели бы использовать из Cheatsheet.

Чтобы увеличить размер значка относительно его контейнера, используйте icon-large, icon-2x, icon-3x, или icon-4x.

.pull-left Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.pull-right Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.fa-border Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Преформатированный код

PRE HTML

<html>
<head><title>This is a title</title></head>
<body class="subpage">
	<!-- Здесь контент -->
</body>
</html>

PRE CSS

body{
font-weight:bold;
color:#000;
line-height:150%;
}

PRE JS

$(document).ready(function(){
	alert('jQuery');
});
<!-- Код HTML -->
<pre>
…здесь располагается код… 
</pre>
<!-- Код CSS -->
<pre>
…здесь располагается код… 
</pre>
<!-- Код Javascript -->
<pre>
…здесь располагается код… 
</pre>
<!-- Код PHP -->
<pre>
…здесь располагается код… 
</pre>

Вкладки

Вкладки слева

Tab1
Tab2
Tab3

Вкладки по центру

Tab1
Tab2 has an icon.
Tab3

Вкладки справа

Tab1
Tab2
Tab3
<!-- Вкладки слева -->
<ul class="tabs left">
<li><a href="#tabr1">Tab1</a></li>
<li><a href="#tabr2">Tab2</a></li>
<li><a href="#tabr3">Tab3</a></li>
</ul>

<div id="tabr1" class="tab-content">Tab1</div>
<div id="tabr2" class="tab-content">Tab2</div>
<div id="tabr3" class="tab-content">Tab3</div>
<!-- Вкладки по центру -->
<ul class="tabs center">
<li><a href="#tabc1">Tab1</a></li>
<li><a href="#tabc2"><i class="fa fa-folder-open"></i> Tab2</a></li>
<li><a href="#tabc3">Tab3</a></li>
</ul>

<div id="tabc1" class="tab-content">Tab1</div>
<div id="tabc2" class="tab-content">Tab2 has an icon.</div>
<div id="tabc3" class="tab-content">Tab3</div>
<!-- Вкладки справа -->
<ul class="tabs right">
<li><a href="#tabr1">Tab1</a></li>
<li><a href="#tabr2">Tab2</a></li>
<li><a href="#tabr3">Tab3</a></li>
</ul>

<div id="tabr1" class="tab-content">Tab1</div>
<div id="tabr2" class="tab-content">Tab2</div>
<div id="tabr3" class="tab-content">Tab3</div>
<!-- Breadcrumbs -->
<ul class="breadcrumbs">
<li><a href="">Home</a></li>
<li><a href="">Category</a></li>
<li><a href="">Sub Category</a></li>
<li><a href="">Название открытой страницы</a></li>
</ul>
<!-- Альтернативный стиль -->
<ul class="breadcrumbs alt1">
<li><a href="">Home</a></li>
<li><a href="">Category</a></li>
<li><a href="">Sub Category</a></li>
<li><a href="">Название открытой страницы</a></li>
</ul>

Сетки/Колонки

Адаптивная и гибкая сетки

Функция адаптивности является опциональной. Используйте только классы .grid & .grid.flex если вы хотите применять адаптивные сетки. Измените размеры окна вашего браузера, чтобы увидеть адаптивность в действии.

Адаптивная сетка:
<div class="grid">

Гибкая адаптивная сетка:
<div class="grid flex">

Вспомогательные классы сетки:
.show-desktop .hide-desktop .show-tablet .hide-tablet .show-phone .hide-phone

Все колонки автоматически получают класс .column. Применяйте отступы и рамки непосредственно к колонкам
.column{border:1px solid red;padding:10px;}
col_12
col_1
col_11
col_2
col_10
col_3
col_9
col_4
col_8
col_5
col_7
col_6
col_6
col_7
col_5
col_8
col_4
col_9
col_3
col_10
col_2
col_11
col_1
col_12
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
<!--Колонки/Сетка -->
<div class="col_12">col_12</div>
<div class="col_1">col_1</div><div class="col_11">col_11</div>
<div class="col_2">col_2</div><div class="col_10">col_10</div>
<div class="col_3">col_3</div><div class="col_9">col_9</div>
<div class="col_4">col_4</div><div class="col_8">col_8</div>
<div class="col_5">col_5</div><div class="col_7">col_7</div>
<div class="col_6">col_6</div><div class="col_6">col_6</div>
<div class="col_7">col_7</div><div class="col_5">col_5</div>
<div class="col_8">col_8</div><div class="col_4">col_4</div>
<div class="col_9">col_9</div><div class="col_3">col_3</div>
<div class="col_10">col_10</div><div class="col_2">col_2</div>
<div class="col_11">col_11</div><div class="col_1">col_1</div>
<div class="col_12">col_12</div>

<!-- 4 КОЛОНКИ -->
<div class="col_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="col_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="col_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="col_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>

<!-- 3 КОЛОНКИ -->
<div class="col_4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="col_4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="col_4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>

<!-- 2 КОЛОНКИ ПОПОЛАМ -->
<div class="col_6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="col_6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>

Изображения

IMG.caption

 

IMG.align-left

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

IMG.align-right

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

IMG.full-width

<!-- С заголовком (надписью) -->
<img class="caption" title="Это заголовок картинки" src="http://placehold.it/400x350/4D99E0/ffffff.png&text=400x350" width="400" height="350" />
<!-- Картинка, выровненная влево -->
<img class="align-left" src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" width="100" height="100" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
in hendrerit in vulputate velit esse molestie consequat.</p>
<!-- Картинка, выровненная вправо -->
<img class="align-right" src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" width="100" height="100" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
in hendrerit in vulputate velit esse molestie consequat.</p>
<!-- Полная ширина -->
<img class="full-width" src="http://placehold.it/260x200/4D99E0/ffffff.png&text=full+width" />

Слайд-шоу

Полностью адаптивное слайд-шоу. Сенсорность обеспечена. Клевый и настраиваемый BXSlider.

Возможности

  • Слайды с любым HTML-контентом
  • Адаптивность
  • Сенсорность
  • Iframes
  • Видео
  • Изображения
  • Легкий
  • Несколько слайд-шоу
  • Не требует настройки
  • Неупорядоченный список (по умолчанию)
<!-- Слайд-шоу -->
<ul class="slideshow">
<li><img src="http://placehold.it/550x350/4D99E0/ffffff.png&text=550x350" width="550" height="350" /></li>
<li><img src="http://placehold.it/550x350/75CC00/ffffff.png&text=550x350" width="550" height="350" /></li>
<li><img src="http://placehold.it/550x350/E49800/ffffff.png&text=550x350" width="550" height="350" /></li>
<li><h3>Slide Anything</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></li>
</ul>

Формы

Form.vertical

Флажки

Переключатели

Это уведомление об ошибке
Это предупреждение
Это уведомление об успехе

Инлайн-поля форм (по умолчанию)

 

Размеры input/label

<!-- Текстовое поле -->
<label for="text1">Текстовое поле</label>
<input id="text1" type="text" />

<!-- Placeholder Text -->
<label for="text2">Placeholder</label>
<input id="text2" type="text" placeholder="Placeholder Text" />

<!-- Disabled Field -->
<label for="text3" class="disabled">Disabled Field</label>
<input id="text3" type="text" disabled="disabled" />

<!-- Label with Right Hint -->
<label for="text4">Label with Right Hint <span class="right">A-Z, 0-9</span></label>
<input id="text4" type="text" />

<!-- Label with Hint -->
<label for="text5">Label with Hint <span>A-Z, 0-9</span></label>
<input id="text5" type="text" />

<!-- Text Field Error -->
<label for="text6" class="error">Text Field (Error)</label>
<input id="text6" class="error" type="text" />
<!-- Select -->
<label for="select1">Select Field</label>
<select id="select1">
<option value="0">-- Choose --</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<!-- Checkbox -->
<input type="checkbox" id="check1" />
<label for="check1" class="inline">Checkbox Field</label>
<!-- Radio -->
<input type="radio" name="radio" id="radio1" />
<label for="radio1" class="inline">Option1</label>
<!-- Fieldset -->
<fieldset>
<legend>Checkboxes</legend>
	<!-- Form Fields Here -->
</fieldset>
<!-- Текстовая область -->
<textarea id="textarea1" placeholder="Заполняющий текст"></textarea>
<!-- Ошибка -->
<div class="notice error"><i class="icon-remove-sign icon-large"></i> Это уведомление об ошибке
<a href="#close" class="icon-remove"></a></div>

<!-- Предупреждение -->
<div class="notice warning"><i class="icon-warning-sign icon-large"></i> Это предупреждение 
<a href="#close" class="icon-remove"></a></div>

<!-- Лучше некуда -->
<div class="notice success"><i class="icon-ok icon-large"></i> Это уведомление об успехе 
<a href="#close" class="icon-remove"></a></div>

Дополнительно

Элемент Опимание
.left .center .right Выравнивание текста
a.lightbox Открытие ссылки в лайт-боксе. Автообнаружение iframe-, inline-контента и прочего
.clear Add this class to a div or other element to clear floats.
.clearfix Add this class to containers that have floating children inside to clear inner floats.
li.first li.last Первый и последний элементы <li></li> автоматически получают классы .first и .last соответственно.
.column All columns have the class .column added to them automatically for easy global styling.
.visible Добавьте в колонки для удобства просмотра при верстке. Добавляет к колонкам фон светло-серого цвета.
.hide .show .hide – скрывает контент (display:none). .show – показывает контент (display:block).
tr.first tr.last Первый и последний элементы <tr></tr> автоматически получают классы .first и .last соответственно.
tr.alt Каждая вторая строка таблицы автоматически получает класс .alt.
Download (Github)

Скачано более 91036 раз :)

99Lime Announcements and Releases.