У овом посту ћемо почети са прављењем сајта са Боотстрапом, оквир отвореног кода који нам олакшава да га учинимо прилагодљивим и пружимо му мало интерактивности. То је основни шаблон који аутоматски генерише додатак за развојно окружење који смо раније препоручили и који ћемо морати да изменимо.
У претходни чланак Пронаћи ћете упутства за инсталирање ВС Цодиум-а, превођење његовог корисничког интерфејса на шпански и инсталирање додатка за Боотстрап.
Две ствари које треба имати на уму:
- Команде које користимо су пречице на тастатури, морате да их откуцате. Цопи/пасте не ради.
- Наш менаџер садржаја не дозвољава ми да прикажем ХТМЛ код па морам да користим снимке екрана. Тако да имате приступ коду примера које сам поставио на ГитХуб.
Како клонирати ГитХуб спремиште
Оно што великане одваја од нас осталих је начин на који реагују на проблеме. Ричарду Столману се није допао његов драјвер штампача и пошто му нису дозволили да га промени, покренуо је покрет слободног софтвера. Линуса Торвалдса није убедила ниједна платформа за дељење кода и створио је сопствену. гит.
За разлику од традиционалних система за дистрибуцију софтвера у којима је једина дозвољена интеракција корисника преузимање, са Гитом можете пратити развој пројекта током времена. Други људи могу клонирати спремиште, направити модификације и предложити да их програмери оригиналног пројекта уграде. Ако се прихвати, програмери то могу лако да ураде без потребе да преузимају и поново отпремају датотеке.
Постоји неколико сервиса заснованих на Гиту, ја сам изабрао ГитХуб једноставно зато што се интегрише са ВС Цодиум.
Да бисте преузели узорке датотека на свој рачунар, потребно је само да инсталирате гит пакет пратећи упутства ваше дистрибуције за инсталирање пакета у терминал.
Затим укуцајте следеће команде.
Више волим да сачувам датотеке у фасцикли Документи па променим директоријум са
cd Documentos
Затим клонирам датотеке са:
git clone https://github.com/dggonzalez1971/bootstrap.git
Подсетићу вас на ове кораке у сваком од преосталих чланака, пошто ћете на овај начин ажурирати примере фајлова како буду учитани.
Да бисте видели датотеке, само отворите истраживач датотека и потражите фасциклу боотстрап.
Прављење сајта са Боотстрапом
У случају да више волите да ручно унесете код почињемо креирањем фасцикле у којој ћемо сачувати сајт. Можете ставити које год име желите.
Затим следимо следеће кораке:
- Идемо на мени Архива.
- Кликните на Нова текстуална датотека.
- Кликните на Сачувај.
- Тражимо фасциклу коју смо креирали и стављамо име датотеке пример1.хтмл.
- Кликните на Сачувај.
Понекад прозор Филе Екплорера може бити скривен од стране ВСЦодиум.
Хајде да екстензија направи основни шаблон за нас. За ово куцамо !b5-$
Ово ће генерисати код који ћете наћи у фолдеру примери као екампле1.хтмл
Видећемо следеће:
Ово је код који генерише екстензија Боотстрап.
Направићемо неке измене у овој датотеци. Пронаћи ћете модификације под именом екампле2.хтмл
- У реду 2 мењамо језик заменом енг са ес. Ово означава претраживачима да је језик сајта шпански.
- У 6. реду мењамо текст који се налази испод ознака наслов. Ставимо Мој први Боотстрап сајт.
- У реду 12 мењамо садржај између ознака h1 по Ово је сајт направљен са Боотстрапом.
Затим ћемо направити неке важне модификације. Ове модификације се односе на:
- Програмер додатака не може да прати верзије Боотстрап-а, а постоје и актуелније.
- Постоји много опција за боотстрап компоненте и занима ме још једна.
- Према званичној документацији, позиви Јавасцрипт библиотекама морају бити унутар ознака тела.
На пример 2 изменили смо садржај реда 7, избрисали редове 8 и 9 и отпремили преостали садржај да бисмо одржали компатибилност нумерације. Затим кликнемо на крај реда 10 да креирамо нови ред 11 и ставимо везу до Јавасцрипт библиотека.
Не брините ако не разумете код. Објаснићу функцију сваког реда у следећем чланку.