Боотстрап је предњи оквир који вам помаже да брже и лакше направите веб локације са одзивом на мобилне уређаје. Прво је развијен од стране Твитера, Боотстрап се сада користи за било шта, од развоја веб апликација до ВордПресс тема. Такође је потпуно бесплатан, свестран и интуитиван.

Помоћу Боотстрапа можете дочарати сложене веб странице из стандардног ХТМЛ-а и прилагодити их вашим потребама. Боотстрап се такође испоручује са низом јКуери додатака који могу пружити додатне функције попут вртиља, дугмета, савета и још много тога.

На крају, али не најмање битно, даје вам се доста пречица за израду веб страница које ће вам уштедјети вријеме и енергију. Све што вам треба је основно разумевање ХТМЛ-а и ЦСС-а за креирање које су прилагодљиве, прво мобилне и компатибилне са свим модерним прегледачима.

П.С. Боотстрап није савршена опција за комплетне почетнике. Било би корисно ХТМЛ и ЦСС знање. Алтернативно, за креирање веб локације можете да користите програмере веб-страница или ВордПресс.

1. корак: Подешавање и преглед

Да бисте користили Боотстрап, прво га морате интегрисати у своје развојно окружење, тј. Веб страницу. За то имате две различите могућности: учитајте га на даљину или преузмите и користите Боотстрап локално. Међутим, обојици је прво потребно нешто у што ћете је учитати.,

1. Направите ХТМЛ страницу

Као први корак направићемо једноставан ХТМЛ предложак као базу где ћемо користити Боотстрап. Због тога, прво што желите да урадите је да направите фасциклу на рачунару или серверу за пројектне датотеке. У овом случају, ја ћу то једноставно назвати боотстрап. Овде направите нову текстуалну датотеку и назовите је индек.хтмл. Отворите га уређивачем текста по вашем избору (нпр. Нотепад++), а затим га залепите доле.

Не заборавите да сачувате датотеку пре него што кренете даље!

2а. Учитајте Боотстрап преко ЦДН-а

Као што је већ објашњено, Боотстрап се састоји углавном од стилова и скрипти. Као такви, они се могу учитати у заглављу и подножју ваше веб странице као и друга средства, попут прилагођених фонтова. Оквир нуди ЦДН (мрежу за доставу садржаја) приступну стазу за то. Можете га пронаћи на Страница за преузимање боотстрапа, даље испод.

Да бисте покренули Боотстрап на своју страницу, једноставно залепите код испод у одељак вашег шаблона.

Када сад сачувате датотеку, сваки претраживач који се отвори аутоматски ће учитати Боотстрап средства.

Употреба даљинске методе је добра идеја јер ће многи корисници већ имати оквир у кешу свог прегледача. Ако је то случај, неће морати да га поново учитају када дођу на вашу веб локацију, што доводи до бржег времена учитавања страница. Као посљедица тога, ово је препоручена метода за веб локације уживо.

Међутим, за експериментирање и развој или ако желите да будете независни од интернетске везе, можете добити и своју копију Боотстрапа. Ово радим за овај туториал јер резултира и мање кода за постављање.

2б. Локално води Боотстрап

Алтернативни начин за подешавање Боотстрапа је преузимање на хард диск и датотеке користећи локално. Опције преузимања можете наћи на истом месту као и везе до удаљене верзије. Овде будите сигурни да ћете добити компајлиране ЦСС и ЈС датотеке. Не требају вам изворне датотеке.

Након што то учините, распакујте датотеку и копирајте њен садржај у исти директориј као индек.хтмл. Након тога можете учитати Боотстрап ЦСС у свој пројекат на следећи начин:

Примјетићете да то укључује путању датотеке на којој ћете пронаћи датотеку Боотстрап. У вашем случају провјерите је ли ваш пут одговара вашем стварном подешавању. На пример, имена директоријума могу се разликовати ако сте преузели другу верзију програма Боотстрап.

3. Укључите јКуери

Да бисте добили потпуну функционалност Боотстрапа, потребно је и учитати јКуери библиотеку. И овде имате могућност да га учитате на даљину или га хостујете локално.

У првом случају ћете пронаћи везу до најновије верзије јКуери-а овде. Можете је користити за учитавање библиотеке на своју страницу тако што ћете испод ставити тачно линију кода испред места где пише на вашој страници.

Алтернативно, преузми јКуери (кликните десним тастером миша> Сачувај везу као…), распакујте и ставите га у фасциклу пројекта. Затим на исти начин додајте исту датотеку:

Поново проверите да ли путања одговара вашем подешавању.

