TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Приклади кнопок завантаження

2

Bootstrap – це повний фреймворк, що містить всілякі елементи, такі як кнопки, форми, панелі тощо. Легко налаштувати колір та розмір елементів за допомогою шаблонів тем Bootstrap. У цій статті ми покажемо приклади різних типів кнопок Bootstrap 3. Перегляньте останню статтю про кнопки Bootstrap 5.

Щоб додати кнопки Bootstrap на свій сайт, вам потрібні наступні речі.

  • Завантажувальні CSS та JS
  • скрипт jQuery
  • Шрифт чудові значки
  • Спеціальні стилі CSS
  • HTML -код

Отримання коду

Перші три компоненти можна додати за допомогою безкоштовних посилань 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.

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі