В тази публикация ще започнем, като направим сайт с Bootstrap, рамката с отворен код, която ни улеснява да я направим отзивчива и да й предоставим известна интерактивност. Това е основен шаблон, автоматично генериран от плъгин за среда за разработка, който препоръчахме преди и който ще трябва да променим.
В предишна статия Ще намерите инструкции за инсталиране на VS Codium, превод на неговия потребителски интерфейс на испански и инсталиране на приставката Bootstrap.
Две неща, които трябва да имате предвид:
- Командите, които използваме, са клавишни комбинации, трябва да ги въведете. Копирането/поставянето не работи.
- Нашият мениджър на съдържание не ми позволява да показвам HTML кода, така че трябва да използвам екранни снимки. За да имате достъп до кода на примерите, ги качих към GitHub.
Как да клонирате GitHub хранилище
Това, което отличава великите от останалите от нас, е начинът, по който те реагират на проблемите. Ричард Столман не харесва своя драйвер за принтер и тъй като те не му позволяват да го промени, той започва движението за свободен софтуер. Линус Торвалдс не беше убеден от нито една от платформите за споделяне на код и създаде своя собствена. git.
За разлика от традиционните системи за разпространение на софтуер, в които единственото позволено потребителско взаимодействие е изтеглянето, с Git можете да проследите еволюцията на проекта във времето. Други хора могат да клонират хранилището, да правят модификации и да предложат разработчиците на оригиналния проект да ги включат. Ако бъдат приети, разработчиците могат лесно да го направят, без да се налага да изтеглят и качват отново файловете.
Има няколко услуги, базирани на Git, аз избрах GitHub просто защото се интегрира с VS Codium.
За да изтеглите примерните файлове на вашия компютър, трябва само да инсталирате пакета git, като следвате инструкциите на вашата дистрибуция за инсталиране на пакети в терминала.
След това въвеждате следните команди.
Предпочитам да запазя файловете в папката Документи, така че да променя директорията с
cd Documentos
След това клонирам файловете с:
git clone https://github.com/dggonzalez1971/bootstrap.git
Ще ви напомня за тези стъпки във всяка от останалите статии, тъй като по този начин вие ще актуализирате примерните файлове, докато се качват.
За да видите файловете, просто отворете файловия мениджър и потърсете папката начално зареждане.
Изработка на сайт с Bootstrap
В случай, че предпочитате да въведете кода ръчно, започваме със създаването на папка, в която ще запазим сайта. Можете да сложите каквото име искате.
След това следваме следващите стъпки:
- Да отидем в менюто Архив.
- Кликнете върху Нов текстов файл.
- Кликнете върху Запазване.
- Търсим създадената от нас папка и поставяме името на файла пример1.html.
- Кликнете върху Запазване.
Понякога прозорецът на File Explorer може да бъде скрит от този на VSCodium.
Нека разширението създаде основния шаблон за нас. За това пишем !b5-$
Това ще генерира кода, който ще намерите в папката с примери като example1.html
Ще видим следното:
Това е кодът, генериран от разширението Bootstrap.
Ще направим някои промени в този файл. Ще намерите модификациите под името example2.html
- На ред 2 променяме езика, като заменяме eng с es. Това показва на търсачките, че езикът на сайта е испански.
- В ред 6 променяме текста, който е под етикетите заглавие. Слагаме Първият ми Bootstrap сайт.
- В ред 12 променяме съдържанието между таговете h1 от Това е сайт, създаден с Bootstrap.
След това ще направим някои важни модификации. Тези модификации са свързани с:
- Разработчикът на плъгина не може да се справи с версиите на Bootstrap и има по-актуални.
- Има много опции за bootstrap компоненти и аз се интересувам от друга.
- Според официалната документация, извикванията към библиотеките на Javascript трябва да са вътре в таговете body.
Например 2 ние променяме съдържанието на ред 7, изтриваме редове 8 и 9 и качваме останалото съдържание, за да поддържаме съвместимостта на номерирането. След това щракваме върху края на ред 10, за да създадем нов ред 11 и да поставим връзката към библиотеките на Javascript.
Не се притеснявайте, ако не разбирате кода. Ще обясня функцията на всеки ред в следващата статия.