4. Учитајте ЈаваСцрипт за покретање

Последњи корак у подешавању Боотстрапа је учитавање ЈаваСцрипт библиотеке Боотстрап. Они су укључени у преузету верзију оквира и такође можете пронаћи везе до удаљених извора на истом месту као раније. Међутим, учитаћемо га на друго место него место са стилом. Уместо у заглавље, прелази у подножје странице, одмах након позива за јКуери.

Можете је назвати на даљину овако:

Или локално тако:

5. Све то саставите

Ако сте правилно пратили горе наведене кораке, требало би да завршите са датотеком која изгледа овако за удаљено решење:

Алтернативно, ако хостујете локално, предложак странице треба да подсећа на доњи код:

Ако сте то сачували и сачували свој посао, сада сте спремни да пређете на следећи корак.

2. корак: Дизајнирајте своју одредишну страницу

У реду, то је, додуше, било доста припрема. Међутим, није било јако тешко, зар не? Плус, сада почиње забава.

У овом тренутку, када се налазите на свом узорку, једноставно бисте требали видети празну страницу. Време је да се то промени.

1. Додајте навигациону траку

Прво што желимо је да додамо навигациону траку на врх странице. То омогућава посетиоцима да обилазе вашу веб страницу и открију остатак ваших страница.

За то ћемо искористити навбар класа. Ово је један од задати елементи оф Боотстрап. То ствара навигациони елемент који је подразумевано прилагодљив и аутоматски ће се срушити на мањим екранима. Такође нуди уграђену подршку за додавање марке, шеме боја, размака и других компоненти.

Користићемо га као доле и поставићемо га испод таг:

 Лого    
 
 
 Кућа 
 
 О томе 
 
 Контакт 
 
 
 

Нешто објашњење кода:

