През 2011 г. Twitter представи рамката Bootstrap. Оттогава тази CSS рамка е претърпяла две големи пренаписвания, като най-новото (Bootstrap 3) е пуснато през 2013 г. Bootstrap 3 трансформира CSS библиотеката, като внедри подход, ориентиран към мобилни устройства, който остави рамката напълно отзивчива.
От 2022 г. Bootstrap е във версия пета и е една от най-популярните предни рамки. Той има обширен списък от предварително изградени компоненти и впечатляваща колекция от JavaScript плъгини. В тази статия ще научите как да използвате Bootstrap и да се възползвате максимално от неговите функции.
Инсталиране на Bootstrap във вашия проект
Има три начина да използвайте Bootstrap във вашия проект. Можете да изтеглите и хоствате CSS и JavaScript файловете, да ги инсталирате във вашия проект с помощта на npm или да копирате и поставите съответните cdn връзки във вашия проект.
С подхода cdn трябва да запомните да поставите връзката Bootstrap преди всяка друга CSS връзка в тага head на вашия HTML файл.
Някои компоненти на Bootstrap имат функционални дейности, като превключване на бутони и позициониране, което изисква импортиране на JavaScript и Popper скрипт. Така че, ако възнамерявате да използвате някакви функционални компоненти, ще трябва да добавите маркера на скрипта и към вашия HTML файл.
Последното нещо, от което се нуждаете, за да започнете да използвате Bootstrap, е изглед етикет.
Тъй като Bootstrap е технология, насочена към мобилни устройства, изглед етикет ще помогне за отзивчивия дизайн. Един прост начин да използвате bootstrap във вашия проект е просто да копирате Шаблон за стартиране на Bootstrap.
Създаване на уебсайт с Bootstrap
Когато създавате нов уебсайт, едно от първите неща, които трябва да имате предвид, е оформлението. След това можете да преминете към други компоненти като бутони и типография.
Bootstrap има колекция от структурни компоненти, които можете да използвате за организиране на елементи на уеб страница. Тези структури на оформление включват:
- Контейнери
- Решетка
- колони
- Улуци
- Точки на прекъсване
Използвайки леко променена версия на шаблона за стартиране на Bootstrap, можете да започнете да очертавате структурата на вашата уеб страница и да добавяте нови компоненти.
Файлът index.html
Задължителни мета таговеBootstrap CSS
Bootstrap
Отделете Popper и Bootstrap JS
Класът Bootstrap Container
Bootstrap контейнер class pads, съдържа и подравнява елементите на вашата уеб страница. Ако планирате да използвате Bootstrap мрежа по подразбиране, тогава ще трябва да използвате и Bootstrap контейнер клас. Има три вида на контейнер класове; контейнер, контейнер-флуид, и контейнер-{точка на прекъсване}. Класът контейнер е контейнерът по подразбиране; той е отзивчив и има фиксирана ширина на всяка от шестте точки на прекъсване на Bootstraps.
Шестте точки на прекъсване по подразбиране на Bootstrap включват:
- Много малко: По-малко от 576px.
- малък: По-голямо или равно на 576px.
- среден: По-голямо или равно на 768px.
- Голям: По-голямо или равно на 992px.
- X-Large: По-голям или равен на 1200px.
- XX-голям: По-голям или равен на 1400px.
За да използвате Bootstrap контейнер във вашия проект можете просто да добавите желания клас контейнер към външния раздел на вашата уеб страница.
Използване на контейнера на Bootstrap
поставете елементи на уебсайта тук Вмъкването на кода по-горе в тялото на съществуващия ви HTML файл ще направи вашата уеб страница отзивчива и също така ще създаде подплънки от всяка страна на вашата уеб страница.
Системата Bootstrap Grid
Решетката на Bootstrap използва система от дванадесет колони, която разчита на ред и кол грид класове, както и клас контейнери. Всеки ред има дванадесет колони и всеки елемент може да обхваща една или повече от тези колони. Класът колони ще посочи колко колони трябва да заема даден елемент. Например, елемент, използващ кол-2 клас ще обхваща две колони, елемент, използващ кол-3 клас ще обхваща три колони и т.н.
Системата Bootstrap grid е базирана на модула flexbox. Ако само две колони заемат ред, те ще разделят пространството по равно помежду си. В улук class е един от структурните елементи на Bootstrap и контролира разстоянието между всяка колона в мрежова система. Всеки мрежа колоната има 12px отстъп от двете страни.
Използване на Grid System на Bootstrap
основно съдържание на уеб страница
член
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae
obcaecati illo laboriosam a, voluptate molestias eum velit, differentio impedit
ratione facere numquam, optio eligendi delectus cumque quos.
Вмъкването на кода по-горе в контейнера div ще създаде Bootstrap мрежа от три реда и две колони. Първият ред в горната част ще държи навигационната лента, третият ред в долната част ще държи долния колонтитул на уебсайта, а вторият ред в средата ще съдържа съдържанието на уеб страницата. Вторият ред има две колони - основната статия и една странична.
Създаването на локален CSS файл и добавянето на граница към всяка секция от мрежата ще ви позволи да го видите по-ясно.
Файлът style.css
.ред{
граница: 2px синьо плътно;
}
.col, .col-sm-4{
граница: 2px червено плътно;
}
Свързването с CSS файла по-горе ще създаде следния изход във вашия браузър:
Очевидна разлика в изображението по-горе е размерът на колоните. Обикновено две (или повече) колони в ред заемат едно и също пространство, освен ако изрично не посочите друго. В col-sm-4 клас в HTML кода по-горе гарантира, че втората колона обхваща само четири от дванадесетте колони в реда. В см в col-sm-4 клас представлява малката точка на прекъсване, така че страничната секция ще заема само четири колони от малката точка на прекъсване и по-горе.
Компоненти на Bootstrap
След като сте решили оформлението на вашата уеб страница, следващата стъпка е да добавите елементи за изграждане на уебсайт, които Bootstrap нарича компоненти. Списъкът с компоненти на Bootstrap включва:
- Navbar
- Бутони
- Група бутони
- Група списъци
- Картички
- Свиване
- Падащи менюта
Класът Bootstrap Navbar
Всяка навигационна лента на Bootstrap изисква навигационна лента клас. Те също така изискват използването на или присвояване на ключовата дума „навигация“ на Bootstrap роля атрибут в родителя на навигационната лента раздел. За да направите навигационната лента отзивчива, ще трябва да използвате свиване на приставката за JavaScript.
Bootstrap навигационна лента клас използва an ария-ток атрибут, който приема стойността „page“, за да посочи текущата страница, или „true“, за да посочи текущата секция на уеб страница. Стойността, която присвоявате, ще зависи от структурата на вашия уебсайт (единична или няколко страници). Вие също трябва да използвате активен клас за да посочите текущата страница или раздел.
Използване на Navbar на Bootstrap
Смяна на навигацията ред на Bootstrap мрежа с кода по-горе ще създаде следния изход във вашия браузър:
Има няколко други важни класа и атрибути на Bootstrap в кода по-горе, като например navbar-марка клас, който е насочен към секцията с лого на вашия навигационна лента. В навигационна лента също е напълно отзивчив благодарение на свиване на приставката за JavaScript.
Отзивчива навигационна лента
Може би си спомняте, че Bootstrap има шест по подразбиране точки на прекъсване и една от тези точки на прекъсване е голяма (lg). В navbar-expand-lg клас в по-горе се разширява в хоризонтален списък с елементи за навигация в голямата точка на прекъсване и по-горе и този списък се връща към бутон при всяка точка на прекъсване под голяма.
Ако искате да научите повече за създаването на адаптивни уебсайтове, ние сме събрали част с описание как да направите това с медийни заявки в HTML и CSS.
Компонентът на бутона за стартиране
Bootstrap бутон компонент използва и изисква да зададете Тип атрибут на „бутон“.
Bootstrap има няколко вида бутони. За да създадете по-конвенционалния бутон, ще използвате btn клас, но за да създадете бутон за хамбургер, както е в кода по-горе, ще използвате превключване на навигационната лента клас.
Кога трябва да използвате Bootstrap?
Bootstrap е известен като една от най-популярните CSS рамки, защото е новатор. Много преди отзивчивият дизайн да е толкова обичаен в разработката на софтуер, Bootstrap се трансформира в напълно отзивчива рамка.
През годините Bootstrap продължава да се развива и подобрява, което го прави избор номер едно за топ компании, като Twitter и Spotify. Въпреки това, това не винаги ще бъде най-добрият вариант за вашите нужди от разработка на софтуер. Например, ако създавате приложение React, има система за проектиране, наречена MUI, която е персонализирана за React приложения.
Material-UI има ново име и има за цел да създаде нова дизайнерска система, алтернатива на Material Design. Ето как можете да използвате MUI в проекти на ReactJS.
Прочетете Следващото
- Програмиране
- Съвети за кодиране
- Програмиране
- Инструменти за програмиране
Kadeisha Kean е разработчик на софтуер с пълен стек и писател по технически/технологии. Тя има отчетливата способност да опростява някои от най-сложните технологични концепции; производство на материал, който може лесно да бъде разбран от всеки начинаещ в технологиите. Тя е страстна да пише, разработва интересен софтуер и да пътува по света (чрез документални филми).
Абонирайте се за нашия бюлетин
Присъединете се към нашия бюлетин за технически съвети, ревюта, безплатни електронни книги и ексклузивни оферти!
Щракнете тук, за да се абонирате
