Как создать адаптивный сайт начальной загрузки

1. отзывчивая навигация
2. область маркетинга
3. раздел содержимого
4. правая боковая панель
5. нижний колонтитул

Адаптивная навигация

Давайте построим панель навигации сайта. Он будет содержать заголовок веб-сайта и некоторые элементы меню, выровненные по правому краю. Это будет исправлено в верхней части сайта, как вы видели на демонстрационной странице. Итак, вот разметка для этого:

 <nav class="navbar fixed-top navbar-expand-md navbar-light bg-light"> 

Класс navbar предназначен для отображения раздела навигации. Дополнительный класс с fixed-top заставляет его придерживаться верхней части страницы. navbar-light и bg-light контролируют цвет текста и цвет фона панели навигации соответственно. Довольно ясно!

Давайте двигаться дальше и вставим еще немного кода:

 <nav class="navbar fixed-top navbar-expand-md navbar-light bg-light"> <div class="container"> <!-- more navigation code here --> </div> </nav> 

container используется для хранения всего внутри панели навигации в качестве оболочки.

До сих пор все, что мы добавили, является лишь базовой структурой нашей панели навигации. Давайте посмотрим на реальные магические вещи, которые делают навигацию отзывчивой.

 <nav class="navbar fixed-top navbar-expand-md navbar-light bg-light"> <div class="container"> <a class="navbar-brand" href="#">Responsive Website</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <!-- left navigation links --> <ul class="navbar-nav mr-auto"> <!-- active navigation link --> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span> </a> </li> <!-- regular navigation link --> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <!-- more navigation links --> </ul> <!-- right navigation link --> <ul class="nav navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">Login</a> </li> </ul> </div> </div> </nav> 

Брендинг и пункты меню говорят сами за себя. Должно быть понятно, что добавление класса navbar-brand придает заголовку чистый вид и используется для названия сайта. Элементы nav заключены в дополнительный div с классами collapse navbar-collapse , которые используются для отображения меню в виде стека при просмотре в меньших браузерах.

Чуть ниже брендинга вы можете увидеть дополнительную ссылку с navbar-toggler которая оборачивает navbar-toggler-icon span navbar-toggler-icon . Эта ссылка видна только на небольших экранах со значком списка. Также обратите внимание, что мы использовали data-toggle=collapse который Bootstrap использует для скрытия / отображения пунктов меню в небольших окнах. data-target используется для определения того, какие меню скрыть / показать.

Маркетинговая зона

Маркетинговая зона будет создана с использованием div с классом jumbotron . Внутри него добавьте h1 с классом display-2 , абзацем и ссылкой с btn btn-primary btn-lg . Класс display-2 выделяет общий заголовок. То же самое относится к lead классу в <p> . Код должен выглядеть следующим образом:

 <div class="jumbotron"> <h1 class="display-2">Learn Geometry</h1> <p class="lead">Marketing message here.</p> <a class="btn btn-lg btn-primary" href="#" role="button">Call to Action »</a> </div> 

Раздел контента

Для раздела контента мы будем использовать новую систему сетки Bootstrap на основе Flexbox. Мы начнем с того, что разделим страницу на два столбца, более широкий и меньший столбец. Итак, начальная разметка выглядит так:

 <div class="row"> <!-- wider column --> <div class="col-md-8 mb-4"> <!-- page content --> </div> <!-- narrower column --> <div class="col-md-4 mb-4"> <!-- sidebar links --> </div> </div> 

Класс col-md-* указывает, что макет с двумя столбцами будет запускаться только от экранов среднего размера вверх. Меньшие экраны будут размещать обе колонки друг над другом. Также обратите внимание на числа в конце класса col-md-* . Их сумма составляет 12, то есть общее количество столбцов в сетке Bootstrap: 8 + 4 = 12. Класс mb-4 является одним из многих вспомогательных классов, доступных Bootstrap. Этот конкретный является частью служебных классов интервалов и используется для создания полей в нижней части каждого столбца.

Bootstrap позволяет легко вкладывать столбцы, добавляя дополнительный элемент div с классом row внутри содержащего столбца. Всего не может быть более 12 столбцов, но, если хотите, у вас может быть меньше 12. Наше демо будет иметь три одинаковых по длине вложенных столбца. Внутри более широкой колонки добавьте следующий код:

 <!-- nested columns --> <div class="row"> <!-- first nested column --> <div class="col-md"> <h3 class="display-4">Title</h3> <p> Paragraph text. </p> <a href="#" class="btn btn-primary">Button</a> </div> <!-- second nested column --> <div class="col-md"> <!-- column content --> </div> <!-- third nested column --> <div class="col-md"> <!-- column content --> </div> </div> 

Для получения более подробной информации перейдите к документам Bootstrap Grid , которые действительно удобны для пользователя и содержат потрясающую информацию.

Правая боковая панель

Правая боковая панель будет содержать вертикальный список навигации. Внутри меньшего вложенного столбца добавьте разметку для неупорядоченного списка:

 <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <!-- more links --> </ul> 

Bootstrap добавляет некоторый интерес к простому неупорядоченному списку с классом pills . Добавление класса flex-column гарантирует, что список будет отображаться вертикально.

Создание нижнего колонтитула

Наш нижний колонтитул будет простым контейнером из одной колонки с информацией об авторских правах. Но теперь, когда вы знаете, как работает сетка Bootstrap, вы можете сделать ее настолько сложной, насколько захотите.

Таким образом, код для нижнего колонтитула идет здесь:

 <footer class="container mt-4"> <div class="row"> <div class="col"> <p class="text-center">Design by <a href="#">Zetiz Labs</a></p> </div> </div> </footer> 

text-center — это удобный вспомогательный класс для выравнивания текста, в то время как mt-4 — еще один вспомогательный служебный класс, который создает некоторую верхнюю границу для div нижнего колонтитула.

Посмотрите еще раз на конечный результат: