M
M
Maxim Kudryavtsev2016-01-18 21:56:13
css
Maxim Kudryavtsev, 2016-01-18 21:56:13

What is the essence of this block structure in Bootstrap?

Good day to all.
There is the following block structure:

<nav class="site-navigation">
  <div class="container">
    <div class="row">
      <div class="site-navigation-inner col-sm-12">
        (Всякое разное содержимое блока 1)
      </div>
    </div>
  </div>
</nav>
<div class="welcome-slide">
  <div class="container">
    <div class="row">
      <div class="welcome-slide-inner col-sm-12">
        (Всякое разное содержимое блока 2)
      </div>
    </div>
  </div>
</div>

...etc. There can be many blocks. When I myself have to type something from scratch, I do it like this
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      (первый блок)
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      (второй блок)
    </div>
  </div>
</div>

Both of the above examples allow you to achieve the same result, however, more and more often looking at the code of other sites, I see that the first option is used.
Please explain why each block needs to be surrounded by a separate div with its own class, in which the container is then nested. Why not just make one container for the entire page and nest all subsequent blocks as lines in it? Is there any convenience in this, or did some convention pass me by? Roughly speaking, why is the second piece of code worse than the first?
Used by Twitter Bootstrap 3.x. Both options are used on sites like landing page, ie. only large blocks in the entire width of the screen are used

Answer the question

In order to leave comments, you need to log in

4 answer(s)
W
winbackgo, 2016-01-18
@kumaxim

For logical separation of blocks. A page can consist of different blocks that are not related to each other in any way. Delete and insert new ones easily and clearly.
Blocks can have different designs, for example, bg should take up the entire width and inside there is a container.
In the end, it all depends on the task. If the second option suits you, then use it, there is no mistake in this. I like the first option - it's more flexible.

A
Alexey Ukolov, 2016-01-18
@alexey-m-ukolov

Landing pages like to make the background "striped" - that is, each section has its own. If you wrap everything in one container, you can't do without crutches.

A
Alexey Strukov, 2016-01-18
@pm_wanderer

They just have such a framework structure.
Auxiliary classes are used, which, depending on the content, add some css properties. For example, if the content needs to have some sort of transform: scale() effect, then the container for that content can add an overflow: hidden property. You can open their css and see what each class adds to the styles. It remains to either accept their rules or cut your own framework with blackjack and media queries)

I
Ilya Pirozhok, 2016-01-19
@kamikadze1996

What would then get close to the internal blocks. You won't touch the bootstrap .container in your styles, right? Here, for convenience, they are added

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question