В этом посте мы начнем с создания сайта на Bootstrap., фреймворк с открытым исходным кодом, который позволяет нам легко сделать его отзывчивым и обеспечить некоторую интерактивность. Это базовый шаблон, автоматически сгенерированный подключаемым модулем среды разработки, который мы рекомендовали ранее и который нам придется изменить.
В предыдущая статья Вы найдете инструкции по установке VS Codium, переводу его пользовательского интерфейса на испанский язык и установке плагина Bootstrap.
Две вещи, о которых следует помнить:
- Команды, которые мы используем, являются сочетаниями клавиш, их нужно набирать. Копировать/вставить не работает.
- Наш контент-менеджер не позволяет мне отображать HTML-код, поэтому мне приходится использовать скриншоты. Чтобы у вас был доступ к коду примеров я их выложил на Гитхаб.
Как клонировать репозиторий GitHub
Что отличает великих людей от остальных, так это то, как они реагируют на проблемы. Ричарду Столлману не нравился его драйвер принтера, и, поскольку ему не разрешали его менять, он начал движение за свободное программное обеспечение. Линуса Торвальдса не убедила ни одна из платформ для обмена кодом, и он создал свою собственную. мерзавец
В отличие от традиционных систем распространения программного обеспечения, в которых разрешено только одно взаимодействие с пользователем — загрузка, с 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, и есть более свежие версии.
- Есть много вариантов компонентов начальной загрузки, и меня интересует еще один.
- Согласно официальной документации, вызовы библиотек Javascript должны находиться внутри тегов body.
Например, во втором примере мы изменили содержимое строки 2, удалили строки 7 и 8 и загрузили оставшееся содержимое для обеспечения совместимости нумерации. Затем мы нажимаем на конец строки 9, чтобы создать новую строку 10 и поставить ссылку на библиотеки Javascript.
Не волнуйтесь, если вы не понимаете код. Я объясню функцию каждой строки в следующей статье.