Bootstrap 学习

Grid notes

• Always 12 columns
• Smaller sizes set the default for larger sizes
  • col-sm- would set the size for small, medium and large screens unless overridden by a setting specific to one of the larger sizes
• There is a 30px "gutter", or empty space, between each column (15px on each side of the column)
• The gutter on the outside of the container varies based on the current screen size
  • Extra small devices always use the entire width of the screen

	Extra small devices e.g. phones (< 768 px)	Small devices e.g. tablets (≥ 768 px)	Medium devices e.g. laptops (≥ 992 px)	Large devices e.g. desktops (≥ 1200 px)
Container width	None (auto)	750px	970px	1170px
Column class prefix	col-xs-	col-sm-	col-md-	col-lg-
Column width	Auto	60px	75px	95px

The screens sizes that Bootstrap uses are not random, but rather based on research on common device sizes. While you can change the screen sizes, because Bootstrap does use CSS, you want to use the defaults provided.