Latest web development tutorials
×

Bootstrap курс

Bootstrap курс Bootstrap Краткое введение Bootstrap Установка по окружающей среде

Bootstrap CSS

Bootstrap CSS обзор Bootstrap Grid System Bootstrap наборный Bootstrap код Bootstrap таблица Bootstrap форма Bootstrap кнопка Bootstrap изображение Bootstrap Вспомогательный класс Bootstrap Отзывчивый Утилиты

Bootstrap Компоненты макета

Bootstrap значок шрифты Bootstrap Выпадающее меню Bootstrap Группа кнопок Bootstrap Кнопка в раскрывающемся меню Bootstrap группа Поле ввода Bootstrap элементы навигации Bootstrap Панель навигации Bootstrap панировочные сухари Bootstrap пейджинг Bootstrap этикетка Bootstrap знак Bootstrap Большой экран Bootstrap Название страницы Bootstrap Миниатюры Bootstrap предупреждение Bootstrap Шкала прогресса Bootstrap Мультимедийные Bootstrap Список групп Bootstrap панель Bootstrap Wells

Bootstrap Виджет

Bootstrap Plug-Glance Bootstrap эффект перехода Bootstrap режимное окно Bootstrap Выпадающее меню Bootstrap Свиток монитор Bootstrap таб Bootstrap подсказки Bootstrap Всплывающее окно Bootstrap Предупреждение коробки Bootstrap кнопка Bootstrap сгиб Bootstrap карусель Bootstrap Дополнительная навигация

Bootstrap другое

Bootstrap UI редактор Bootstrap V2 курс Bootstrap HTML стандарты кодирования Bootstrap CSS стандарты кодирования

Bootstrap вспомогательный класс

В этой главе рассматриваются некоторые бутстраповская может пригодиться вспомогательные классы.

текст

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

категория описание примеров
.text-приглушен Стиль текста категории "текст-приглушены" пробовать
.text первичной Стиль текста категория "текст-первичный" пробовать
.text-успех Стиль текста категория "текст-успех" пробовать
.text-инфо Стиль текста категория "текст-инфо" пробовать
.text предупреждения Стиль текста категории "текст предупреждения" пробовать
.text-опасность Стиль текста категория "текст-опасность" пробовать

фон

Следующие различные классы показывает разные цвета фона. Если текст ссылку, чтобы переместить курсор на текст будет серым цветом:

категория описание примеров
.bg первичной Ячейка таблицы с помощью категории "BG-первичный" пробовать
.bg-успех Ячейка таблицы с помощью категории "BG-успеха" пробовать
.bg-инфо Ячейка таблицы с помощью категории "BG-инфо" пробовать
.bg предупреждения Ячейка таблицы с помощью категории "BG-предупреждение" пробовать
.bg-опасность Ячейка таблицы с помощью категории "BG-опасности" пробовать

другое

категория описание примеров
.Снять налево Элементы всплывают влево пробовать
.Снять-право Элементы плывут вправо пробовать
.center-блок Элемент устанавливается дисплей: блок и по центру пробовать
.clearfix Clear флоат пробовать
.show отображаются элементы, обязательные пробовать
.hidden Обязательный элемент скрытие пробовать
.sr только Помимо чтения с экрана, скрытый элемент на других устройствах пробовать
.sr только-фокусируемый В сочетании с .sr только классом, отображается, когда элемент получает фокус (например: работы клавиатуры пользователя) пробовать
.text скрыть Элементы текста страницы содержали заменить фон пробовать
.close Дисплей выкл кнопки пробовать
.caret Дисплей в раскрывающемся меню пробовать

Другие примеры

Закрыть значок

Используйте общий значок Закрыть, чтобы закрыть окно и модальный окно предупреждения. Используйтекласс близко , чтобы получить значок закрытия.

примеров

<P> Закрыть экземпляр значок <кнопка типа "кнопка" = класс = "закрыть" ария-скрыт = "истинный"> И раз; </ Button> </ P>

Попробуйте »

Результаты следующие:

Закрыть значок

знак вставки

Используйте каретку, чтобы тянуть вниз функции и направления. Используйте элемент <SPAN> склассом кареткой , чтобы получить эту функцию.

примеров

<P> экземпляр каретка <SPAN класс = "каретка"> </ SPAN> </ P>

Попробуйте »

Результаты следующие:

знак вставки

Быстро Floating

Вы можете использовать каждыйкласс нагрузочный влево-вправо тянутьили влево или вправо плавающих элементов. Следующий пример иллюстрирует этот момент.

примеров

<Div класс = "тянуть левый"> Быстрый левый плавающий </ DIV> <Div класс = "тянуть вправо"> правый быстро плавающий </ DIV>

Попробуйте »

Результаты следующие:

Быстро Floating

Для выравнивания компонентов навигационной панели, используйте.navbar левый или правый .navbarвместо этого. Смотрите навигационную панель Bootstrap .

Сосредоточенный содержание

Использованиекласса центра-блок к центру элементов.

примеров

<Div класс = "строка"> <Div класс = "Центр-блок" стиль = "ширина: 200px; фон -Цвет: #ccc;"> Это экземпляр центра блока </ DIV> </ Div>

Попробуйте »

Результаты следующие:

Сосредоточенный содержимого блока

Clear флоат

Чтобы очистить плавающий элемент, используйте.clearfix класс.

примеров

<Div класс = "clearfix" стиль = "фон: # D8D8D8; границы: 1px твердый # 000; обивка: 10px;"> <Div класс = "тянуть налево" стиль = "фон: # 58D3F7; "> Быстрый левый плавающий </ DIV> <Div класс = "тянуть вправо" стиль = "фон: # DA81F5; "> право быстро плавающая </ DIV> </ Div>

Попробуйте »

Результаты следующие:

Clear флоат

Показать и скрыть содержимое

Вы можете заставить элемент для отображения или скрытия ( в том числе чтения с экрана) посредством использованиякласса .show и .hiddenприходят.

примеров

<Div класс = "строка" стиль = "обивка: 91px 19px 100px 50px;"> <Div класс = "шоу" стиль = "левый рентабельностью: 10px ; ширина: 300px; цвет фона: #ccc;"> Это пример шоу класса </ div> <Div класс = "скрытый" стиль = "ширина: 200px; фон -Цвет: #ccc;"> Это пример класса скрыть </ div> </ Div>

Попробуйте »

Результаты следующие:

Показать и скрыть содержимое

для чтения с экрана

Вы можете поместить все элементы на устройстве, используя скрытыйкласс .sr-только, в дополнение к программе чтения с экрана.

примеров

<Div класс = "строка" стиль = "обивка: 91px 19px 100px 50px;"> <Форма класс = "форма-инлайн" Роль = "форма"> <Div класс = "форма-группа"> <Этикетка класс = "стер-только" для = "Отправить"> Адрес электронной почты </ Label> <Input тип = "электронная почта" класс = "форма-контроль" заполнитель = "Введите адрес электронной почты"> </ Div> <Div класс = "форма-группа"> <Этикетка класс = "стер-только" для = "пропуск"> пароль </ метка> <Input Type = "пароль" класс = "форма-контроль" заполнитель = "Пароль"> </ Div> </ Форма> </ Div>

Попробуйте »

Результаты следующие:

для чтения с экрана

Здесь мы видим два типа входных тегов этикетка склассом стер-только, поэтому этикетка будет доступна только для чтения с экрана.