• навбар-екпанд-мд – Ово означава у ком се тренутку навигациона трака шири од вертикалне или хамбургер иконе до хоризонталне траке пуне величине. У овом случају поставили смо је на средње екране, што је у Боотстрапу нешто веће од 768пк.
• навбар-бренд – Ово се користи за брендирање ваше веб странице. Овде можете да укључите и датотеку са логотипом.
• навбар-тогглер – Означава преклопни тастер за срушени мени. Мир дата-тоггле = "колапс" дефинише да ће се ово окренути менију хамбургера, а не падајућем падајућем изборнику, што је друга опција. Важно је да дефинишете дата-таргет са ЦСС идом (дефинисаним с #) и замотајте див са истим именом око стварног навбар елемент.
• навибар-тогглер-икона – Као што вјероватно можете погодити, ово ствара икону коју корисници кликну да би отворили мени на мањим екранима.
• навбар-нав – Разред за
  елемент листе који садржи ставке менија. Потоњи су означени са нав-итем и нав-линк.

  Зашто ово толико објашњавам?

  Јер то је поента Боотстрапа. Имате све ове стандарде који вам омогућавају да брзо креирате елементе са неким ХТМЛ и ЦСС класама. Не морате писати ЦСС да бисте стилизовали, све је већ постављено унутар Боотстрапа. Осим тога, све је мобилно одзивно ван кутије! Да ли почињете да видите колико је ово корисно?

  Наведено је довољно да бисте додали навигациону траку на своју веб локацију. Међутим, у овом тренутку то и даље изгледа врло мало.

  

  То је зато што на њему нема пуно стајлинга. Док сте у могућности да додате подразумеване боје (на пример, тако што ћете навбару дати класу као што је бг-дарк навбар-дарк), уместо тога желимо да додамо своје.

  2. Укључите прилагођени ЦСС

  Срећом, ако желите да промените подразумевани стил, не морате да пролазите кроз велику библиотеку стилова и да промене извршите ручно. Уместо тога, баш као и код ВордПресс подређене теме, ви сте у могућности да додате своје ЦСС датотеке које можете да користите за преписивање постојећих стилова.

  За то једноставно створите празну датотеку са уређивачем текста и позовите је маин.цсс. Сачувајте га, а затим га додајте у одељак са главе вашег Боотстрап сајта овако:

  Ово је код за листу стилова који се налази у главном директорију. Ако одлучите да сместите свој унутра цсс директоријум, обавезно укључите тачан пут у везу.

  Од овог тренутка можете да додате прилагођени ЦСС на своју веб локацију. На пример, да бисте стилизовали навигациону траку и њене елементе, могли бисте користити ознаку овако:

  тело { паддинг: 0; маргина: 0; позадина: # ф2ф6е9; } / * --- навигациона трака --- * / .навбар { позадина: # 6аб446; } .нав-линк, .навбар-бренд { боја: #ффф; показивач: показивач; } .нав-линк { маргина-десно: 1ем! важно; } .нав-линк: лебдећи { боја: # 000; } .навбар-колапс { оправдати садржај: флек-енд; }

  И ево резултата:

  

  Изгледа боље него прије, зар не?

  3. Направите контејнер за садржај странице

  Након навигационе траке, следеће што желите је спремник за садржај странице. У Боотстрап-у је ово једноставно, јер све што вам треба је испод ознаке за навигацију:

  Примјетите посуда-течност класа. Ово је још једна од оних подразумеваних класа Боотстрап. Примењујући га на див елемент аутоматски примењује гомилу ЦСС-а на њега.

  Тхе -течност део осигурава да се контејнер протеже по целој ширини екрана. Ту је и само контејнер, која има фиксиране ширине на њега, тако да ће увек бити простора на обе стране екрана.

  Међутим, ако сада поново учитате страницу, и даље нећете видети ништа (осим ако не користите алате за развојне програмере). То је зато што сте створили само празан ХТМЛ елемент. Ово ће се сада почети мењати.

  4. Додајте позадинску слику и прилагођени ЈаваСцрипт

  Као следећи корак овог водича за покретање програма, желимо да укључимо позадинску слику преко целог екрана за заглавље наше одредишне странице. За то ћемо морати да користимо јКуери да се слика протеже цијелим екраном.

  То радите на исти начин на који укључујете прилагођени ЦСС. Прво направите текстуалну датотеку имена маин.јс и сместите га у фасциклу своје веб локације. Затим га назовите пре затварања означите унутра индек.хтмл.

  Након тога, можете копирати и залепити овај део кода да бисте га направили

  елемент се протеже преко целог екрана:

  $ (документ) .реади (функција () { $ ('. хеадер'). висина ($ (виндов) .хеигхт ()); })

  Затим, једино што остаје је поставити позадинску слику. Можете то учинити тако изнутра маин.цсс:

  .хеадер { бацкгроунд-имаге: урл ('слике / хеадер-бацкгроунд.јпг'); позадина: поклопац; позадинска позиција: центар; позиција: релативна; }

  Ако слику довољне величине поставите на локацију наведену стазом изнад, постићи ћете резултат сличан овом:

  

  5. Додајте слој

  Да бисмо позадинску слику учинили додатном стилском, додаћемо и прекривање. За то ћете створити још један див елемент унутар оног који сте претходно укључили.

  Затим у своју прилагођену ЦСС датотеку можете додати следеће:

  .прекривање { позиција: апсолутна; минимална висина: 100%; минимална ширина: 100%; лево: 0; врх: 0; позадина: ргба (0, 0, 0, 0.6); }

  Ово ће створити овај леп прекривач за слику коју раније унесете:

  

  6. Укључите наслов странице и текст текста

  Сада вероватно желите да додате наслов странице у облику наслова плус нешто тела. На тај начин ће посетиоци одмах знати на којој се локацији налазе и шта могу да очекују од ње.

  Да бисте их креирали, једноставно додајте овај исјечак унутар контејнера који сте поставили у последњем кораку, испод прекривања:

   
  Добродошли на одредишну страницу!
   
  Лорем ипсум долор сит амет, посвећење адиписцинг елит. Куискуе интердум куам одио, куис плацерат анте луцтус еу. Сед аликует долор ид сапиен рутрум, ид вулпутате куам иацулис. Суспендиссе цонсецтетур ми ид либеро фрингилла, ин пхаретра сем улламцорпер.
   

  Након тога додајте следећу ознаку маин.цсс.

  .Опис { лево: 50%; позиција: апсолутна; врх: 45%; трансформисати: превести (-50%, -55%); поравнавање текста: центар; } .опис х1 { боја: # 6аб446; } .опис п { боја: #ффф; фонт-сизе: 1.3рем; линија висина: 1,5; }

  Када то учините, одредишна страница сада изгледа овако:

  

  То се заиста почиње зближавати, зар не??

  7. Креирајте дугме ЦТА

  Ниједна одредишна страница није потпуна без позива на акцију, најчешће у облику дугмета. Из тог разлога, било би нам добро да у овај туториал Боотстрап-а не укључимо како да га креирамо.

  Оквир нуди обиље алата за брзо и лако креирање тастера. Можете наћи пуно примера овде. У мом случају додајем следеће ознаке одмах испод садржаја странице унутар контејнер:

  Реци ми више!

  Поред тога, овом ЦСС-у додајем маин.цсс:

  .тастер за опис { обруб: 1пк чврста материја # 6аб446; позадина: # 6аб446; обруб границе: 0; боја: #ффф; } .тастер за опис: лебдите { граница: 1пк солид #ффф; позадина: #ффф; боја: # 000; }

  Након чувања и поновног уметања, изгледа овако:

  

  8. Подесите одељак са три колоне

  Већ сам сасвим задовољан како се ствари обликују. Међутим, још нисмо завршили са страницом. Даље, желимо да направимо три колоне испод главног садржаја за додатне информације. Ово је специјалност Боотстрапа јер игра на своју снагу: креирање решетке. Ево како то урадити у овом случају:

   
   
   
  Лорем ипсум
    
  Лорем ипсум долор сит амет, посвећење адиписцинг елит. Куискуе интердум куам одио, куис плацерат анте луцтус еу. Сед аликует долор ид сапиен рутрум, ид вулпутате куам иацулис.
   
   
   
  Лорем ипсум
    
  Лорем ипсум долор сит амет, посвећење адиписцинг елит. Куискуе интердум куам одио, куис плацерат анте луцтус еу. Сед аликует долор ид сапиен рутрум, ид вулпутате куам иацулис.
   
   
   
   
   

  Прво што ћете приметити је ред елемент. То вам треба кад год креирате ступце да би радили као спремник за мрежу.

  Што се тиче стубова, сви имају неколико класа: цол-лг-4, цол-мд-4 и цол-см-12. Они означавају да имамо посла са колонама и величином коју ће имати на различитим екранима.

  Да бисте то разумели, морате да знате да се у Боотстрап мрежи све колоне у једном реду увек додају на број 12. Дакле, давање горе наведених класа значи да ће заузети једну трећину екрана на великом и средњем екрани (12 подељено са 3 је 4), али цео екран на малим уређајима (12 од 12 колона).

  Има смисла, зар не??

  Приметићете и да сам уврстио слике и додао .слика-течност класа за њих. Ово ће учинити да они одговоре на начин да скалирају заједно са екраном на коме страница приказује.

  Поред тога, на уобичајено место укључени су следећи стајлинги:

  .Карактеристике { маргина: 4ем ауто; паддинг: 1ем; позиција: релативна; } .карактеристика-наслов { боја: # 333; фонт-сизе: 1.3рем; фонт-веигхт: 700; маржа-дно: 20пк; трансформација текста: велика слова; } .феатурес имг { -вебкит-бок-схадов: 1пк 1пк 4пк ргба (0, 0, 0, 0,4); -моз-бок-сенка: 1пк 1пк 4пк ргба (0, 0, 0, 0,4); бок-схадов: 1пк 1пк 4пк ргба (0, 0, 0, 0,4); маржа-дно: 16пк; }

  Када се дода испод главног садржаја и сачува, изгледа овако:

  

  9. Додајте контакт образац

  Примјетићете да је једно од нових поља још увек празно. Ово је намерно, јер желимо да му додамо образац за контакт. Ово је сасвим нормална пракса да се одредишне странице омогуће посетиоцима да ступе у контакт.

  Креирање контакт форме у Боотстрапу је прилично једноставно:

  Ступите у контакт!
   
    
   
    
   
    
   

  До сад ми више није требало да објашњавам марку за креирање колона. Ево шта значи остатак маркирања:

  • форма-група – Користи се за омотавање поља образаца за форматирање.
  • контрола облика – Означава поља образаца као што су улази, текстуална подручја итд.

  Много више можете урадити са обрасцима о чему можете сазнати у документацију. Међутим, у демонстративне сврхе, горе је довољно. Ставите га у преостали празан ступац, а затим додајте овај стил маин.цсс:

  .карактеристике .форм-цонтрол, .могућности уноса { обруб границе: 0; } .карактеристике .бтн { позадинска боја: # 589б37; обруб: 1пк солид # 589б37; боја: #ффф; маргин-топ: 20пк; } .карактеристике .бтн: лебдећи { позадинска боја: # 333; обруб: 1пк чврста материја # 333; }

  Када то урадите, добијате образац као што је овај:

  

  10. Направите подножје са две колоне

  У реду, сада се приближавамо крају туторијала о Боотстрапу. Последња ствар коју желите да додате одредишној страници је одсек подножја са два ступца. До сада, то вам више не би требало представљати проблем.

  Поред уобичајеног маркирања решетке, овај одељак истиче неколико могућности за промену типографије помоћу Боотстрап-а:

  • велика слова
  • фонт-веигхт-болд
  • тект-центер

  Из имена наставе које то чине требало би да буде прилично јасно. Можете пронаћи више информација о Боотстрап-у и типографији овде.

  Поред горе наведеног, можете користити и овакав стил:

  .фоотер стране { позадинска боја: # 222; боја: #ццц; паддинг: 60пк 0 30пк; } .фоотер-цопиригхт { боја: # 666; паддинг: 40пк 0; }

  То резултира прекрасним подножјем који изгледа овако:

  

  11. Додајте медијске упите

  Страница је у основи спремна до сад. Такође је у потпуности одговоран. Међутим, у приказу мобилног прегледача, горњи одељак још није исправан.

  

  Међутим, без бриге, то можете лако исправити једноставним медијским упитом. Ако не користите САСС за састављање странице Боотстрап, оне функционишу на исти начин као и у другим случајевима. Само морате имати на уму унапред постављене тачке прекида укључено у Боотстрап.

  Као последица тога, да бисте исправили горњи проблем, једноставно можете да додате део кода попут овог:

  @медиа (мак. ширина: 575.98пк) { .Опис { лево: 0; паддинг: 0 15пк; позиција: апсолутна; најбољих 10%; трансформација: ниједна; поравнавање текста: центар; } .опис х1 { фонт-сизе: 2ем; } .опис п { фонт-сизе: 1.2рем; } .Карактеристике { маргина: 0; } }

  Након тога све је како треба бити:

  

  12. Отпремите веб локацију на веб домаћин

  Ако сте пратили даље, сада би требали бити постављени са готовим веб сајтом који ће такође бити мобилни и који у потпуности реагује.

  Међутим, засад је нико осим вас не може видети. Да бисте то променили, потребни су вам веб домаћин и домен. На тај начин људи могу да унесу адресу ваше веб странице у траку свог прегледача и затим приступе вашој новоизграђеној веб локацији Боотстрап на мрежи.

  Да бисте им омогућили то, морате да поставите локацију на свој сервер. То можете учинити и са ФТП клијентом ФилеЗилла. Прикупите своју ФТП адресу, корисничко име и лозинку од свог провајдера хостинга да бисте се даљински повезали са сервером. Када то учините, требали бисте моћи видјети датотеке и директоријуме који су тренутно тамо.

  

  Дођите до директоријума на који је указана ваша домена (обично коријенског директорија). Након што то учините, једноставно пронађите фасциклу са вашим датотекама Боотстрап на тврдом диску, обележите све датотеке унутра, а затим их превуците на сервер да бисте започели пренос. Процес ће трајати неко време док се заврши у зависности од брзине ваше везе као и броја и величине датотека.

  Међутим, када то учините, када приступите домену, требали бисте моћи да видите готов сајт у прозору прегледача.

  

  Није лоше за неколико редака кода, зар не?

  Када говоримо о томе, ако желите да имате цео код за страницу, укључујући прилагођени ЦСС и ЈаваСцрипт, све их можете преузети овде. С овим имате све што је потребно да направите одредишну страницу са програмом Боотстрап.

  Закључак

  Боотстрап је опен-соурце, фронт-енд развојни оквир који свако може бесплатно да користи. Омогућава вам да брзо дизајнирате прототипове, креирате веб странице и уопште погодите земљу.

  Као што сте видели у овом Боотстрап уџбенику за почетнике, потребно му је само основно знање о ХТМЛ-у, ЦСС-у и неки опционални јКуери. Иако није тако удобан као коришћење ВордПресс-а, Боотстрап је и даље валидна алтернатива за прављење веб странице.

  До сада знате како поставити и инсталирати Боотстрап и његове компоненте, креирати једноставну одредишну страницу, укључити неки основни садржај и стилски га прилагодити. Можете да креирате навигационе меније, постављате позадинске слике, укључују дугмад, ступце и обрасце за контакт.

  Наравно, има се што више научити.

  Захваљујући овом основном водичу за покретање програма, сада знате довољно да сами идете даље. Ако желите да зароните дубље у оквир, добро је полазиште В3Сцхоолс. Поред тога, надамо се да вам се свидео овај почетни туториал и да желите да чујемо ваша размишљања и искуства о њему.

  Ажурирање: Такође смо креирали боотстрап варалице за почетнике у .пдф и .пнг верзијама.

  Имате ли каквих размишљања о туториалу Боотстрап изнад? Питања, коментари, захтеви? Јавите нам у одељку коментара!

  

  Jeffrey Wilson Administrator

  Sorry! The Author has not filled his profile.

  follow me