Меню Bootstrap 4

Question

Я пытаюсь создать двухстрочное меню с начальной загрузкой 4, и я нашел несколько примеров в Интернете:

• https://www.codeply.com/go/DpHESPqZsx
• https://www.codeply.com/go/cxXqBnGrPx

В первом примере они используют "div class = 'navbar'" для создания меню.

<div class="navbar">...</div>

Во втором примере они используют "nav class = 'navbar'" длясоздать меню.

<nav class="navbar">...</nav>

Какой правильный путь?Какой из них следует использовать?

У меня есть еще один вопрос.Почему они НЕ используют сетку начальной загрузки со строками и столбцами?Когда вы должны его использовать?

Большое спасибо

Answer 1

Разница в том, что div не имеет значения, а элемент nav имеет семантическое значение (что указывает на наличие навигации). Вы можете удалить все элементы div и span с веб-сайта и не иметь различий в семантической структуре страницы, каждый другой элемент имеет значение: например, указывается, что существует основной контент, например, здесь указывается заголовочная часть сайта. .

Эти части, например, сообщают поисковым системам, что находится на сайте. Так что, если у вас есть элемент «Stackoverflow» где-то в вашем элементе, Google (и другие поисковые системы) знают, что в вашей навигации есть ссылка на stackoverflow. Если он есть в вашем теге, возможно, у вас есть текст о stackoverflow.

Имейте в виду: это несколько упрощенных примеров.

Answer 2

Тег html5 nav имеет семантическое значение.

Пожалуйста, следуйте документам Bootstrap . Сетка (row> col) должна не использоваться в Navbar , поскольку это не поддерживаемый компонент .Использование сетки внутри Navbar приведет к отклонению от выравнивания, интервалу и отзывчивому поведению, управляемому классами navbar-expand-*.Я являюсь автором обоих примеров Navbar из Codeply, которые вы опубликовали.

Answer 3

Div и nav являются похожими элементами с точки зрения того, что они делают. Тем не менее, навигация лучше в этой ситуации, потому что вы хотите иметь семантическую разметку. Это из-за SEO и более читабельно для разработчиков.

И почему они не используют сетку, вероятно, потому, что они еще не реализовали ее и должны появиться. В настоящее время их сеточная система выполнена с помощью flex, но должна измениться. И CSS Grid не очень хорошо работает с IE11.

Вы должны использовать Grid, когда почувствуете, что структурировать ваш сайт будет проще. Это отличный инструмент, и объединить его с Flex так просто и удобно