V
V
Veniamin Smirnov2016-02-17 19:39:07
css
Veniamin Smirnov, 2016-02-17 19:39:07

Do I understand the logic of the layout on the bootstrap correctly?

Hello!
I'm learning Bootstrap. I used to make websites with divs on a grid from 960gs (without using their framework). Now I'm drawing a new design, I want to develop it on Bootstrap in the future.
A few questions:
1. Standard grid, 12 columns, 60 px column width):
fdecad5d604b4fc3aeff1deeb61b8c9a.png
2. Left and right margins of 10 px:
300cff3ce904414384d8cffbd235a5f7.png
3. In bootstrap customization ( bootstrap-3.ru/customize.php#grid-system) found only @ grid-gutter-width (padding between columns, returns halved left and right). It turns out that in the case of my grid, I need to set the value to 20px, right? The column width for each screen resolution is different ( bootstrap-3.ru/css.php#grid-options), how to deal with this question when drawing the layout? What value to set?
4. In the future, it is necessary to draw the design according to the following system:
fd0b393065c548409dd6c9078fc35dc2.png
Place content inside the blocks (marked in color), right?
5. After such correct drawing of the elements, it remains to play with the bootstrap classes so that on various devices these blocks "fold" correctly (on a smartphone, all blocks are in 1 column, on a tablet more), right? For now it turns out such a situation that I need to leave 2 blocks in a row on the tablet, and he transfers them to different lines, leaving a lot of space on the right side of the screen.
6. There is no fundamental difference what width of the layout to set? All my life I have been drawing with a maximum width of 960px

.wrapper{
width: 960px;
position: relative;
margin: 0 auto;
}

Now I'm thinking of drawing at least 1140px. But then the size of the column will increase and, most likely, the padding. Or will it not matter?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
O
Oneng Lar, 2016-02-25
@Ingword

3. Yes, that's right.
4. 5. for the tablet you need the prefix col-md-
Immediately in the div write: class="col-md-4 col-lg-3" and so
on already .col-sm-
6. Nothing at all, just specify the maximum allowable width for the container class and that's it
PS: Everything goes from smaller to larger.
If you need the same column proportions on both desktop and tablet,
put only col-md-6 on desktop, it will be "inherited" for all higher resolutions...

N
Nikita, 2016-02-17
@dbmb

Read the documentation, if you have two columns for a tablet, like you need to specify col-xs-6 along with col-md-6, then the tablet will have two columns =)

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question