1.整体架构
BootStrap框架公共六个部分:(css组件和js插件是其表现形式,其余的是基础支撑平台)
表现形式CSS组件
JS插件
基础支撑平台CSS12栅格系统
基础布局组件
jQuery
响应式设计
1.1 CSS12栅格系统
12栅格系统是BootStrap的核心功能,也是响应式设计核心理念的一个实现方式。
1.1.1 实现原理
栅格布局原理:定义容器大小,平分12分,在调整内外边距,最后结合媒体查询,制作出强大响应式的栅格系统。
1.最外层的边框,伴随着响应式思想,区分了四种类型浏览器,像素分界点768px、992px、1200px
2.第二层的边框,即.container样式容器,针对四种浏览器宽度不一样,值是自动、750px、970px、1170px
//源码
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
3.1号横条,左内边距和右内边距是15px,是12个col-lg-1,没有row,则会
//源码
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
Bootstrap 101 Template