一,bootstrap是个啥 是个框架,可以通过添加对应的类名,来达到它封装好的样式的效果,当然里面不只css样式,常用的样式和功能,里面都有封装. 二,bootstrap最基本的几个类名的使用 (1),container和container-fluid container用作主要内容的外部盒子样式 <div class="container"> padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; </div> @media (min- 1200px){ .container { 1170px; }} @media (min- 992px){ .container { 970px; }} @media (min- 768px){ .container { 750px; }} container-fluid用作全部内容的外部盒子设置 <div class="container-fluid"> padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; </div> (2),col-md-1 ,col-md-offset-1列偏移量 超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px) 栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C .container 最大宽度 None （自动） 750px 970px 1170px 类前缀 .col-xs- .col-sm- .col-md- .col-lg- 超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px) .visible-xs-* 可见 隐藏 隐藏 隐藏 .visible-sm-* 隐藏 可见 隐藏 隐藏 .visible-md-* 隐藏 隐藏 可见 隐藏 .visible-lg-* 隐藏 隐藏 隐藏 可见 .hidden-xs 隐藏 可见 可见 可见 .hidden-sm 可见 隐藏 可见 可见 .hidden-md 可见 可见 隐藏 可见 .hidden-lg 可见 可见 可见 隐藏 三,常用的几个模块样式 导航栏,tab切换,列表组,下拉菜单,固定顶部,轮播图