Bootstrap container: інструкція користувача

Застосування Container Bootstrap дасть користувачу потужний базовий сайт. І що дійсно робить його вражаючим - це широкий спектр компонентів, які можуть бути додані на сайт. Оскільки Bootstrap вже має вбудований CSS і jаvascript, компоненти і функціональні розроблені. Звичайно, користувач може додатково їх редагувати, щоб налаштувати сайт по своєму смаку.

Принцип сітки

Цей набір інструментів для створення сайтів та веб-додатків заснований на принципі сітки, щоб правильно масштабувати компоненти для перегляду на різних екранах. Система сітки Container Bootstrap складається з контейнерів, рядків і стовпців, які використовуються для певного макету сайту. Бутстрап-контейнери використовуються для визначення ширини макета. Елементи додаються в контейнери і зачіпають його ширину. Він являє собою елемент з класом = "container" і впливає на всі елементи в ньому.


Контейнери мають по 15 пікселів, що пом'якшує перегляд від кінця сторінки. Рядки та стовпці додаються всередині контейнерів з фіксованою Bootstrap Container width за замовчуванням, які змінюються в залежності від розміру пристрою перегляду. Ширина проглядається устрою і відповідного контейнера вказана в таблиці нижче:

Перегляд ширини пристрою



Ширина контейнера



Менш 768 px



Авто



768px - 991 px



750 px



992px - 119 px



970 px



1200 px і вище



1170 px

Правила сітки: Стовпці повинні бути безпосереднім дочірнім елементом рядка. Рядки використовуються тільки для зберігання стовпців і нічого більше. Рядки повинні бути розміщені всередині контейнера. Ці правила дуже важливі. Рядки й стовпці завжди працюють разом, і юзер не повинен використовувати один без іншого.


Спочатку це може здатися складним, але це дійсно легко, потрібно лише зрозуміти, як працює Grid. Якщо користувачі не хочуть, щоб контейнери змінювалися в фіксованої ширини, можна використовувати class = "container-fluid" замість class = "container". Це призведе до того, що контейнери будуть завжди відповідати Bootstrap container на всю ширину екрану і змінювати розмір фіксованої ширини. Система сітки дозволяє мати до 12 стовпців на сторінці. Вони можуть використовуватися окремо або бути згруповані разом. Щоб групувати стовпці разом, потрібно створювати рядка, для чого додають div з класом = "row", який містить в собі код стовпця.

Налаштування інтервалу

Щоб мати акуратну форму, потрібно спочатку зрозуміти, як Bootstrap встановлює інтервал. Для всіх форм потрібно укласти мітку й елемент управління в з класом = "form-group". Елементи управління і мітки в мають стиль інтервалу. Вони обов'язково повинні бути в своєму власному класі. Клас form-control встановлює ширину контейнера Bootstrap на 100 %, змушуючи його охоплювати ширину форми і змінювати її розмір за допомогою вікна. Це властивість використовують для введення та вибору елементів управління. Таким чином, вибраний елемент керування буде відформатований з включеним контролем форми і буде виглядати як вибір з класом контролю форми або без нього, а керування введенням буде відформатовано з додаванням форми управління.

Елементи управління

Елементи управління, такі як текстові поля, прапорці, є деталями, які можна легко додати у форму. Входи - це поля, в які користувач може вводити текст. Це базовий принцип введення Container Bootstrap, використовує атрибут «текст» HTML5. Тип оголошує вигляд введення. Заповнювач визначає текст, який відображатиметься в полі вводу. Ці типи можна оголосити, додавши до введення. Якщо потрібно додати введення електронної пошти, змінюють його на type = "email". При цьому потрібно мати на увазі, що потрібно увімкнути тип вводу, щоб елемент керування був правильно оформлений. Елемент керування текстовою областю - це область, яка дозволяє використовувати велику кількість тексту, наприклад, для секції коментарів. При додаванні текстової області можна налаштувати розмір, оголосивши, скільки рядків потрібно охопити. Оскільки Container Bootstrap побудований на рядках і стовпцях, можна зробити область тексту меншою або більшою, збільшуючи або зменшуючи кількість рядків. Прапорці дозволяють користувачам вибирати кілька параметрів. За замовчуванням прапорці відображаються вертикально. Однак можна поміняти прапорці для відображення горизонтально, змінивши тип type = "checkbox-inline". Прапорці inline налаштовані інакше, ніж базові. У вбудованому флажковом елементі присвоюється клас = "checkbox-inline". Однак якщо подивитися на базовий код прапорця, можна побачити, що class = "checkbox" оголошено в елементі , а не в елементі .
Перемикач схожий на прапорець. Одночасно може бути вибраний тільки один перемикач, в той час як самі прапорці можуть мати кілька вибраних. Як і у випадку з прапорцями, вертикальні перемикачі відображаються за замовчуванням, хоча також можна змінити код для відображення і по горизонталі.

