Читать книгу Шпаргалки для начинающего верстальщика HTML/CSS - Елена Эберт - Страница 13

Оформляем с помощью библиотеки Bootstrap, как ее подключить расскажу далее.

<header class=«container header»>

<div class=«row»>

<div class=«col-2»>

<a href="/" class=«logo-link»>

<img width=«128» src=«img/Фото логотипа» alt=«logo» class=«logo-image»>

</div>

</div>

<div class=«col-6»>

<nav>

<ul class=«navigation»>

<li class=«navigation-icon»>

<a href=«#» class=«navigation-link»> Womens </a>

</li>

<li class=«navigation-icon»>

<a href=«#» class=«navigation-link»> Mens </a>

</li>

<li class=«navigation-icon»>

<a href=«#» class=«navigation-link»> Goods </a>

</li>

<li class=«navigation-icon»>

<a href=«#» class=«navigation-link»> Brands </a>

</li>

<li class=«navigation-icon»>

<a href=«#» class=«navigation-link»> Blog </a>

</li>

</ul>

</nav>

</div>

<div class=«col-2»>

<button class=«button»>

<img class=«button-icon» src=«img/Фото» alt=«icon Card»>

<span class=«button-text»> Cart </span>

</button>

</div>

</div>

</header>

Кратко опишу теги, примененные выше в коде

container – это ключевой строительный блок Bootstrap. Его применяют для содержания, заполнения, центрирования содержимого внутри него.

<div class=«row»> класс «row"является элементом библиотеки Bootstrap. Ее сетка состоит из строк и колонок, что дает возможность позиционировать элементы на странице как это необходимо по макету. Сам класс означает ряд, который занимает всю ширину элемента, внутри которого он находится, выравнивание по горизонтали реализуется через колонки col.