Използването на Bootstrap на контейнер ще даде на потребителя мощна база. И това, което наистина го прави впечатляващо, е широката гама от компоненти, които могат да бъдат добавени към сайта. Тъй като Bootstrap вече има вграден CSS и javascript, са разработени компоненти и функционални. Разбира се, потребителят може допълнително да ги редактира, за да персонализира сайта по ваш вкус.

Принцип на мрежата

Този набор от инструменти за създаване на уеб сайтове и уеб приложения е мрежа, базирана на правилно мащабиране на компоненти за гледане на различни екрани. Мрежовата система на контейнерния Bootstrap се състои от контейнери, редове и колони, които се използват за специфично оформление на сайта. За определяне на ширината на оформлението се използват контейнери с Bootstrap. Елементите се добавят към контейнерите и засягат нейната ширина. Това е елемент с class = "container" и засяга всички елементи в него.


Контейнерите имат 15 пиксела, които омекотяват изгледа от края на страницата. Линии и колони се добавят вътре в контейнерите с фиксирана стандартна ширина на Bootstrap Container, която варира в зависимост от размера на зрителя. Ширината на устройството е показана в таблицата по-долу:

Вижте ширината на устройството



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



По-малко от 768 px 18)


Авто



768px - 991 px



750 px


)
992px - 119px



970 px



1200 px и по-високи



1170 px

Правила на мрежата:

Колоните следва да бъдатдиректен детски елемент на линията.

​​

Линиите се използват само за съхраняване на колони и нищо друго.

Линиите трябва да се поставят в контейнера.

Тези правила са много важни. Линиите и колоните винаги работят заедно и потребителят не трябва да използва един без друг.


В началото това може да изглежда сложно, но е много лесно, само трябва да разберете как работи мрежата. Ако потребителите не искат контейнерите да се променят с фиксирана ширина, можете да използвате class = "container-fluid" вместо class = "container". Това ще накара контейнерите винаги да съвпадат контейнера Bootstrap с цялата ширина на екрана и да променят размера на фиксираната ширина. Грид системата позволява до 12 колони на страница. Те могат да се използват поотделно или групирани заедно. За да групирате колоните заедно, трябва да създадете ред, за който добавите div с class = "row", който съдържа кода на колоната.

Задаване на интервал

За да имате чиста форма, първо трябва да разберете как Bootstrap задава интервала. За всички форми трябва да поставите етикет и контролен елемент в class = "form-group". Контролите и етикетите са в интервален стил. Те трябва задължително да са в своя клас. Класът за контрол на формите задава ширината на контейнера Bootstrap на 100%, принуждавайки го да покрива ширината на формата и да я преоразмерява с помощта на прозореца. Това свойство се използва за въвеждане и избор на контроли. По този начин избраният контрол ще бъде форматиран с включеноконтрол на формата и ще изглежда като опция с контролен клас форма или без нея, а управлението на входа ще бъде форматирано с добавянето на контролен формуляр.

Контроли

Контроли, като текстови полета, квадратчета за отметка, са части, които могат лесно да бъдат добавени към формуляра. Влезте в полетата, в които потребителят може да въвежда текст. Това е основният принцип за въвеждане на Bootstrap на контейнера, използвайки атрибута HTML5 на текста. Тип обявява външния вид на входа. Пълнителят определя текста, който ще се показва в полето за въвеждане. Тези типове могат да бъдат декларирани чрез добавяне към входа. Ако искате да добавите имейл, променете го на type = "email". Трябва да се има предвид, че трябва да разрешите типа вход, така че контролът да е правилно форматиран. Контролът за текстова област е област, която ви позволява да използвате голям обем текст, например за раздел за коментари. Когато добавите текстова област, можете да регулирате размера, като декларирате колко редове искате да заснемете. Тъй като Контейнерният Bootstrap е изграден върху редове и колони, можете да направите текстовата област по-малка или по-голяма, като увеличите или намалите броя на редовете. Полето за отметка позволява на потребителите да изберат няколко опции. По подразбиране квадратчетата за отметка се показват вертикално. Можете обаче да промените квадратчетата за отметка, за да се показват хоризонтално, като промените типа type = "checkbox-inline". Вградените шрифтове се конфигурират различно от основните. В вградения елемент на флага класът е присвоен = "checkbox-inline". Ако обаче погледнете основния контролен код, можете да видитече class = "checkbox" е деклариран в елемента, а не в елемента.
Превключвателят е подобен на отметката. В същото време може да бъде избран само един превключвател, докато самите флагове могат да имат няколко селекции. Както при флаговете, вертикалните ключове се показват по подразбиране, въпреки че можете да промените кода и да се показва хоризонтално.

