UI

На этой странице даны примеры UI-элементов, уже готовых для использования.

Копки

Для стилизации элементов в виде кнопок предназначен класс .btn.

Его можно применять к любому html-элементу на странице.

<a href="#" class="btn">Ссылка</a>
<span class="btn">span</span>
<div class="btn">div</div>
<input type="submit" class="btn" value="input">
<button class="btn">button</button>

Примеры кнопок:

Разные html-элементы

Ссылка

span

div

Разные цвета

btn-primary

btn-secondary

btn-additional

Разные резмеры

btn-small

btn-mini

Отключенные кнопки

блочная кнопка

btn-block

Разные варианты

btn-square btn-outline btn-link

Инпуты

<input class="input" type="text">
<textarea class="input"></textarea>

<input type="checkbox" class="checkbox" id="checkbox1" name="checkbox1">
<label for="checkbox1"><span></span> checkbox1</label>

<input type="radio" class="radio" id="radio1" name="radio1">
<label for="radio1"><span></span> checkbox1</label>

Файловые инпуты

<input class="input" type="file">
<input class="input" type="file" multiple>
<input class="styler" type="file">
<input class="styler" type="file" multiple data-placeholder="Выберите файлы">

Селекты

<select class="styler">
    <option value="1">Далеко-далеко за.</option>
    <option value="2">Не, пор?</option>
</select>

.styler

.input

.input[multiple]

Алерты

<p class="alert">alert</p>
<p class="alert alert-info">alert-info</p>
<p class="alert alert-error">alert-error</p>
<p class="alert alert-success">alert-success</p>

alert

alert-info

alert-error

alert-success