Работата с уеб страници изисква много повече от просто познаване на езиците, които трябва да използваме, има редица етапи, които трябва да изпълним, за да разработим продукт с изключителен резултат. Един от тези етапи е дизайнът и подреждането на елементите, които ще се показват на екрана.
Нека си представим, че трябва да проектираме уеб страница, ако започнем от нулата трябва да вземем предвид как трябва да изглежда менюто, таблиците, бутоните, толкова прости неща като иконите, които ще поставим върху някои бутони за действие и т.н.
Както виждаме, това е упорита работа, особено ако искаме тя да изглежда оптимално и да има привлекателност, ние също трябва да бъдем подробни, за да придадем на сайта личен щрих, какво ще стане, ако не сме дизайнери? Това е големият въпрос, има разработчици, които имат затворени очи, когато става въпрос за добър вкус и дизайн, а тези видове профили са възпрепятствани, за да правят качествени уеб изяви. Или какво, ако имаме добър вкус, но малко време за проектиране?
За да разрешим тези две големи изисквания, които имаме Bootstrap което не е нищо повече от а CSS рамка което ни позволява да получим основния аспект на нашата страница наведнъж, без да се налага да страдаме с дизайна, но освен това ни помага и с основните ефекти и много специален начин за структуриране на съдържанието, което ще представим.
Предимства на BootstrapТова вече го знаем Bootstrap това е CSS рамка и това ни помага да установим основните аспекти на нашия уебсайт, но в допълнение към това той има определени предимства по отношение на използването му, по -долу ще видим някои от положителните неща, които ни носи Bootstrap:
1. Повторна употребаС Bootstrap Имаме много компоненти, направени по подразбиране, така че можем да ги използваме без промени в различни части на нашия уебсайт, като по този начин се намалява времето и количеството на кода, който използваме. Това също благоприятства модулното развитие на нашите приложения.
2. ПоследователностБлагодарение на факта, че имаме много компоненти, направени по общ начин, кодът е последователен, тоест обработва много подобни структури, така че когато го четем или поддържаме приложението, вече ще знаем как работи много по -просто.
3. Гъвкав дизайнМобилният дизайн е много важен и Bootstrap отчитайки го от самото начало, ние имаме гъвкавостта, че нашият сайт се адаптира автоматично към различни резолюции и оформления на екрана, спестявайки ни много работа от необходимостта от проектиране на мобилни изгледи от нулата.
4. ОбщностДруг аспект, който трябва да се вземе предвид, е документацията, когато използваме рамка на трета страна е много важно да имаме къде да се обърнем, когато имаме съмнения и в този смисъл Bootstrap Той няма сравнение, тъй като можем да получим почти всеки отговор на нашите съмнения без много усилия.
Недостатъци на BootstrapВъпреки че почти всичко е добро, трябва да говорим и за недостатъците или не чак толкова добрите аспекти, с които се сблъскваме, когато използваме това CSS рамкаНека видим някои от неговите слабости по -долу.
1. Малко оригиналАко не отделим малко време, за да направим нашия дизайн, можем да останем толкова малко оригинални, ако използваме Bootstrap без повече, въпреки че тази рамка е предназначена за това, поради голямото възприемане, което има, трябва да поработим малко повече, за да не изглеждаме като копието на копието.
2. Крива на обучениеКакто всичко, трябва да преминем през кривата на обучение, ако искаме да извлечем максимума от него, проблемът е, че ако искаме да преминем от основния аспект към напредналия, шокът е малко силен.
3. Лоша съвместимост между версиитеКогато има промяна на версия, предишната версия губи много валидност и ако искаме да я актуализираме, това ще ни струва, особено ако сме направили важни промени, така че нашият сайт да изглежда различно.
ИнсталацияСлед като разберем какво е Bootstrap, както и предимствата и недостатъците на използването му в нашите проекти, трябва да стигнем до практическата част на урока, сега ще научим откъде можем да вземем тази рамка и как можем да я включим в нашия проект.
Първи BootstrapПървото нещо, което трябва да направим, е да получим необходимите файлове, които да включим Bootstrap в нашия проект, затова трябва да посетим уебсайта им getbootstrap.com и да изтеглим необходимите файлове, или алтернативно да използваме CDN за да избегнем хостването на файловете на нашия сървър и да намалим използването на нашата честотна лента.
Каквато и да е опцията, трябва да сме на страница, подобна на следната, ако щракнем върху бутона за първоначално изтегляне, когато посещаваме страницата на рамката:
Увеличете
За да улесним работата, нека приемем, че сме изтеглили проекта, той идва в компресиран файл, който трябва да извлечем на място, което можем да използваме и което трябва да е нещо подобно на следното:
Както виждаме, в нашия проект трябва да има три папки, една за CSS, друг за използваните източници и накрая един за JS необходимо. С това вече имаме на разположение Bootstrap, което не е нищо повече от копиране на проекта в нашата папка с ресурси.
Започнете с BootstrapТъй като разполагаме с всички ресурси, трябва да ги включим в нашия дизайн, за това можем да създадем файл HTML и там направете необходимите включвания, можем да видим това по -подробно в следния код:
Инсталиране на BootstrapКакто виждаме, единственото нещо, което направихме, беше да включим три файла, по -специално два .css и а .js, това е, от което се нуждаем, за да започнем да използваме цялата структура, ако сега отворим файла си с браузър, ще видим как шрифтът на буквите се различава от това, което обикновено виждаме с етикет H1:
Решетката на BootstrapЗа да постигнем организацията на нашите дизайни, Bootstrap използвайте решетка или решетка, това се състои от 12 колони, така че всичко, което виждаме на нашия екран, трябва да бъде организирано по този начин, с това се постига, че страницата може да бъде структурирана по такъв начин, че да можем да използваме инструментите, които ни се предлагат по много прозрачен начин.
Разбира се, това е процес на адаптация, но важното е, че можем да правим колони, които групират няколко, както и когато работим с таблиците на HTML че можем да правим колони с няколко съединения със свойството span. За да създадем уебсайт, който използва тази структура, трябва само да имаме следното:
Div с класа контейнер, вътре в този div с класа реди накрая вътре в един или повече div с класа зеле, нека видим в следния код пример за страница с 3 колони, за това всяка колона трябва да групира 4, за да добави общо 12, което е това, което обяснихме, е стойността по подразбиране на Bootstrap.
Колони в BootstrapТова води до страница, на която трите вътрешни div са в един ред, разделен на три равни колони, както можем да видим на следното изображение:Пример за това как да използвате колони в bootstrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam улеснява моя in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Цяло число aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam just ex, request for efficitur vel, placerat sit amet purus. Cras id semper felis. Бъдете ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Цело число eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam улеснява моя in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Цяло число aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam just ex, request for efficitur vel, placerat sit amet purus. Cras id semper felis. Бъдете ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Цело число eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam улеснява моя in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Цяло число aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam just ex, request for efficitur vel, placerat sit amet purus. Cras id semper felis. Бъдете ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Цело число eu eleifend mauris.
Увеличете
Тази структура, въпреки че изглежда малко квадратна, е много гъвкава, тъй като трябва само да направим един вид игра с контейнерите и техните колони, за да постигнем желаните резултати. С това завършваме този урок, с който ефективно направихме първите си стъпки Bootstrap и сега можем да започнем да се възползваме от неговите предимства по -директно в нашите проекти или уеб приложения.
