В этом посте мы увидим макет сайта 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 использует подход Mobile First. Когда применяется этот подход, дизайн выполняется для устройства с учетом наименьшего размера экрана, а затем добавляются слои, чтобы адаптировать его к следующим размерам.
Здесь мы должны учитывать два ключевых понятия:
- Контрольные точки.
- Медиа консультация.
Точки останова указывают, с какой ширины экрана изменяется макет., Медиа-запросы применяют параметры стиля на основе определенных характеристик браузера и операционной системы. Другими словами, каждая точка останова будет иметь соответствующий стиль.
Bootstrap поставляется с шестью предопределенными точками останова, которые могут быть изменены более опытными программистами. Точки по умолчанию:
- Extra Small: не имеет предустановленного идентификатора и применяется к экранам шириной менее 576 пикселей.
- Маленький: обозначается sm и используется для экранов от 576 пикселей.
- Medium: Обозначается md и используется для экранов от 768 пикселей.
- Длина: Обозначается как lg и используется для экранов с разрешением от 992 пикселей.
- Сверхдлинный: имеет идентификатор lg и применяет стили к экранам от 1200 пикселей.
- Сверхсверхдлинный: Помечен идентификатором xxl, используется для применения дизайна к экранам от 1400 пикселей.
Эти размеры выбраны не случайно, т.к. каждая из точек останова может содержать контейнеры, ширина которых кратна 12. Они также не ориентированы на конкретное устройство, а вместо этого адаптируются к различным категориям устройств и размерам экрана.
В пределах различных размеров экрана мы находим контейнеры. Они отвечают за хостинг, наполнение и выравнивание содержимого сайта в определенном устройстве или графическом окне.
;