В тази публикация ще видим оформлението на Bootstrap сайт за да покажете невероятните възможности на тази рамка с отворен код. в предишни статии бяхме инсталирали среда за разработка и необходимите добавки, за да улесним работата си.
Запомнете това като мениджър на съдържанието на Linux Adictos Не ми позволява да вмъкна кода на примерите, които качих в GitHub. За да ги изтеглите, трябва да инсталирате пакета Git на вашата дистрибуция и след това да напишете следните команди:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
Ще трябва периодично да изпълнявате тези две команди, за да изтеглите новите файлове.
Анализиране на кода
Сега в File Explorer отворете example2.html с VSCodium. (Отворете с десен бутон) Виждаме следното:
- В ред 1 казваме на браузъра вида на документа, за да знае как да го изобрази.
- Ред 2 показва езика на сайта, който показва на браузъра как да представят определени знаци и на търсачките езика на съдържанието, което улеснява позиционирането. В нашия код е дефиниран като es, но има регионални варианти като es_ES за испански от Испания или es_AR за испански от Аржентина.
- От ред 3 имаме контейнер за метаданни, разположен между таговете Y . Метаданните предоставят информация за документа. В нашия пример:
- Ред 4 показва стандарта, използван за кодиране на знаци. Може би сте виждали понякога, че вместо знаци с ударение или специални символи, се показва въпросителен знак вътре в диамант. Това е така, защото браузърът използва неправилно кодиране. Изявлението на ред 8 избягва това, като го декларира изрично.
- В ред 5 казваме на браузъра как трябва да се адаптира към различните екранни формати.
- Заглавието, което задаваме в ред 6, ще се показва в горната лента на браузъра и в търсачките.
- На ред 7 казваме на браузъра къде да намери елементите на рамката на Bootstrap, свързани със стила.
- От ред 10 започва контейнерът. Тялото включва съдържанието на уеб страницата и връзката към скриптовете Bootstrap, които ще осигурят интерактивност на нашия сайт.
- Ред 13 показва края на документа.
Оформление на Bootstrap сайт
Ключови концепции за оформлението на Bootstrap сайт
Както казахме в предишни статии, Bootstrap използва мобилния подход на първо място. Когато се прилага този подход, дизайнът се прави с устройството с най-малък размер на екрана и след това се добавят слоеве, за да се адаптира към следващите размери.
Тук трябва да вземем предвид две ключови концепции:
- Точки на прекъсване.
- Медийна консултация.
Точките на прекъсване показват от коя ширина на екрана се променя оформлението., Медийните заявки прилагат стилови параметри въз основа на определени характеристики на браузъра и операционната система. С други думи, всяка точка на прекъсване ще има съответен стил.
Bootstrap идва с шест предварително дефинирани точки на прекъсване, които могат да бъдат модифицирани от по-напреднали програмисти. Точките по подразбиране са:
- Изключително малък: Няма предварително зададен идентификатор и се прилага за екрани с ширина под 576 пиксела.
- Малък: Идентифицира се със sm и се използва за екрани от 576 пиксела.
- Среден: Идентифицира се с md и се използва за екрани от 768 пиксела.
- Дължина: Идентифициран като lg се използва за екрани от 992 пиксела.
- Изключително дълъг: Има идентификатор lg и прилага стиловете към екрани от 1200 пиксела.
- Изключително много дълъг: Маркиран с идентификатора xxl, той се използва за прилагане на дизайна към екрани от 1400 пиксела.
Тези размери не са избрани случайно всяка от точките на прекъсване може да съдържа контейнери, чиято ширина е кратна на 12. Те също така не са насочени към конкретно устройство, а вместо това се адаптират към различни категории устройства и размери на екрана.
В рамките на различните размери на екрана намираме контейнерите. Те отговарят за хостването, попълването и подравняването на съдържанието на сайта в определено устройство или графичен прозорец.
;