Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。
响应式布局
概念:对不同屏幕尺寸做出响应,并进行相应布局
原理:使用媒体查询设置不同的断点,进行不同css布局响应
优点:一个网站可以兼容多种终端,不需要重复开发
缺点:工作量大、代码累赘、加载时间长、效率低、冗余代码较多
适用场景:结构比较简单,展示型网站
不适用场景:交互较多,功能性的网站不适用
定义:就是使用媒体查询针对不同宽度的设备进行布局和样式设置,从而适配不同设备的目的。
设备划分 | 尺寸区间 |
---|---|
超小屏幕 | <768px |
小屏设备(手机) | >=768px~<992px |
中等屏幕(平板) | >=992px~<1200px |
宽屏设备 | >=1200px |
栅格系统:栅格是响应式布局的一种实现方式,将页面栅格化,一般将水平划分为12列,根据媒体查询监听缩放,决定元素占用几列:
container提供容器
row是为了清除浮动,至于为什么要清楚浮动和怎样清楚浮动,可以参考这里:链接
实现方式:
利用float:left属性,控制子元素的浮动、挤压、排列。
利用flex布局,实现主轴wrap挤压换行排列
//示例调用代码
<div class="container">
<div class="row">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
<div class="col-1">4</div>
<div class="col-1">5</div>
<div class="col-1">6</div>
<div class="col-1">7</div>
<div class="col-1">8</div>
<div class="col-1">9</div>
<div class="col-1">10</div>
<div class="col-1">11</div>
<div class="col-1">12</div>
</div>
</div>
五个断点的class属性,代表不同屏幕下的适配方式:
col-:xs(超小屏): < 576px
col-sm-: sm(小屏幕): 576px(含) - 768px
col-md-: md(中屏幕): 768px(含) - 992px
col-lg-: lg(大屏幕): 992px(含) - 1200px
col-xl-: xl(超大屏幕): > 1200px(含)
col-1:就代表超小屏幕下占据1列
col-2:就代表超小屏幕下占据2列
col-12:就代表这个元素在超小品谷下占据一整行
col-sm-1:就代表小屏幕下占据1列
col-sm-2:就代表小屏幕下占据2列
就近原则:如果屏幕是在xl中,就会先找自己自己对应的col-xl-样式,如果没有,就往下接着查找col-lg-样式,直到找到为止。
其他属性:
col-md-offset-4: 中等屏幕偏移4列
col-md-push-4:中等屏幕向右偏移4列
col-md-pull-4:中等个屏幕向左偏移4列
d-xs-none d-md-block:xs不显示,md显示
栅格系统CSS部分实现代码:
.container {
width: 100%;
margin: 0 auto;
}
/* 写的时候从小到大写,样式优先级问题,如果满足md,就会覆盖sm */
.container {
width: 100%;
margin: 0 auto;
}
/* 写的时候从小到大写,样式优先级问题,如果满足md,就会覆盖sm */
/* sm */
@media (min-width: 576px){
.container{
width: 540px;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12{
float: left;
}
.col-1{
width: 8.333333%;
}
.col-2{
width: 16.666666%;
}
.col-3{
width: 25%;
}
.col-4{
width: 33.333333%;
}
.col-5{
width: 41.666666%;
}
.col-6{
width: 50%;
}
.col-7{
width: 58.333333%;
}
.col-8{
width: 66.666666%;
}
.col-9{
width: 75%;
}
.col-10{
width: 83.333333%;
}
.col-11{
width: 91.666666%;
}
.col-12{
width: 100%;
}
}
/* md */
@media (min-width: 768px){
.container{
width: 720px;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12{
float: left;
}
.col-md-1{
width: 8.333333%;
}
.col-md-2{
width: 16.666666%;
}
.col-md-3{
width: 25%;
}
.col-md-4{
width: 33.333333%;
}
.col-md-5{
width: 41.666666%;
}
.col-md-6{
width: 50%;
}
.col-md-7{
width: 58.333333%;
}
.col-md-8{
width: 66.666666%;
}
.col-md-9{
width: 75%;
}
.col-md-10{
width: 83.333333%;
}
.col-md-11{
width: 91.666666%;
}
.col-md-12{
width: 100%;
}
}
/* lg */
@media (min-width: 992px){
.container{
width: 960px;
}
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12{
float: left;
}
.col-lg-1{
width: 8.333333%;
}
.col-lg-2{
width: 16.666666%;
}
.col-lg-3{
width: 25%;
}
.col-lg-4{
width: 33.333333%;
}
.col-lg-5{
width: 41.666666%;
}
.col-lg-6{
width: 50%;
}
.col-lg-7{
width: 58.333333%;
}
.col-lg-8{
width: 66.666666%;
}
.col-lg-9{
width: 75%;
}
.col-lg-10{
width: 83.333333%;
}
.col-lg-11{
width: 91.666666%;
}
.col-lg-12{
width: 100%;
}
}
/* xl */
@media (min-width: 1200px){
.container{
width: 1140px;
}
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12{
float: left;
}
.col-xl-1{
width: 8.333333%;
}
.col-xl-2{
width: 16.666666%;
}
.col-xl-3{
width: 25%;
}
.col-xl-4{
width: 33.333333%;
}
.col-xl-5{
width: 41.666666%;
}
.col-xl-6{
width: 50%;
}
.col-xl-7{
width: 58.333333%;
}
.col-xl-8{
width: 66.666666%;
}
.col-xl-9{
width: 75%;
}
.col-xl-10{
width: 83.333333%;
}
.col-xl-11{
width: 91.666666%;
}
.col-xl-12{
width: 100%;
}
}
.row{
}