Now talking about the containers over here.
These containers, they can be of varied sizes, such as the boxed layout and the full paged
layout.
We may see that this is the fixed width container, where container
is the class name that we are calling in.
Container width will always be fixed to 1170px + 30px gutter space.
That is equivalent to 1200px total, till the media
width is greater than, or equal to 1200px.
Below this definition they will adjust as per screen resolution and instruction
provided.
It is practically a boxed layout.
Now what about this 1170px + 30px gutter space?
We have to know about it.
This is practically the width of the container which is practically lying
at the beneath of every other boxes which is practically width of the container, which
is 1170px.
Now this container is practically leaving a gap of 15px from both
sides.
That means from left and right side, it is practically leaving a gap of 15px each.
That means a total of 15 + 15 equals to 30px gap will be left from both
side.
So, the width of the container in case of larger preview, the width of the container
in this case will be 1170px and it is leaving or total gap of 30px from
either ends, from left side and from right side.
And that is why it will be at a total width of 1200px.
So, in case of larger preview, we have restricted ourselves
for a larger preview, for devices with width greater than or equals to 1200px.
And another thing, if you get onto this image, you may see that here's the gap between each
contents, between each boxes.
This is another thing that we have to consider.
That means this red box, it is leaving a space of 15px from the right, and this is the green
box which in turn leaving a gap of 15px from the left.
So the total gap in between will be 15 + 15,
equals to 30px. 15px from the right for Red box and 15px from the left for green box,
a total gap of 30px in between these two boxes.
This thing will be followed in each and every cases as we may see.
Here we may practically divide our 12 grids in different structures.
for say, a content, which will be placed inside this red box,
and it will be consuming a total of 4 grids as we can see over here.
The same thing will be followed here, in case of this
green box, the content that will be placed here, will be consuming up up to 4 grids here,
and in this case of this extreme right box which is red in colour, same
thing will be followed over here.
In this context I would like to mention that never exceed this total grid classification.
If you exceed 12 grids then it will consist on a single row, what the
contents will be stacked on each other and the visual appearance will be distorted.
For say, if you are placing here col-lg-7 and if you are placing here col-lg-6,
that means 6 + 7, 13 grids will be consumed but bootstrap front end framework, this practically
divides your display device into 12 grids, as 13 is greater than 12,
that means the second content that you are going to place inside it will be just stacking
down and they will be just one above another.
Now and other thing here that we are going to mention that he is the full width container.
This is practically will be called in as container-fluid and it is a full
page container, that means hundred percent device width will be used over here.
Full paged layout where the contents will distribute itself accordingly, as per
instructed, depending on what column type you are using, i.e., a larger preview column,
or medium, or smaller, whatever it is.
Those contents will fit into the container.
This thing is practically widely used in where full page responsiveness is required.
We will be seeing all of them, we will be seeing it with example, so do not get panicked
with it, we will be soon acquainted with it.
So the primary thing is we are now about to check what will happen if we
call all these class names inside this container, of course inside the row, and we will be observing
it's varying nature, under different device conditions.
Now let's get back to our project and first of all as we have seen we have created this
container, and banner is been introduced with it to see the changes, what
changes is it executing, if you get into custom.css, you may see that, nothing is provided except
this background #ff0000.
That means I have provided some background colors and if found necessary, some Heights
for the time being, but bootstrap never practically allows any height.
So for the time being we are providing a height here, and in index.html, we have called in
the container first, then we have called in the row, then we have called in this col-xs-12
--- what we are doing here we are just changing our...
From mobile device we are changing to the larger preview as we can see here.
For the time being we have to assume that this is the content,
but it is practically coming under typography and glyph icons used in Bootstrap but that
is the scope for a different tutorial, we won't be discussing about it here,
all we are going to do we have practically taken three columns over here, and all of
them are practically 4, with a value 4, that means 4 + 4 equals to 8, and plus 4
equals to 12.
That means this is the instance that we are going to use.
So all we have to do now,we have made this changes here, this is practically the thing
which is going to be included into our project.
Here we can see, here are three boxes inside.
So we are going to press Control + shift + m for a mobile responsive view and we can
see that for a smaller device display, 320 is the width of the display device,
this is the width of the display and we can see that each and every contents, they are
just stacking one over another.
Press control + shift + m to deactivate this view and back to normal preview.
Now we can see that the green box is in the extreme left, the red box is in
the middle and the grey box is aligned in the extreme right.
No Press control + shift + m again and get back to your mobile responsiveness view, yeah
just change this value to 768px.
Press enter.
You may see that still this things are stacking on each other.
They are coming down vertically.
Testing...
Place 992px..here...
Hit enter and you may see that still it is just coming vertically downwards, stacking
on each other.
Checking... 1199px..
Hit enter.
Still they are stacking on each other.
But now, if we place here 1200px, and now hit enter, now you May see, those contents
are just getting horizontal and they are coming horizontally as we can
see here.
So this will be the actual case, up to 1200px, you provide any value here, suppose we are
providing a value of 1920.
Hit enter and you may see that this is the display that it is going to provide
in case of 1920 by 480px display.
Getting back to 320px again...okay...those things are coming back stacked again...one
over each other...
For more infomation >> Volvo V70 2.0D KINETIC - Duration: 0:54. 
For more infomation >> Peugeot 308 SW 1.6 BlueHDi 120 pk AUTOMAAT - Duration: 1:00. 
For more infomation >> J.Fla 2017 ♥ Tuyển Tập Những Bài Hát Hay Nhất Của J.Fla 2017 - Duration: 1:35:12. 
For more infomation >> 夜明け生まれ来る少女 (歌詞付き) - Duration: 4:16. 
No comments:
Post a Comment