Sign in to follow this  
Tascan

Основные контейнеры Bootstrap

Recommended Posts

Всем привет.

В данный момент изучаю Bootstrap и задался таким вопросом. По правилам сетки Bootstrap, если я не ошибаюсь row и col должны быть внутри элемента с классом container.

Но вот если при вёрстке макет разделён на отдельные блоки, например: header отдельно, далее ещё пару блоков с информацией и за ним footer. Как при таком варианте правильнее будет сделать порядок: общий тег container, вместо стандартного wrapper и далее внутри него все вышеперечисленные теги или же нужно создать container для каждого раздела?

А если, например, у каждого из этих разделов свой фон? Тогда уже нужно идти по второму варианту: делать разделы на 100% ширину браузера, прописывать им фон, а вот внутри них уже делать div'ы с классом container, которые уже ограничат ширину блоков с контентом? 

Share this post


Link to post
Share on other sites

Здравствуйте

3 часа назад, Tascan сказал:

вместо стандартного wrapper и далее внутри него все вышеперечисленные теги или же нужно создать container для каждого раздела?

А если, например, у каждого из этих разделов свой фон? Тогда уже нужно идти по второму варианту: делать разделы на 100% ширину браузера, прописывать им фон, а вот внутри них уже делать div'ы с классом container, которые уже ограничат ширину блоков с контентом? 

да

Share this post


Link to post
Share on other sites
1 час назад, klierik сказал:

Здравствуйте

да

Спасибо за ответ.

А ещё не подскажите: всё-таки класс container по своей сути полностью заменяет wrapper или желательно добавлять wrapper для всей страницы, чтобы исключить добавление лишний стилей к body, а уже внутри него container?

Share this post


Link to post
Share on other sites
1 минуту назад, Tascan сказал:

А ещё не подскажите: всё-таки класс container по своей сути полностью заменяет wrapper или желательно добавлять wrapper для всей страницы, чтобы исключить добавление лишний стилей к body, а уже внутри него container?

Если <div> не выполняет никакой роли — он не требуется.

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

Истина где-то по середине 🙂

Share this post


Link to post
Share on other sites
9 минут назад, klierik сказал:

Если <div> не выполняет никакой роли — он не требуется.

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

Истина где-то по середине 🙂

Всё понял. Большое спасибо за ответ)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By vka986
      Здравствуйте, я начинающий верстальщик, только учусь сейчас изучаю технологию Bootstrap и у меня возникла проблема, есть три блока с контентом, каждый занимает по 4 колонки то есть использую col-md-4, в сетке бутстрапа в макете все отлично сходиться вместе с 20px margin-right, но в верстке как только в CSS пишу margin  хотя бы 1 px, последний блок сезжает на строчку ниже. Подскажите как с этим быть заранее спасибо.
    • By toplife
      Интернет-маркетинговое агентство Top-Life. Мы ищем в команду Junior Web разработчика.
       
      Что мы ожидаем от кандидата:
      Навыки HTML5, CSS3, JavaScript; Знания PHP5-7‚ MySQL‚ jQuery, ajax; Опыт в верстке; Наличие опыта разработки и знание различных CMS (1С Битрикс, UMI, ModX, WordPress и другие) будет плюсом; Опыт работы и наличие портфолио приветствуется; Умение и желание работать в команде; Аккуратность (осмысленность) в работе.  
      Задачи, которые вам предстоит решать:
      Современная адаптивная кроссбраузерная верстка (HTML5+CSS3); Применение готовой верстки к CMS (1С-Битрикс, Wordpress);  
      Условия:
      Оформление по ТК РФ Заработная плата: от 20 000 до 40 000 руб;  График работы: 5/2 с 10.00–19.00, обед с 14.00–15.00; На территории работодателя; Молодой‚ профессиональный коллектив; Корпоративные мероприятия; Чай, кофе и печеньки с нас; Мы даем возможность не просто работать‚ а создавать и развиваться. Для связи:
      Антон
      тел: 8(981)897-42-46
      mail: a.majstrenko@top-life.su
      hh: https://spb.hh.ru/vacancy/30397980
    • By AlexanderLebedev
      Имеется слайдер, "//" если удалить эти строки , то все работает. Там collapse от bootstrap, скрыть и показать блок.
      А когда всё на месте, с скрытием, то он показывает так
      Помогите исправить, сложно найти рабочий подобный слайдер. Есть мнение что конфликтуют JS, но как их поставить чтоб всё норм было.
      <!-- Наружная реклама --> <div id="collapse_1" class="collapse" aria-labelledby="heading_1" data-parent="#accordionExample"> // ЭТА УДАЛИТЬ НАДО ЧТОБ РАБОТАЛО <div class="container header"> <div class="row align-items-center"> <div class="card-body card align-items-center bg-lightgrey"> <h5> <img src="http://www.cyberforum.ru/images/header/nar.png" width="105" height="80"> Наружное и внутреннее оформление </h5> </div> </div> <!-- Слайдер --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200"> </div> <div class="swiper-slide"> <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200"> </div> <div class="swiper-slide"> <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200"> </div> <div class="swiper-slide"> <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200"> </div> <div class="swiper-slide"> <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200"> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <!-- Конец слайдера --> </div> </div> // ЭТА УДАЛИТЬ ЧТОБ РАБОТАЛО НАДО <!-- Конец наружной рекламы --> СКРИПТЫ В КОНЦЕ BODY
      <!-- Скрипты --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="js/slider.js"></script> <script type="text/javascript"> var swiper = new Swiper('.swiper-container', { slidesPerView: 3, spaceBetween: 30, loop: false, loopFillGroupWithBlank: false, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } }); </script> <script src="js/bootstrap.js"></script> <!-- Конец скрипты -->  
      После уменьшении или увеличении страницы всё работает как надо. Что за логика ?
  • Member Statistics

    46,498
    Total Members
    3,128
    Most Online
    Alx_2019
    Newest Member
    Alx_2019
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Дорогие пользователи!   У Нас появились новые прокси сервера России в городе Санкт-Петербург.   Всегда в наличии качественные прокси стран: Россия, Украина, Казахстан, США, Канада, Латвия, Молдова, Германия, Франция, Италия и других стран Европы. Ассортимент городов.   Наш сайт: https://proxywhite.com/   По всем вопросам Вы можете обратиться к консультанту на сайте или в поддержку.   Так же Вы можете подписаться на наши соц.сети что бы не попускать новости нашего сервиса и скидки.   ВКонтакте: https://vk.com/proxywhite_com Твиттер: https://twitter.com/proxywhite_com Телеграмм канал: https://t.me/proxywhite Ютуб канал: https://www.youtube.com/channel/UCoXlwm6R4XDvpS5MhCOVTTA?view_as=subscriber
    • Добрый день! Есть задача - добавить ссылку в html код страницы, позволяющий пользователю сохранить её на комп. Имя сохраняемого файла должно быть Title.htm
      По сути, ссылка - аналог нажатия Ctrl+S. Второй день копаю - видать не там... Прошу помощи С уважением...
    • В верстке, в подавляющем большинстве случаев, нет единственно правильных решений. С одной стороны, для того что-бы не раздувать код, нужно делать якорь на тот тег на который отправляет ссылка. Но, с другой стороны, а если завтра этот тег поменяется, например, с параграфа на заголовок? Тогда выходит правильнее сделать пустой якорный тег 🙂
  • Popular Contributors