ОСНОВНОЕ

WORDPRESS

Операционные системы

Базы данных

Фреймворк Bootstrap

Кто себе друзей не ищет, самому себе тот враг (Ш. Руставели).

Bootstrap – Кнопки

FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
Bootstrap - Кнопки
В этой главе описывается использование кнопок с примерами. Все, что дает класс.btn, наследует внешний вид серой кнопки с закругленными углами по умолчанию. Тем не менее, Bootstrap предоставляет некоторые опции для кнопок, которые суммированы в следующей таблице:

 

 

 

 

КлассОписание
btnПо умолчанию, стандартная кнопка.
btn-primaryОбеспечивает дополнительный визуальный вес и определяет первичное действие в наборе кнопок.
btn-successУказывает на успешное или положительное действие.
btn-infoКонтекстная кнопка для информационных сообщений оповещения.
btn-warningУказывает, что следует соблюдать осторожность с этим действием.
btn-dangerУказывает на опасную или потенциально негативное действие.
btn-linkПреуменьшить роль кнопки, делая его похожим на ссылку, сохраняя при этом поведение кнопки.

Следующий пример демонстрирует все вышеперечисленные классы кнопок:

 

Размер кнопки

В следующей таблице приведены классы, используемые для получения кнопок различных размеров:

КлассОписание
.btn-lgДелает размер кнопки большим.
.btn-smДелает размер кнопки маленьким.
.btn-xsДелает размер кнопки дополнительным маленьким.
.btn-blockСоздает блок кнопок уровня, которые охватывают всю ширину родителя.

Следующий пример демонстрирует это:

 

Состояние кнопки

Bootstrap предоставляет классы, которые позволяют изменять состояние кнопок в качестве активного, неактивного и т.д., каждый из которых обсуждаются в следующих разделах.

Рабочее состояние

Кнопки будут появляться нажатыми (с более темным фоном, темной границей, и вставкой тенью), когда активна. В следующей таблице приведены классы, используемые, чтобы сделать кнопки элементы и якорь активными:

ЭлементКласс
Кнопочный элементИспользуйте класс.active, чтобы показать, что она включена.
Якорный элементИспользуйте класс.activeкнопки <a>, чтобы показать, что она включена.

Следующий пример демонстрирует это:

 

Состояние неактивности

При отключении кнопки, она будет исчезать в цвете на 50%, и потеряет градиент.

В следующей таблице приведены классы, используемые, чтобы сделать элементы кнопку и якорь отключенными:

ЭлементКласс
Элемент кнопкаДобавьтеатрибут disabled для кнопки <button>.
Элемент ЯкорьДобавьтекласс disabledк <a> кнопки.

Примечание: Этот класс будет только изменить <a> внешний вид, а не его функциональность. Вы должны отключить ссылки здесь, чтобы использовать пользовательские JavaScript.

Следующий пример демонстрирует это:

 

Надписи кнопок

Вы можете использовать классы кнопок с <a>, <button> или элемент <input>. Но рекомендуется использовать его в основном с помощью элемента <button>, чтобы избежать перекрестных вопросов браузера на непоследовательность.

Следующий пример демонстрирует это:

 

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Простая логическая игра "Поймай кота". Задача игры окружить кота точками так, чтобы он не смог убежать с поля. Постигла неудача - начни игру снова!

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close