У овом посту ћемо видети изглед Боотстрап сајта да покаже невероватне могућности овог оквира отвореног кода. Ин претходни чланци инсталирали смо развојно окружење и неопходне додатке да бисмо олакшали наш рад.
Запамтите то као менаџер садржаја Linux Adictos Не дозвољава ми да убацим код примера које сам поставио на ГитХуб. Да бисте их преузели морате инсталирати Гит пакет на своју дистрибуцију, а затим написати следеће команде:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
Мораћете да повремено покрећете ове две команде да бисте преузели нове датотеке.
Анализирајући код
Сада у истраживачу датотека отворите екампле2.хтмл са ВСЦодиум. (Отвори десним дугметом) Видимо следеће:
- У првом реду кажемо претраживачу тип документа тако да он зна како да га прикаже.
- Линија 2 означава језик сајта који претраживачу показује како да представи одређене знакове, а претраживачима језик садржаја који олакшава позиционирање. У нашем коду је дефинисан као ес, али постоје регионалне варијанте као што су ес_ЕС за шпански из Шпаније или ес_АР за шпански из Аргентине.
- Од реда 3 имамо контејнер метаподатака који се налази између ознака И . Метаподаци пружају информације о документу. У нашем примеру:
- Ред 4 означава стандард који се користи за кодирање знакова. Можда сте повремено видели да се уместо наглашених знакова или посебних симбола, унутар дијаманта приказује знак питања. То је зато што претраживач користи неправилно кодирање. Изјава у реду 8 избегава ово тако што га експлицитно декларише.
- У реду 5 кажемо претраживачу како треба да се прилагоди различитим форматима екрана.
- Наслов који смо поставили у реду 6 биће приказан на горњој траци претраживача и у претраживачима.
- У реду 7 кажемо претраживачу где да пронађе елементе Боотстрап оквира који се односе на стил.
- Од реда 10 почиње контејнер. Тело садржи садржај веб странице и везу до Боотстрап скрипти које ће дати интерактивност нашем сајту.
- Ред 13 означава крај документа.
Изглед Боотстрап сајта
Кључни концепти за изглед Боотстрап сајта
Као што смо рекли у претходним чланцима, Боотстрап користи приступ мобилном на првом месту. Када се примени овај приступ, дизајн се ради са уређајем са најмањом величином екрана на уму, а затим се додају слојеви како би се прилагодио величинама које следе.
Овде морамо узети у обзир два кључна концепта:
- Преломне тачке.
- Консултације са медијима.
Тачке прекида означавају са које ширине екрана се изглед мења., Медијски упити примењују параметре стила на основу одређених карактеристика претраживача и оперативног система. Другим речима, свака тачка прекида ће имати одговарајући стил.
Боотстрап долази са шест унапред дефинисаних тачака прекида које напреднији програмери могу изменити. Подразумеване тачке су:
- Екстра мали: Нема унапред подешени идентификатор и примењује се на екране ширине мање од 576 пиксела.
- Мали: идентификује се са см и користи се за екране од 576 пиксела.
- Средњи: идентификује се са мд и користи се за екране од 768 пиксела.
- Дужина: Идентификован као лг се користи за екране од 992 пиксела.
- Екстра дугачак: Има идентификатор лг и примењује стилове на екране од 1200 пиксела.
- Екстра дугачак: Означен идентификатором ккл, користи се за примену дизајна на екране од 1400 пиксела.
Ове величине нису одабране случајно као свака од тачака прекида може да садржи контејнере чије су ширине вишеструке од 12. Они такође нису циљани на одређени уређај, већ се прилагођавају различитим категоријама уређаја и величинама екрана.
У оквиру различитих величина екрана налазимо контејнере. Они су одговорни за хостовање, попуњавање и усклађивање садржаја сајта у одређеном уређају или графичком прозору.
;