Видове натоварващи форми

Съществуват няколко вида форми: основни, вградени и хоризонтални. Всеки от тях се различава по свой начин. Вградените имат компоненти, наречени контролни елементи, подредени вертикално. За хоризонтални фигури контролите са конфигурирани хоризонтално. Основната форма идва от глобалния стил на оформление. За да създадете основна форма, просто трябва да създадете формуляр в HTML с елемента

и след това да добавите Bootstrap контроли към таговете

. Другите два вида форми използват класове, за да ги разграничат. Ако класът не е определен, формата по подразбиране съответства на основния. За да направите вградена форма, трябва да добавите елемент class = "form-inline"

. Тя автоматично ще регулира вертикално контролите на формата. Както във вградената форма, хоризонталната форма се получава чрез добавяне на class = "form-horizontal" към елемент. Тя автоматично ще регулира хоризонтално управлението.

Задаване на редове и колони

Редовете покриват ширината на Bootstrap на контейнера. Те имат отрицателен 15-пикселен запас в края, инсталиран от неговия контейнер. Това се дължи на факта, че всеки от тях има своя 15-пикселовазапас, който замества маркера на контейнера. Колоните, подравнени един до друг, ще имат 15-кратен ръб, водещ до 30-пикселен ръб между двете колони.

Редовете имат регистрация от -15 px, която отменя добавянето на 15 px на контейнера. Съдържанието в колоната ще зависи от полето от 15 пиксела на колоната. Колоните имат регистрация от 15 пиксела. Стълбовете един до друг ще имат 15 пикселно отстъп, което ще доведе до 30 px буфер. Замяна на префикса и номера на колона с преобладаващия размер и брой колони. Представките определят кое устройство е определено за колона Bootstrap 4 и височина на контейнера. Например, xs е предназначен за малки екрани като телефони.

Префикс



За



xs



= 1200 px (Бележници )

Когато дадена колона е посочена с префикс за по-малко устройство, тя ще бъде показана по подобен начин на по-големи устройства. С други думи, колоната, която се определя като sm, ще работи за устройства с размер на таблета или повече. Предимства при използване на колони:

Създаване на хоризонтални раздели от прозореца.

Може да има различна ширина.

Може да варира по ширина при различни ширини на екрана.

Възможност за стифиране хоризонтално от ляво на дясно, след това вертикално нагоре и надолу.

Може да промени позицията (подреждането) на братята и сестрите в една и съща линия.

Те имат еднаква височина с другите братя и сестри в един ред.

Може да "расте" или "стиска" по ширина.

Може автоматично да "обвива" или"Източете" вертикално, както е необходимо, или на различни ширини на екрана.

Може да съдържа повече редове и Вмъкване на колони__.

Актуализиране на css структурата

След много години на изчакване, Bootstrap 4 беше освободен през януари 2018 година. Bootstrap беше първата широко разпространена css структура. Новата версия на програмата се основава на тази успешна основа и има много подобрения, които правят мрежите по-лесни за използване. Bootstrap 4 е OG на подходящи оформления. Новият конфигурационен файл angular.json има напълно различна структура от оригиналния angular-cli.json.
Ако потребителят възнамерява да се фокусира върху използването на мрежа за създаване на гъвкави оформления в приложения Angular, той трябва само да използва bootstrap-grid и bootstrap-reboot пакети. Можете да добавяте файлове на Bootstrap на контейнер CSS директно в свойството "styles" на angular.json. Импортирането на мрежа в основния файл style.scss има едно важно предимство, преди да се импортира в файла angular.json. Тя ви позволява да променяте всяка променлива, използвана от дефинициите на стила на Bootstrap. На практика може да е полезно да създадете файл styles-variables.scss до styles.scss в папката src с чувствителни точки на прекъсване, както е определено в Bootstrap по подразбиране. Използването на styles-variables.scss ви позволява да замените решетката по подразбиране и да приложите свои собствени персонализирани стилове. Затова можете да го импортирате в първия ред - styles.scss, който ще се използва с Bootstrap, но също и във всеки друг стилов файл на компонент за последователно изпълнение на селективния отговор.

Инструкции за начинаещи

Bootstrap е много полезна платформа за интерфейспо-бързо и по-лесно уеб програмиране. Потребителят няма да се налага да се притеснява, че ще има практически опит, като разполага с мощен интерфейс, когато го използва. Ръководството за начинаещи Bootstrap включва следните процедури, които ще изискват:

Изтегляне или активиране на Bootstrap.

Напишете HTML код.

Разрешаване на CSS на Bootstrap.

Разрешаване на JQuery Library Enable Bootstrap javascript.

Добавете IE8 поддръжка за HTML5 и мултимедийни заявки.

