就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。
设备划分 | 尺寸区间 |
---|---|
超小屏幕(手机) | <768px |
小屏设备(平板) | >=768px ~ <992px |
中等屏幕(桌面显示器) | >=992x ~ <1200px |
宽屏设备(大桌面显示器) | >=1200px |
但是我们也可以根据实际情况自己定义划分
Bootstrap来自Twitter(推特),是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT的,它简介灵活,使得Web开发更加快捷。
框架:顾名思义就是一套框架,它有一套完整的网页功能解决方案。而且控制权在框架本身,有预制样式库,组件和插件。使用者要按照框架所规定的某种规范进行开发。
在现阶段我们还没有接触JS相关课程,所以我们只考虑使用它的样式库
控制权在框架本身,使用者要按照框架所规定的某种规范进行开发。
Bootstrap使用四部曲:
bootstrap需要为页面内容和栅格系统包裹一个.container容器,Bootstrap预先定义好了这个类,叫.container它提供了两个作此用处的类。
栅格系统英文为“gridsystems”,也有人翻译为“网格系统”,它是指将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局。
Bootstrap提供了一套响应式,移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多十二列
Bootstrap里面container宽度是固定的,但是不同屏幕下,container的宽度不同,我们再把containei划分为12等份
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。
超小屏幕(手机)<768px | 小屏设备(平板)>=768px | 中等屏幕(桌面显示器)>=992px | 宽屏设备(大桌面显示器)>=1200px | |
---|---|---|---|---|
.container最大宽度 | 自动(100%) | 750px | 970px | 1170px |
类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列数 |
栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的.row元素和一系列.col-sm-元素到已经存在的.col-sm-元素内。
我们嵌套最好加1个行row这样可以取消父元素的padding值 而且高度自动和父级一样高。
//列嵌套
<div class="col-sm-4">
<div class="row">
<div class="col-sm-6">小列</div>
<div class="col-sm-6">小列</div>
</div>
</div>
使用.col-md-offset-类可以将列向右侧偏移。这些实际是通过选择器为当前元素增加了左侧边距(margin)
//列偏移
<div class="row">
<div class="col-md-4">左侧</div>
<div class="col-sm-4 col-md-offset-4">右侧</div>
</div>
如何能够将左侧盒子与右侧盒子交换位置?
通过使用.col-md-push(推)-和.col-md-pull(拉)-类就可以很容易的改变列(column)的顺序
<div class="row">
<div class="col-md-4 col-md-push-8">左侧</div>
<div class="col-md-8 col-md-pull-4">右侧</div>
</div>
为了加快对移动设备友好的页面开发工作,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
类名 | 超小屏 | 小屏 | 中屏 | 大屏 |
---|---|---|---|---|
.hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
.hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
.hidden-md | 可见 | 可见 | 隐藏 | 可见 |
.hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
与之相反的是,visible-xs visible-sm visible-md visible-lg 是显示某个页面内容