У 2011, Твитер је представио Боотстрап фрамеворк. Од тада, овај ЦСС оквир је доживео два велика преправка, од којих је најновији (Боотстрап 3) објављен 2013. Боотстрап 3 је трансформисао ЦСС библиотеку тако што је имплементирао приступ који је првенствено намењен мобилним уређајима који је оставио оквир да потпуно реагује.
Од 2022. године, Боотстрап је у верзији пет и један је од најпопуларнијих фронтенд оквира. Има опсежну листу унапред изграђених компоненти и импресивну колекцију ЈаваСцрипт додатака. У овом чланку ћете научити како да користите Боотстрап и да максимално искористите његове функције.
Инсталирање Боотстрап-а у ваш пројекат
Постоје три начина да се користите Боотстрап у свом пројекту. Можете преузети и хостовати ЦСС и ЈаваСцрипт датотеке, инсталирати их у свој пројекат користећи нпм или копирати и налепити одговарајуће цдн везе у свој пројекат.
Са цдн приступом, морате запамтити да поставите Боотстрап везу пре било које друге ЦСС везе у хеад таг ваше ХТМЛ датотеке.
Неке компоненте Боотстрап-а имају функционалне активности, као што је пребацивање дугмади и позиционирање које захтева увоз ЈаваСцрипт и Поппер скрипте. Дакле, ако намеравате да користите било коју функционалну компоненту, мораћете да додате и ознаку скрипте у своју ХТМЛ датотеку.
Последња ствар која вам је потребна да почнете да користите Боотстрап је виевпорт таг.
Пошто је Боотстрап технологија која је на првом месту за мобилне уређаје, виевпорт таг ће помоћи у респонзивном дизајну. Једноставан начин да користите боотстрап у свом пројекту је само копирање Боотстрап почетни шаблон.
Креирање веб странице помоћу Боотстрапа
Када правите нову веб локацију, једна од првих ствари коју треба да узмете у обзир је изглед. Након тога можете прећи на друге компоненте као што су дугмад и типографија.
Боотстрап има колекцију структурних компоненти које можете користити за организовање елемената на веб страници. Ове структуре распореда укључују:
- Контејнери
- Грид
- Колумне
- Олуци
- Преломне тачке
Користећи мало измењену верзију Боотстрап стартер шаблона, можете почети да описујете структуру своје веб странице и додајете нове компоненте.
Датотека индек.хтмл
Обавезни мета ознакеБоотстрап ЦСС
Боотстрап
Одвојите Поппер и Боотстрап ЈС
Класа Боотстрап контејнера
Тхе Боотстрап контејнер цласс падс, садржи и поравнава елементе на вашој веб страници. Ако планирате да користите Боотстрап подразумевана мрежа, онда ћете морати да користите и Боотстрап контејнер класа. Постоје три врсте контејнер класе; контејнер, контејнер-течност, и контејнер-{преломна тачка}. Класа контејнера је подразумевани контејнер; реагује и има фиксну ширину на свакој од шест преломних тачака за Боотстрапс.
Боотстрап-ових шест подразумеваних тачака прекида укључује:
- Веома мали: Мање од 576 пиксела.
- мали: Веће или једнако 576 пиксела.
- средњи: Веће или једнако 768 пиксела.
- велико: Веће или једнако 992 пиксела.
- Кс-Ларге: Веће или једнако 1200 пиксела.
- КСКС-велики: Веће или једнако 1400 пиксела.
Да бисте користили Боотстрап контејнер у свом пројекту, можете једноставно додати жељену класу контејнера у екстерну див на вашој веб страници.
Коришћење Боотстрап контејнера
овде поставите елементе веб странице Уметање горњег кода у тело постојеће ХТМЛ датотеке учиниће да ваша веб страница реагује, а такође ће створити паддинг на свакој страни ваше веб странице.
Боотстрап Грид систем
Боотстрап мрежа користи систем од дванаест колона који се ослања на ред и цол грид класе, као и класа контејнера. Сваки ред има дванаест колона, а било који елемент може да се простире преко једне или више ових колона. Класа колоне ће показати колико колона елемент треба да заузме. На пример, елемент који користи цол-2 цласс ће се простирати на две колоне, елемент који користи цол-3 класа ће се протезати кроз три колоне, и тако даље.
Боотстрап грид систем је заснован на флекбок модулу. Ако само две колоне заузимају ред, поделиће простор подједнако међу собом. Тхе дно цласс је један од Боотстрап-ових структурних елемената и контролише размак између сваке колоне у систем мреже. Сваки грид колона има 12 пк допуна са обе стране.
Коришћењем Боотстрап-овог Грид система
главни садржај на веб страници
Чланак
Лорем ипсум, долор сит амет цонсецтетур адиписицинг елит. Долорем порро нон куае
обцаецати илло лабориосам а, волуптате молестиас еум велит, дифферентио импедит
ратионе фацере нумкуам, оптио елигенди делецтус цумкуе куос.
Уметање кода изнад у контејнер див створиће Боотстрап систем мреже од три реда и две колоне. Први ред на врху ће држати навигациону траку, трећи ред на дну ће држати подножје веб странице, а други ред у средини ће садржати садржај веб странице. Други ред има две колоне — главни чланак и једну страну.
Креирање локалне ЦСС датотеке и додавање ивице сваком делу мреже омогућиће вам да је видите јасније.
Датотека стиле.цсс
.ров{
ивица: 2пк плава чврста;
}
.цол, .цол-см-4{
граница: 2пк црвена пуна;
}
Повезивање са ЦСС датотеком изнад ће створити следећи излаз у вашем претраживачу:
Очигледна разлика на слици изнад је величина колона. Обично две (или више) колона у реду заузимају исту количину простора осим ако изричито не наведете другачије. Тхе цол-см-4 класа у ХТМЛ коду изнад осигурава да се друга колона простире само на четири од дванаест колона у реду. Тхе см у цол-см-4 класа представља малу тачку прекида, тако да ће одељак са стране заузимати само четири колоне од мале тачке прекида и изнад.
Боотстрап компоненте
Након што се одлучите за изглед ваше веб странице, следећи корак је да додате елементе за изградњу веб странице, које Боотстрап назива компонентама. Боотстрап-ова листа компоненти укључује:
- Навбар
- Дугмад
- Група дугмади
- Група листа
- Картице
- Колапс
- Падајући мени
Боотстрап Навбар класа
Свака Боотстрап навигациона трака захтева навбар класа. Они такође захтевају употребу или додељивање кључне речи „навигација“ за Боотстрап улога атрибут у родитељу навигационе траке див. Да бисте навигациону траку учинили прилагодљивом, мораћете да користите скупи ЈаваСцрипт додатак.
Тхе Боотстрап навбар разред користи ан арија-струја атрибут који узима вредност „страница“ да би означио тренутну страницу или „труе“ да означи тренутни одељак веб странице. Вредност коју доделите зависиће од структуре ваше веб странице (једна страница или више страница). Такође би требало да користите активни разред да бисте означили тренутну страницу или одељак.
Коришћењем Боотстрап-ове Навбар-е
Замена навигације ред оф тхе Боотстрап грид са горњим кодом ће креирати следећи излаз у вашем претраживачу:
Постоји неколико других важних класа и Боотстрап атрибута у коду изнад, као што је навбар-бренд класе, која циља на одељак са логотипом вашег навбар. Тхе навбар такође у потпуности реагује захваљујући скупи ЈаваСцрипт додатак.
Респонсиве Навбар
Можда се сећате да Боотстрап има шест подразумеваних тачке прекида а једна од тих тачака прекида је велика (лг). Тхе навбар-екпанд-лг разред у изнад се проширује у хоризонталну листу навигационих ставки на великој тачки прекида и изнад, а та листа се враћа на дугме на било којој тачки прекида испод велике.
Ако желите да сазнате више о прављењу респонзивних веб локација, саставили смо део са кратким прегледом како то учинити са медијским упитима у ХТМЛ-у и ЦСС-у.
Компонента Боотстрап дугмета
Тхе Боотстрап дугме компонента користи и захтева да подесите тип атрибут на „дугме“.
Боотстрап има неколико типова дугмади. Да бисте креирали конвенционалније дугме, користили бисте бтн класе, али да бисте креирали дугме за хамбургер као у коду изнад, користили бисте навбар-тоггле класа.
Када треба да користите Боотстрап?
Боотстрап је познат као један од најпопуларнијих ЦСС оквира јер је пионир. Много пре него што је респонзивни дизајн био толико уобичајен у развоју софтвера, Боотстрап се трансформисао у потпуно прилагодљив оквир.
Током година, Боотстрап је наставио да напредује и побољшава, чинећи га избором број један за врхунске компаније, као што су Твиттер и Спотифи. Међутим, то неће увек бити најбоља опција за ваше потребе развоја софтвера. На пример, ако креирате Реацт апликацију, постоји систем дизајна који се зове МУИ који је прилагођен за Реацт апликације.
Материал-УИ има ново име и има за циљ да створи нови систем дизајна алтернативу Материал Десигн-у. Ево како можете да користите МУИ у РеацтЈС пројектима.
Реад Нект
- Програмирање
- Твиттер
- Савети за кодирање
- Програмирање
- Алати за програмирање
Кадеисха Кеан је програмер комплетног софтвера и писац технике/технологије. Она има изразиту способност да поједностави неке од најсложенијих технолошких концепата; производећи материјал који може лако да разуме сваки почетник у технологији. Она је страствена у писању, развоју занимљивог софтвера и путовању светом (кроз документарне филмове).
Претплатите се на наш билтен
Придружите се нашем билтену за техничке савете, рецензије, бесплатне е-књиге и ексклузивне понуде!
Кликните овде да бисте се претплатили