一,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-width: 1200px){
.container {
width: 1170px;
}}
@media (min-width: 992px){
.container {
width: 970px;
}}
@media (min-width: 768px){
.container {
width: 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切换,列表组,下拉菜单,固定顶部,轮播图
