BenderIsGreat34
@BenderIsGreat34
junior front-end

Стоит ли создать новый контейнер для отдельной вёрстки хедера?

Есть вот такая разметка первого блока, но я думаю что не стоит совмещать хедер(т.е навигацию на сайте) с другим блоком. Я хотел вынести хедер вообще полностью отдельно, но тогда чтобы хедер был поверх картинки нужно будет его позиционировать абсолютно, с бутстрапом это не очень удобно, легче было запихнуть в контейнер начального блока весь хедер и не делать из мухи слона. Вопрос: стоит ли в диве home сделать ещё один контейнер под хедер? На бутстрапе особо много не пишу, поэтому опыта в нём не так много
div(class="home")
    div(class="container")
        div(class="row align-items-center")
            div(class="col col-lg-5")
                img(src="./img/content/logo.png", alt="logo" class="home__logo")
            div(class="col-4 col-lg-7")
                button(type="button" class="home__menu-btn--hidden btn btn--active" aria-label="btn-burger")
                    span
                ul(class="home__list-links")
                    li
                        a(href="#") home
                    li
                        a(href="#about") about
                    li
                        a(href="#expertise") expertise
                    li
                        a(href="#teams") teams
                    li
                        a(href="#works") works
                    li
                        a(href="#people") people say
                    li
                        a(href="#contact") contact


        div(class="row home__content")
            div(class="col-lg-1")
            div(class="col-lg-10")
                h2(class="home__title") we are awesome creative agency
                hr
                p(class="home__subtitle").
                    This is Photoshop`s version of Lorem Ipsum. Proin gravida nibh vel velit autctor aliquet.
                    Aenean sollicitudin, lorem quis bibendum auctor nisi elit consequat ipsum, nec sagittis sem nibh id elit.
                    Duis sed odio amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.
                button(type="button" class="button--default") LEARN MORE
            div(class="col-lg-1")


вот так выглядит страница моя
5d63f70d99cf9232371998.png
  • Вопрос задан
  • 113 просмотров
Решения вопроса 1
verkhoturov
@verkhoturov
HTML-Верстальщик / Frontend Developer
Стоит ли создать новый контейнер для отдельной вёрстки хедера?


Стоит.
С помощью Pug можно и нужно разбивать верстку на отдельные компоненты.
Это удобно, как минимум, в ситуациях когда компоненты нужно использовать повторно. (Например, компонент с хедером можно использовать на новых страницах).

но тогда чтобы хедер был поверх картинки нужно будет его позиционировать абсолютно, с бутстрапом это не очень удобно


В чем неудобство? Судя по коду, вы совмещаете свои классы и классы бутстрапа. Так и нужно.
Бутстрап это сетка и, при необходимости, набор готовых решений (типа модалок, списков, кнопок и т.д.), которые можно кастомизировать по своему усмотрению.
В вашем случае, вы вообще собираетесь использовать только сетку. Тогда тем более нужны свои классы.

P. S. Вы немного неверно пишите на Pug.
У вас вот так -
div(class="home")
    div(class="container")
        div(class="row align-items-center")
            div(class="col col-lg-5")


А нужно писать так -

.home
     .container
        .row.align-items-center
            .col.col-lg-5


В скобках указывайте прочие атрибуты, типа src, href, alt и т. д.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы