Popular Posts

Thursday, October 13, 2016

Bootstrap - Notes

********************
Bootstrap
********************

- setting up of the viewport is required for the responsive
*** Mostly Fluid Pattern ***
- container-fluid is to fill the whole page rather than the margins
- move the columns in different view ports
*** Layout Shifter Pattern ***
> Desing the page based on mobile
> push the columns and pull the columns on different sizes
  col-sm-push-2 and then col-sm-pull-8
> Push and pull are related to left side of the browser
*** Layout Drop Pattern ***
- Visible-mid and hide-mid to hide and show columns based on different ports
*** Content Reflow Pattern ***
> Using media query to move the text around the image and make the <a> tag block
iamge-list a{
display: block;
}

iamge-list img{
display: inline;
}

- Same size columns in a three layout columns
> minimit.com that has the article on how to do it - basically change the display to table!!!

> img-responsive to make image responsive

No comments:

Post a Comment