У цій публікації ми побачимо макет сайту Bootstrap щоб продемонструвати дивовижні можливості цього фреймворку з відкритим кодом. в попередні статті ми встановили середовище розробки та необхідні плагіни для полегшення нашої роботи.
Пам’ятайте про це як контент-менеджер Linux Adictos Це не дозволяє мені вставити код прикладів, які я завантажив на GitHub. Щоб завантажити їх, ви повинні встановити пакет Git у своєму дистрибутиві, а потім написати такі команди:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
Вам потрібно буде періодично запускати ці дві команди, щоб завантажити нові файли.
Аналіз коду
Тепер у файловому провіднику відкрийте example2.html за допомогою VSCodium. (Відкрити правою кнопкою) Ми бачимо наступне:
- У рядку 1 ми повідомляємо браузеру тип документа, щоб він знав, як його відобразити.
- Рядок 2 вказує мову сайту, яка повідомляє браузеру, як представляти певні символи та мову вмісту для пошукових систем, що полегшує позиціонування. У нашому коді це визначено як es, але є регіональні варіанти, наприклад es_ES для іспанської з Іспанії або es_AR для іспанської з Аргентини.
- З рядка 3 у нас є контейнер метаданих, розташований між тегами Ю . Метадані надають інформацію про документ. У нашому прикладі:
- Рядок 4 вказує стандарт, який використовується для кодування символів. Можливо, ви іноді бачили, що замість діакритичних символів або спеціальних символів відображається знак питання всередині ромба. Це тому, що браузер використовує неправильне кодування. Оператор у рядку 8 уникає цього, декларуючи це явно.
- У рядку 5 ми повідомляємо браузеру, як він повинен адаптуватися до різних форматів екрана.
- Заголовок, який ми встановили в рядку 6, буде відображатися у верхній панелі браузера та в пошукових системах.
- У рядку 7 ми повідомляємо браузеру, де знайти елементи фреймворку Bootstrap, пов’язані зі стилями.
- З рядка 10 починається контейнер. Основний вміст містить вміст веб-сторінки та посилання на скрипти Bootstrap, які забезпечать інтерактивність сайту.
- Рядок 13 позначає кінець документа.
Макет сайту Bootstrap
Ключові поняття для макета сайту Bootstrap
Як ми вже говорили в попередніх статтях, Bootstrap використовує мобільний підхід. При застосуванні цього підходу дизайн виконується з урахуванням найменшого розміру екрана пристрою, а потім додаються шари, щоб адаптувати його до наступних розмірів.
Тут ми повинні взяти до уваги два ключових поняття:
- Точки зупину.
- Консультація ЗМІ.
Точки розриву вказують, з якої ширини екрана змінюється макет., Медіа-запити застосовують параметри стилю на основі певних характеристик браузера та операційної системи. Іншими словами, кожна точка зупину матиме відповідний стиль.
Bootstrap поставляється з шістьма попередньо визначеними точками зупинки, які можуть бути змінені більш просунутими програмістами. Точки за замовчуванням:
- Дуже малий: не має попередньо встановленого ідентифікатора та застосовується до екранів шириною менше 576 пікселів.
- Малий: позначається як sm і використовується для екранів від 576 пікселів.
- Середній: ідентифікується як md і використовується для екранів від 768 пікселів.
- Довжина: позначається як lg і використовується для екранів від 992 пікселів.
- Наддовгий: має ідентифікатор lg і застосовує стилі до екранів від 1200 пікселів.
- Дуже довгий: позначений ідентифікатором xxl, він використовується для застосування дизайну до екранів від 1400 пікселів.
Ці розміри були обрані не випадково, тому що кожна з точок розриву може містити контейнери, ширина яких кратна 12. Вони також не націлені на конкретний пристрій, а адаптуються до різних категорій пристроїв і розмірів екрана.
У різних розмірах екрана ми знаходимо контейнери. Вони відповідають за розміщення, наповнення та вирівнювання вмісту сайту в певному пристрої чи графічному вікні.
;