Примеры кнопок Bootstrap 3

Bootstrap – это полный фреймворк, содержащий всевозможные элементы, такие как кнопки, формы, панели и т. Д. С помощью шаблонов тем Bootstrap легко настроить цвет и размер элементов. В этой статье мы продемонстрируем различные типы примеров кнопок Bootstrap 3. Ознакомьтесь с последней статьей о кнопках Bootstrap 4.

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

Чтобы добавить кнопки Bootstrap на свой сайт, вам понадобятся следующие вещи.

  • Загрузочный CSS и JS
  • jQuery скрипт
  • Font awesome icons
  • Пользовательские стили CSS
  • HTML код

Предлагает: Получите 97% скидку на конструктор сайтов Mobirise Bootstrap.

Получение кода

Первые три компонента можно добавить с помощью бесплатных ссылок на CDN. Вы можете загрузить собственный код CSS и HTML, используя кнопку ниже. В zip-архиве находятся два файла – один для CSS и один для HTML.

Скачать CSS и HTML

Добавление кода на вашу страницу

Наконец, полный код должен выглядеть, как показано ниже. Вы можете добавить собственный код CSS в теги стиля в разделе заголовка своей веб-страницы или загрузить файл .css и ссылку в качестве внешней таблицы стилей. Если ваш сайт уже использует Bootstrap, Font Awesome и jQuery, тогда нет необходимости добавлять ссылки CDN.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
ADD CUSTOM CSS CODE HERE /* You can also link it as an external stylesheet */
</style>
ADD HTML CODE HERE
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Примеры Витрина

Кнопки витрины разделены на разные группы:

  • Кнопки со значком круга
  • Выпадающие кнопки
  • Кнопки по умолчанию
  • Кнопки линий
  • Прямоугольные кнопки
  • Круглые кнопки
  • Кнопки с закругленными углами
  • Плоские кнопки
  • Кнопки градиента
  • Кнопки градиента и прямоугольника
  • Плоские и прямоугольные кнопки
  • Кнопки линий и прямоугольников
  • Кнопки круга и линии
  • Кнопки круга и градиента
  • Круглые и линейные кнопки
  • Большие социальные кнопки со значками и названием сети
  • Маленькие социальные кнопки только с иконками

Ниже приведены некоторые примеры кнопок Bootstrap. Вы можете просмотреть полную демонстрацию здесь.

Если вы используете файлы CSS и JS фреймворка Bootstrap на сайте, не используя шаблон Bootstrap, убедитесь, что все остальные элементы в порядке и не затронуты. В противном случае вам может потребоваться извлечь только необходимый CSS и использовать его на своем сайте самостоятельно, используя Настройщик Bootstrap.

0

Похожие записи

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

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