Добавете лента за навигация.

Добавете съдържание към страницата на контейнера.

Добавете заглавие.

Добавете таблица.

Добавете формуляра в таблицата.

Добавете бутон за стартиране с Glyphicon.

Добавете прозорец с добро търсене.

Демо за окончателен код на живо.

Онлайн ресурси.

Следващите раздели ще се превърнат в стъпка-по-стъпка ръководство за първата уеб разработка, използвайки Bootstrap.

Изтегляне на CDN и HTML5

Има няколко начина за използване на Bootstrap на уеб страница. Един от тях е да се използва CDN или мрежата за доставка на съдържание. Използването на bootstrap CDN означава, че потребителят няма да изтегли и запази първоначалните файлове за зареждане на сървъра или на локалния компютър. За да направите това, създайте нов index.html файл. Отворете файла, въведете следния код и го запазете. Ако потребителят иска да използва неговото копие, напишете:



Трябва да се уверите, че файлът е изтеглен. След това го поставете в същата директория като index.html например в папката "bootstrap-4". jQuery се изисква за функцията javascript Bootstrap. Ако искате да използвате вашето копие на jQuery:



Преди да се уверите, че jQuery е заредена и поставена в същата директория като index.html, например, името на файла jQuery е "jquery-300.min.js". Контейнер-течност е основният елемент със 100% ширина на собственото си оформление, изпълнява странични вдлъбнатини за проектиране на колони. Течността на контейнера Bootstrap създава пълна ширина, подобно на контейнер-течност, на по-малки устройства.

javascript и IE8

Функциите на Bootstrap, като навигационната лента, изискват javascript bootstrap файл. За да направите това, поставете следния код след кода на предишния раздел:



Също така трябва да добавите поддръжка за IE8 за HTML5 и медийни заявки. Bootstrap е база, която е свързана с мобилната технология и следователно отговаря на различни устройства и размери на екрана. Навигационните панели са много готини. Потребителите няма да търсят данни на сайта, ако контейнерът Bootstrap се използва правилно. За да направите това, поставете следния код в маркера.

Начало

Всички

Демо

Контакт

Тегът div ще съдържа съдържанието на уебсайта. Това е важно, защото определя ширината на съдържателната страница. Той няма да се разпръсне, ако посетителят използва голям размер на екрана. За да добавите контейнер за съдържание, поставете следния код в кода на предишния раздел.

Изготвяне на заглавие на таблица

Заглавието е важно, защото указва на потребителя коя страница се намира. Поставете следния код между маркерите на "div div" от предишния раздел.



Страница с образец на Bootstrap с форма



В този пример има таблица, в коятозапишете формулярни елементи, като текстово поле. Работният плот изглежда добре, няма висящ ефект и отговаря на действията на потребителите. За да направите това, поставете следния код в предишния раздел.















)



Адрес







Списък



)











Пример за тази форма ще съдържа няколко текстови полета, текстова област и резервно копие в списъка. За да направите това, заменете кода на предишния раздел със следното.










)



Адрес







Списък



)

добавяне на бутона GLYPHICON

Glyphicon е библиотека от монохромни икони и символи, създадени с акцент върху простотата и удобната ориентация. Иконите на бутоните изглеждат добре, а библиотеката сигнализира на потребителя какво е предназначено за бутона. Иконите и цветните бутони могат лесно да посочат какво прави един бутон в уеб приложението. За да направите това, поставете следния код между "последните маркери" от предишния раздел.



И можете също да добавяте бележки, като използвате първоначалния бутон, като поставите следния код, преди да отворите dev тага от предишния раздел.

Глави нагоре!codeofaninja.com!

Ако потребителят зареди кода, той ще получи следното съобщение в допълнение към първоначалното:

Позиция



Описание



Index-cdn.html



ИзползваСтруктура на Bootstrap в CDN. Ще работи, ако компютърът ви е онлайн.



Index-local.html



Използва изтеглената структура без CDN. Работи на местен хост. В Bootstrap 4 фоновото изображение на размера на контейнера ще работи, дори ако компютърът е изключен.

Очевидно Bootstrap предлага на потребителя множество отлични инструменти, които ускоряват разработването на софтуерни приложения. Това спестява много часове и дори дни в проектирането и кодирането на странен потребителски интерфейс. Софтуерните компоненти и плъгини са най-добре документирани, изпълнени с живи примери и кодови блокове за удобство на потребителя. Bootstrap е много достойно средство за разработване и проектиране на мобилни уебсайтове, което ви позволява първо да проектирате структурата си, а по-късно - шрифтовете, цвета и стила. Просто трябва да прекарате известно време в изучаването на характеристиките на метода и да го използвате най-добре.