Bootstrap 3.3.7 Grid System

BootStrap Grid System

When designing a web site, first, choose the general layout of your pages, that is to say the number of rows and columns, then choose the type of web design, static (or fixed), fluid (or liquid), adaptive or responsive.

With Bootstrap you can do fixed, fluid or responsive layout. (Responsive layout mixes fluid and adaptive layouts).

Fixed layout


A fixed page layout or fixed width layout (sometimes called a “static” layout) uses a preset page size and does not change based on the browser width. In other words, the page layout might have a permanent width of 960 pixels no matter what. This is how web pages were traditionally built for many years until modern influences like media queries and responsive design were introduced around the start of the 2010s.
source: treehouse

Fluid layout


A fluid page layout (sometimes called “liquid”) uses relative units instead of fixed units. Typically a liquid layout will use percentages instead of pixels, but any relative unit of measurement will work, such as ems. A liquid layout often will fill the width of the page, no matter what the width of the browser might be. Liquid layouts don’t require as much thought as a responsive design, but there are some major drawbacks at very large or very small browser widths. If the browser is very wide, some content might be stretched too far. On large screens, a single paragraph might run across the page on a single line. Conversely, a multi-column layout on a small screen could be too crowded for the content.
source: treehouse

Adaptive page layout


An adaptive page layout uses CSS media queries to detect the width of the browser and alter the layout accordingly. Adaptive layouts will use fixed unit like pixels, just like a static layout, but the difference is that there are essentially multiple fixed widths defined by specific media queries.
source: treehouse

Responsive page layout


A responsive page layout uses both relative units and media queries, ostensibly combining the ideas of a liquid layout and an adaptive layout. As the browser increases or decreases in width, a responsive layout will flex just like a liquid layout. However, if the browser goes beyond certain widths defined by media query breakpoints, then the layout will change more dramatically to accommodate a wide or narrow width.
source: treehouse

Examples

Fixed layout

fixed

Like blog template for destop and tablet. The content can be narrowed but will remain fixed at a certain time
source: tutorial republic

Fluid layout

fluid

The content will fill the width of the page, no matter what the width of the browser might be.
source: tutorial republic

Responsive layout

responsive

When narrowing the page, the number of columns by rows change, the size of the columns adapts to fill the container.
source: tutorial republic

1 col for all devices

fluid

Bootstrap one column grid layout for all devices
source: tutorial republic

2 cols for all devices

fluid

Bootstrap two column grid layouts for all devices.
When narrowing the page, the width of the columns decrease and the columns stay on the same row. You'll get 2 columns on desktop, tablets and phones
source: tutorial republic

2 columns for tablets and desktops

responsive

Bootstrap two column grid layouts for tablets and desktops.
When narrowing the page, the left column goes under the right one leading to one single column and the width of the column increase. You'll get two columns on desktop and tablets, but only one column on phones.
source: tutorial republic

2 columns for tablets in landscape and desktops

responsive

Bootstrap two column grid layouts for tablets and desktops.
You'll get two columns on desktop and tablets in landscpae, but only one column on tablets in portrait and phones.
source: tutorial republic

4 columns with multiple views

responsive

four column convertible grid layout with multiple views - 4 columns on desktops, 2 columns on tablets, one column on mobiles
source: tutorial republic

Nested columns

fluid

All the blocks are narrowed when narrowinf the page, and the global structure remains unchangedtutorial republic

Aucun commentaire:

Enregistrer un commentaire