Типи завантажувальних форм

Існує кілька типів форм: основна, вбудована і горизонтальна. Кожна з них відрізняються по-своєму. Вбудовані мають компоненти, що називаються елементами управління», вирівняні по вертикалі. Для горизонтальних форм елементи управління налаштовуються горизонтально. Основна форма виходить з глобального стилю макета. Щоб створити базову формую, просто потрібно створити форму в HTML за допомогою елемента

потім додати елементи управління Bootstrap в теги

. Інші два типи форм використовують класи для їх диференціації. Якщо клас не вказаний, форма за промовчанням відповідає базовій. Щоб зробити вбудовану форму, потрібно додати class = "form-inline" елемент

. Це автоматично налаштує елементи керування форми по вертикалі. Як і в інлайн-формі, горизонтальна форма виходить додаванням класу =»форма-горизонтальної» до елементу. Це автоматично буде налаштовувати елементи управління по горизонталі.

Налаштування рядків і стовпців

Рядки охоплюють ширину Container Bootstrap. Вони мають негативний 15-піксельний запас в кінці, встановлений його контейнером. Це пов'язано з тим, що кожен із них має свій власний 15-піксельний запас, який замінює маркер контейнера. Стовпці, вирівняні поруч один з одним, будуть мати 15-кратний край, що призведе до 30-пиксельному краю між двома стовпцями.

Рядки мають прописку -15 px, яка скасовує додавання 15 px контейнера. Вміст у стовпчику буде залежати від поля 15 пікселів стовпця. Стовпці мають прописку 15 пікселів. Стовпці, розташовані поруч один з одним, будуть мати відступи шириною 15 px, в результаті вийде буфер 30 px. Замінюють префікс і Column Number переважними розміром і кількістю стовпців. Префікси визначають для якого пристрою призначений стовпець Bootstrap 4 і висоту контейнера. Наприклад, xs призначений для невеликих екранів, таких як телефони.

Prefix



For



xs



= 1200 px (Ноутбуки)

Коли стовпчик задано з префіксом для меншого пристрою, він буде відображатися аналогічним чином і на більш великих пристроях. Іншими словами, стовпець, який визначається як sm, буде працювати для пристроїв з розміром планшета або більше. Переваги застосування стовпців: Створюють горизонтальні розділи з вікна перегляду. Можуть мати різну ширину. Можуть змінюватися по ширині при різній ширині екрану. Можливість макетування горизонтально зліва направо, потім вертикально вгору і вниз. Може змінити положення (впорядкування) щодо братів і сестер в тому ж рядку. Вони мають ту ж висоту, що і інші брати і сестри в одному рядку. Може «рости» або «стискатися» по ширині. Може автоматично «обгорнути» або «стікати» по вертикалі по мірі необхідності або при різній ширині екрану. Може містити більше Rows & Columns__ nesting.

Оновлення css-структури

Після багатьох років очікування Bootstrap 4 був випущений в січні 2018 року. Bootstrap був першою широко поширеною css-структурою. Нова версія програми заснована на цьому успішному фундаменті та має багато покращень, що спрощує роботу з сітками. Bootstrap 4 - це OG відповідних макетів. Новий angular.json файл конфігурації має зовсім іншу структуру, ніж оригінал angular-cli.json.
Якщо користувач збирається зосередитися на використанні сітки для створення гнучких макетів в Angular applications, йому потрібно використовувати тільки пакети bootstrap-grid і bootstrap-reboot пакети. Можна додати файли Container CSS Bootstrap прямо у властивість «styles» angular.json. Імпорт сітки в основний style.scss файл має одну важливу перевагу перед імпортом в angular.json файл. Він дозволяє змінити будь-яку змінну, використовувану визначеннями стилів Bootstrap. На практиці може бути корисно створити styles-variables.scss файл поруч з styles.scss у src папці з чуйними точками останова макета, як визначено в Bootstrap за замовчуванням. Використання styles-variables.scss дає можливість перевизначати сітку за замовчуванням і впроваджувати власні настроювані стилі. Таким чином, можна імпортувати його в перший рядок - styles.scss, яка буде використовуватися з Bootstrap, але також і в будь-якому іншому файлі стилів компонентів для послідовної реалізації вибіркової реакції.

Інструкція Bootstrap для початківців

