Вступ до компонентів завантаження
Спочатку його називали "Основою Twitter", це було розроблено Марком Отто та Джейкобом Тронтоном у Twitter. Bootstrap - це вільна рамка CSS, яка надає чуйність веб-сторінкам. Завдяки чуйності, це означає, що різні елементи DOM змінюють себе відповідно зі зміною розміру екрану, не порушуючи елегантності веб-сторінки, як це було б інакше традиційно при піксельних або процентних розмірах методів CSS.
Це також називається "мобільним першим" CSS-рамкою, оскільки він розроблений таким чином, щоб мати макет сітки CSS шляхом визначення рядків і стовпців. Цей фреймворк також містить компоненти JavaScript, поряд із класами CSS. Для того, щоб використовувати цей фреймворк, потрібно обов'язково зв’язати jQuery та JavaScript Framework для Bootstrap разом з іншими файлами CSS Bootstrap. Ці файли CSS доступні для завантаження, а також у вигляді CDN (Network Delivery Network).
Різні компоненти завантажувача:
Bootstrap у комплекті з десятками компонентів, які можна повторно використовувати для забезпечення хорошого досвіду роботи та взаємодії з користувачами на веб-сторінці, наприклад, навігаційні панелі, спливаючі вікна, спадні меню, піктограми, кнопки, попередньо розроблені форми, а також параметри розмірів для різних елементів DOM.
1) Гліфікони - це піктограми, відформатовані шрифтом, які доступні у Bootstrap. Їх близько 200. Ці гліфікони можна знайти на веб-сайті https://glyphicons.com.
Як ним користуватися?
Існують гліфікони для позначення майже всіх дій, таких як масштабування, редагування, попередження, файл, видалення тощо, і вони визначені в індивідуальному класі. Отже, вам потрібно використовувати базовий клас та індивідуальний клас, в ідеалі - прольотний елемент і використовувати ці гліфікони.
Синтаксис:
2) Випадаючі списки - це список меню, що базується на перемиканнях, перелік посилань. Вони робляться більш динамічними плагіном JS і їх можна знайти за посиланням http: // getbootstrap / javascript / # dropdownns
Як ним користуватися?
Вам потрібно використовувати клас .dropdown, оскільки в класі елемента є елементи списку під ним разом із класом .dropdown-меню.
Синтаксис:
3) Групи кнопок - за допомогою цього компонента Bootstrap ви можете згрупувати набір кнопок разом у ряд, прилеглий один до одного.
Як ним користуватися?
Визначте елементи поділу класом .btn-group та вставте ці елементи за допомогою кнопки з .btn класом. Правильно
Неправильно
4) Випадаючі кнопки - Цей компонент використовується для використання елемента кнопки для запуску спаду.
Синтаксис:
5) Групи введення - це розширює клас керування формою та додає текст або кнопки в обидві сторони поля введення елемента введення. Для використання цих груп введення вам потрібно використовувати клас .input-group з .input-group-addon class.
Синтаксис:
@
6) Navbar - ці компоненти служать навігаційними заголовками вашого веб-сайту. Вони згортаються для розширення вертикально за допомогою перемикаючого меню омбре на пристроях менших розмірів екрана і стають горизонтальними зі збільшенням ширини екрану.
Синтаксис:
7) Jumbotron - це компонент завантаження, який може розповсюджуватися на весь екран (або область перегляду), щоб показати деякий ключовий вміст.
Синтаксис:
8) Попередження - це компонент Bootstrap з плагіном jQuery, який надає контекстні повідомлення з відгуками залежно від дії користувача. В основному це використовується для відображення повідомлень про тривогу.
Синтаксис: …
9) Панелі прогресу - Цей компонент використовується для надання візуальних даних щодо зворотного зв'язку про хід роботи чи дії за допомогою панелі прогресу.
Синатекс:
Приклад:
10) Значки - це компонент для виділення чогось подібного до непрочитаних елементів, додавши клас .badge до елемента DOM, бажано прольоту.
Синтаксис:
Повідомлення 3
11) Пагинація - Цей компонент надає вашому сайту багатосторінкові сторінки на сторінках, щоб вміст міг
бути розбитим на кілька сторінок і легко переходити. Зазвичай елемент DOM для не упорядкованих списків визначається за допомогою цього класу .pagination.
Синтаксис:
Як це допоможе у вашій кар’єрі?
Зараз усі компанії зосереджуються на взаємодії користувачів та досвіді користувачів (UI / UX). Тому що переважна більшість населення використовує портативні пристрої, такі як планшети та смартфони, які значно відрізняються за роздільною здатністю пікселів та розміром екрана. Ось чому насправді важливо мати передній дизайн, який достатньо чуйний, щоб підлаштуватись під будь-який екран, без шкоди для елегантності веб-сторінки.
Тож, досвідченість у Bootstrap - це додасть вам цінності у технічній кар’єрі, і компанії з нетерпінням чекають наняття вас за гарну зарплату. І, оскільки це безкоштовно та з відкритим кодом, існує багато областей для вас, щоб зробити свій внесок у якості розробника та зробити його ще кращим, ніж те, що є сьогодні.
Висновок
Рамка Bootstrap - це дуже зручний інструмент для залучення чутливості до веб-сторінок. Компоненти, пояснені в цьому блозі, - це деякі дуже широко використовувані, які допомагають написати менший код для більшої функціональності та додадуть більше елегантності веб-сторінці, яку ви будуєте.
Рекомендовані статті
Це було керівництвом щодо компонентів Bootstrap. Тут ми також обговорюємо вступ та різні компоненти завантажувальної програми разом із її синтаксисом. Ви також можете ознайомитися з іншими запропонованими нами статтями, щоб дізнатися більше -
- Як встановити Bootstrap
- Кутовий проти Bootstrap
- Навчальний курс з завантаження
- Питання для інтерв'ю Bootstrap
- Як використовувати макет завантаження?
- Топ-5 типів завантаження із зразком коду