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

Question

[Иван]

Есть вот такая разметка первого блока, но я думаю что не стоит совмещать хедер(т.е навигацию на сайте) с другим блоком. Я хотел вынести хедер вообще полностью отдельно, но тогда чтобы хедер был поверх картинки нужно будет его позиционировать абсолютно, с бутстрапом это не очень удобно, легче было запихнуть в контейнер начального блока весь хедер и не делать из мухи слона. Вопрос: стоит ли в диве 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")

вот так выглядит страница моя

Comments

[WapSter]

Да можно.

[Andrej Sharapov]

С pug, судя по всему, опыта тоже не много

[Сергей Карвасарный]

можно, но есть вариант с кодом из коробки - .fixed-top
https://getbootstrap.com/docs/4.0/examples/navbar-...

[Иван]

Andrej Sharapov, комментарий не имеет конечно отношения к вопросу, но раз уж сказали, то подскажите, что не так

[Иван]

Сергей Карвасарный, из бутстрапа только сетку взял, больше ничего не буду брать)

[Rustam Bainazarov]

Можно, я разрешаю.

[Сергей Карвасарный]

BenderIsGreat34, так пример открой глянь какие стили добавляет этот класс и себе закинь) там по факту тот же самый fixed)) можешь заворачивать хоть в лаваш)) а можно сделать общий блок для всего текста и сделать отступ на высоту header.

Answer 1

[Иван В]

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

Стоит.
С помощью 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 и т. д.