У цій публікації ми почнемо зі створення сайту за допомогою 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
Якщо ви віддаєте перевагу вводити код вручну, ми починаємо зі створення папки, у якій буде збережено сайт. Ви можете поставити будь-яке ім'я.
Потім виконуємо наступні дії:
- Переходимо до меню Архів.
- Натисніть на Новий текстовий файл.
- Натисніть на Зберегти.
- Шукаємо створену нами папку і ставимо ім'я файлу example1.html.
- Натисніть на Зберегти.
Іноді вікно Провідника файлів може бути приховано вікном VSCodium.
Нехай розширення створить для нас основний шаблон. Для цього друкуємо !b5-$
Це створить код, який ви знайдете в папці example1 як exampleXNUMX.html
Ми побачимо наступне:
Це код, згенерований розширенням Bootstrap.
Ми збираємося внести деякі зміни в цей файл. Ви знайдете зміни під назвою example2.html
- У рядку 2 ми змінюємо мову, замінюючи eng на es. Це вказує пошуковим системам, що мова сайту іспанська.
- У рядку 6 ми змінюємо текст, який знаходиться під мітками назву. Ми кладемо Мій перший сайт Bootstrap.
- У рядку 12 ми змінюємо вміст між тегами h1 по Це сайт, створений за допомогою Bootstrap.
Далі ми внесемо деякі важливі зміни. Ці зміни стосуються:
- Розробник плагіна не встигає за версіями Bootstrap, і є новіші.
- Існує багато варіантів компонентів початкового завантаження, і мене цікавить інший.
- Згідно з офіційною документацією, виклики бібліотек Javascript повинні бути всередині тегів body.
Наприклад, 2 ми змінюємо вміст рядка 7, видаляємо рядки 8 і 9 і завантажуємо решту вмісту, щоб підтримувати сумісність нумерації. Потім ми натискаємо кінець рядка 10, щоб створити новий рядок 11 і розмістити посилання на бібліотеки Javascript.
Не хвилюйтеся, якщо ви не розумієте код. У наступній статті я поясню функцію кожного рядка.