Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы Bootstrap 3 » Кнопки. Основы bootstrap 3 для начинающих. Урок №7

09.06.2016


15:14


4167


пока нет


Кнопки. Основы bootstrap 3 для начинающих. Урок №7

Кнопки. Основы bootstrap 3 для начинающих. Урок №7

Всем привет!
Продолжаем изучать основы «bootstrap3».
В сегодняшнем уроке, вы научитесь создавать адаптивные кнопки.
Кнопки часто используют на сайте для добавления комментариев, отправка сообщения, регистрации, авторизации и т.д.
С помощью различных стилей подаренными нам от Twitter Bootstrap, мы можем задавать различные состояния для кнопок. Эти стили можно применять к таким элементам как <a>, <input>, <button>.

Цвет и вид кнопок.

Таблица №1.  Различные стили доступные в Bootstrap 3.

Вид кнопки Класс
btn btn-default
btn btn-primary
btn btn-info
btn btn-success
btn btn-warning
btn btn-danger
btn btn-link

Давайте попробуем прописать взятые из таблицы классы для кнопок <button>
Пример:

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Для ссылки

<a href="#" class="btn btn-default">Default</a>
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>
<a href="#" class="btn btn-link">Link</a>

Размер кнопок.
Также можно задать размеры для кнопок. Для этого разработаны были такие классы как:

btn-lg -  большая кнопка

btn-sm - маленькая кнопка

btn-xs - очень маленькая кнопка

Пример:

<button type="button" class="btn btn-success btn-xs">Очень маленькая кнопка</button>
<button type="button" class="btn btn-success btn-sm">Маленькая кнопка</button>
<button type="button" class="btn btn-success">Кнопка обычного размера</button>
<button type="button" class="btn btn-success btn-lg">Большая кнопка</button>

Результат:

Также, можно создать адаптивную кнопку, которая будет занимать всю ширину сайта.
Для этого добавьте класс «.btn-block»

<button type="button" class="btn btn-success btn-block">Большая адаптивная кнопка</button>

Результат:


Кнопка в неактивном состоянии.
Если вам нужно сделать кнопку не кликабельной, например, до тех пор, пока не будут заполнены все поля, то, следует добавить к кнопке класс «.disabled».

<button type="button" class="btn btn-danger btn-lg disabled">Взрыв мозга</button>

Результат:

Переключение кнопки.
Можете изменить обычное состояние кнопки на нажатое, и наоборот.
Добавьте к тегу <button> атрибут data-toggle со значением button:

<button type="button" class="btn btn-default" data-toggle="button">По умолчанию</button>
<button type="button" class="btn btn-primary" data-toggle="button">Основная</button>
<button type="button" class="btn btn-success" data-toggle="button">Успех</button>
<button type="button" class="btn btn-info" data-toggle="button">Информация</button>
<button type="button" class="btn btn-warning" data-toggle="button">Предупреждение</button>
<button type="button" class="btn btn-danger" data-toggle="button">Опасность</button>

Результат:

Создание группы кнопок
Можно сгруппировать несколько кнопок вместе в одну линию.
Чтобы создать группу кнопок, добавьте для тега <div> класс «.btn-group» и поместите вовнутрь этого контейнера кнопки.

Горизонтально:

<div class="btn-group">
<button type="button" class="btn btn-primary">Левая</button>
<button type="button" class="btn btn-primary">Средняя</button>
<button type="button" class="btn btn-primary">Правая</button>
</div>

Результат:

Вертикально:

<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Верхняя</button>
<button type="button" class="btn btn-primary">Средняя</button>
<button type="button" class="btn btn-primary">Нижняя</button>
</div>

Результат:

Иконка в кнопке
Можно также сделать кнопку, внутри которой будет находиться иконка.

<button type="button" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-phone"></span> Мобильная версия</button>

Результат:

С кнопками разобрались!
Рекомендую подписаться на обновления блога stepkinBLOG.RU  :gazeta:



Случайные записи:

  1. Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу
  2. Вывод переменной и строки в php на экран. Основы PHP с нуля. Урок №6
  3. Плавающие блоки в CSS. Основы CSS для начинающих. Урок №15
  4. Тег DOCTYPE в HTML
  5. Подключение файлов php через Include или Require. Основы PHP с нуля. Урок №17

Последние записи рубрики:

  1. Бесплатный курс по основам Bootstrap3
  2. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  3. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  4. Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
  5. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245