Bootstrap - дуже корисна інтерфейсна платформа для більш швидкої і простий веб-розробки. Користувачеві не доведеться турбуватися про наявність практичного досвіду, маючи потужний інтерфейс при його використанні. Інструкція Bootstrap для початківців охоплює такі процедури, які вимагатимуть: Завантажити або включити Bootstrap. Написати Basic HTML Code. Включити Bootstrap CSS. Включити jQuery Library Включити Bootstrap jаvascript. Додати підтримку IE8 для запитів HTML5 і мультимедіа. Додати панель навігації. Додати вміст сторінки контейнер. Додати заголовок. Додати таблицю. Додати форму всередині таблиці. Додати кнопку Bootstrap з Glyphicon. Додати вікно з гарним пошуком. Final Code Live Demo. Online Resources. Наступні розділи стануть покроковим керівництвом для першої веб-розробки за допомогою Bootstrap.

Завантаження CDN і HTML5

Існує кілька способів використання Bootstrap на веб-сторінці. Один з них - це використовувати мережу доставки CDN або Content. Використання bootstrap CDN означає, що користувач не буде завантажувати і зберігати файли початкового завантаження на сервері або на локальному комп'ютері. Для цього необхідно створити новий файл index.html. Відкрити файл, ввести наступний код і зберегти його. Якщо користувач хоче використовувати свою копію, пропишіть:



Потрібно переконатися, що файл завантажений. Потім помістити його в той же каталог, що і index.html наприклад, у папці «bootstrap-4». jQuery необхідні для роботи функції Bootstrap jаvascript. Якщо потрібно використовувати свою копію jQuery:



Попередньо потрібно переконатися, що завантажена jQuery і поміщена в той же каталог, що і index.html наприклад, ім'я файлу jQuery «jquery-300.min.js». Container-fluid - це основний елемент зі 100 % шириною власний макет, виконують бічні відступи для оформлення колонок. Bootstrap Container fluid створює повну ширину, ніби container-fluid на більш дрібних пристроях.

jаvascript і підтримка IE8

Функції Bootstrap, такі як панель навігації, потребують файлі jаvascript Bootstrap. Для цього поміщають наступний код після коду попереднього розділу:



Також необхідно додати підтримку IE8 для HTML5 і медиазапросов. Bootstrap є базою, яка взаємопов'язана з мобільного технікою, тому реагує на різні пристрої і розміри екрану. Навігаційні панелі дуже круті. Користувачі не будуть шукати дані на сайті, якщо Bootstrap контейнер по центру використовується правильно. Для цього поміщають наступний код в тег.

Home All Demo Contact

Тег div буде мати вміст веб-сайту. Це важливо, тому що він визначає ширину сторінки контенту. Він не буде розкидано, якщо відвідувач використовує великий розмір екрану. Щоб додати контейнер вмісту поміщають наступний код в код попереднього розділу.

Оформлення заголовка таблиці

Заголовок важливий, тому що він повідомляє користувачу, на якій сторінці він знаходиться. Поміщають наступний код між тегами «контейнера div» попереднього розділу.



Bootstrap Sample Page with Form



В цьому прикладі є таблиця, в якій будуть зберігатися елементи форми, такі як текстове поле. Робочий стіл виглядає добре, не має зависающего ефекту і добре реагує на дії користувача. Для цього поміщають наступний код в попередній розділ.



Name







Contact Number







Address







List















Приклад цієї форми буде містити кілька текстових полів, текстову область та випадний список. Для цього замінюють код попереднього розділу наступним.



Name







Contact Number







Address







List

Додавання кнопки GLYPHICON

"Глификон" - це бібліотека монохромних значків і символів, створена з упором на простоту і зручну орієнтацію. Кнопки з іконками виглядають симпатично, а бібліотека сигналізує користувачеві, для чого призначена кнопка. Значок і колір кнопки можуть легко підказати, що робить кнопка у веб-додатку. Для цього поміщають наступний код між «останніми тегами» попереднього розділу.



І також можна додати замітки за допомогою бутстрапа, помістивши наступний код перед відкриттям тега dev» попереднього розділу.

Heads up! codeofaninja.com !

Якщо користувач завантажує код, крім вихідного він отримає таке повідомлення:

Пункт



Опис



Индекс-cdn.html



Використовує структуру Bootstrap в CDN. Буде працювати, якщо ваш комп'ютер в Інтернеті.



Индекс-local.html



Використовує завантажену структуру без CDN. Працює на локальному хості. У Bootstrap 4 фонове зображення за розміром контейнера буде працювати, навіть якщо комп'ютер вимкнений.

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