20.BootStrp样式

1.BootStrap的12栅格系统

       BootStrap的12栅格系统是其核心功能之一，也是响应式设计核心理念的一个实现方式。该系统将页面布局分为等宽的1到12列，并通过比例计算来定义列宽，通过列数来定义模块化的页面布局方式。它是一个响应式的、移动设备优先的栅格系统，可以随着设备或视口大小的增加而适当地扩展到12列。

2.如何使用12栅格

         在BootStrap中，使用栅格系统非常简单方便。首先，“行(row)”必须包含在.container（固定宽度）或.container-fluid（100% 宽度）中，以便为其赋予合适的排列和内补。然后，通过“行(row)”在水平方向创建一组“列(column)”，内容应当放置于“列(column)”内，并且只有“列(column)”可以作为“行(row)”的直接子元素。Bootstrap提供了预定义的类，如.row和.col-xs-4等，可以用来快速创建栅格布局。

        栅格系统中的列是通过指定1到12的值来表示其跨越的范围。如果一行中包含的列大于12，多余的列所在的元素将被作为一个整体另起一行排列。此外，BootStrap的栅格系统还结合了媒体查询，可以制作出强大响应式的页面布局，使得页面在各种设备上都能有良好的显示效果。

3.学习视频

20.Bootstrap样式