bootstrap 中自带的坑
很多同学在写响应式网站的时候,第一反应都会使用一个框架,叫做 bootstrap,但是在使用的过程中,我们偶尔会遇到一些坑:
例如:
列(col)上面总是有 padding,导致一个写不好,内容就超出了
标签经过的时候自带下划线
在使用这些 bootstrap 定义 class 的时候,经常遇到这种情况,这些情况的产生就是因为 bootstrap 中定义了大量的样式,这些样式不管你用得到用不到,都会在框架内,某些时候我们只需要其中的某一部分,例如:”栅格”,这时候,我们就必须知道栅格中存在一些什么样式?分别又有哪些功能?
栅格系统功能分析
- 媒询
- 布局容器
- 行
- 列
- 列偏移
- 列排序
媒询(@media)
作用:在对应的媒体设备和媒体特征下,显示对应样式。
<style>
@media{
// 符合媒体设备和媒体特征下,显示的样式
}
</style>
媒询设备
作用:限定样式在某种设备下才能显示
属性:
- all 所有 (前端常用)
- screen 彩屏设备(前端常用)
- print 打印机和打印预览
- speech 用于屏幕阅读器等发声设备
媒询特征
作用:对于设备做更多的限制,尺寸方面使用较多
属性:
- min-width(前端常用)
- max-width(前端常用)
- min-height
- max-height
….
媒询中的关键词
作用:用于指定某个特性或连接设备和特征
- only 只有(只有某个设备下或只有某个尺寸下)
- and 用于连接媒询设备和媒询特征
- not 不包含(排除某个设备或某个尺寸)
使用方法
only 关键词
<style>
@media only screen{
//只有当前访问的设备是彩屏设备时,才解析里面的样式
}
</style>
and关键词
<style>
@media screen and (min-width:768px){
//只有当前访问的设备是彩屏设备时,并且当前屏幕宽度大于等于768,才解析里面的样式
}
</style>
not 关键词
<style>
@media not screen{
//只有当前访问的设备不是彩屏设备时,才解析里面的样式
}
</style>
注意事项
样式的解析,在样式表中也是有顺序的,同一个属性在同一个样式下是会被替换的
<style>
.box{
background:red;
width:100px;
height:100px;
}
.box{
background:green;
}
//最后这个盒子的背景色是绿色
</style>
<style>
@media screen{
.box{
background:red;
width:100px;
height:100px;
}
}
.box{
background:green;
}
//媒询并不会提高样式的优先级,所以还是绿色,所以写的时候我们要注意把最后想显示的样式,写在下面
</style>
正确写法如下
<style>
.box{
background:green;
width:100px;
height:100px;
}
@media screen{
.box{
background:red;
}
}
//这样才能符合媒询要求后,替换掉上面的样式,最终显示红色
</style>
bootstrap 中的媒询划分
- 超小屏 xs(适用手机),没有写在媒询内
- 小屏 sm(适用平板),媒询范围 - 最小 768px
- 中等屏幕 md(适用桌面显示器),媒询范围 - 最小 992px
- 大屏幕 lg(适用大桌面显示器),媒询范围 - 最小 1200px
后面我们都用 xs、sm、md、lg 代指
代码如下
<style>
.box{
background:red;
width:100px;
height:100px;
}
@media screen and (min-width:768px){
.box{
background:green;
}
}
@media screen and (min-width:992px){
.box{
background:blue;
}
}
@media screen and (min-width:1200px){
.box{
background:gray;
}
}
</style>
布局容器
作用:放置行和列,并且在固定宽度的时候,使内容永远居中在可视区
固定宽度布局容器
<style>
.container{
//如果加给内嵌或者内嵌块
display:block;
//使当前元素居中显示
margin:0 auto;
}
@media screen and (min-width:768px){
.container{
width:750px;
padding:0 9px;
}
}
@media screen and (min-width:992px){
.container{
width:970px;
padding:0 11px;
}
}
@media screen and (min-width:1200px){
.container{
width:1170px;
padding:0 15px;
}
}
</style>
流体布局
<style>
.container-fluid{
//如果加给内嵌或者内嵌块
display:block;
//使当前元素居中显示
}
@media screen and (min-width:768px){
.container-fluid{
padding:0 9px;
}
}
@media screen and (min-width:992px){
.container-fluid{
padding:0 11px;
}
}
@media screen and (min-width:1200px){
.container-fluid{
padding:0 15px;
}
}
</style>
列
在这里我们先来说列,因为列是不需要放在行里面,也可以出现的,那为什么一定要行呢?这就要看我们的列做了什么。
bootstrap 中将整个页面划分12个格子,宽度除了可以接受 px 这种单位,还可以接受 %
,也就是说一个格子就是 100/12
<style>
.col-xs-1{
width:8.3%;
}
.col-xs-2{
width:8.3% * 2;
}
.col-xs-3{
width:8.3% * 3;
}
</style>
以上代码,我们可以看到首先写起来麻烦,要写 12 个,其次 xs、sm、md、lg 四个屏幕,需要四套,宽度的百分比计算有无限循环,所以我们使用less
以下是 less 代码
//只考虑一个屏幕的
.col-xs(@index) when(@index>0){
.col-xs(@index - 1);
.col-xs-@{index}{
width:100% / 12 * @index;
}
}
.col-xs(12);
//这里的@index代表的是分成几个格子
扩展版本,处理多屏幕,不同格子的情况
.col(@index,@s,@num) when(@index>0){
.col(@index - 1,@s,@num);
.col-@{s}-@{index}{
width:100% / @num * @index;
}
}
.col-xs(12,xs,12);
//@index - 代表分多少个格子
//@s - 代表当前屏幕
//@num - 格子总数,用于计算一个格子应该是多大,因为@index是会变的,所以不能直接用
为了使加了的元素能接受宽高,并且排列在一行,所以每一个都加上 float:left
最终版本
.col(@index,@s,@num) when(@index>0){
.col(@index - 1,@s,@num);
.col-@{s}-@{index}{
width:100% / @num * @index;
float:left;
}
}
行
在列的实现中我们使用了 float:left,所以脱离了文档流,无法撑开父级的高度,这时候我们要清除浮动,并且在父级布局容器中,有 padding 值,很碍事
用处一:清除浮动
<style>
.row:after{
content:'';
display:block;
clear:both;
}
</style>
- clear 只对它前面的元素有效,所以用 after 伪类
- 因为是伪类必须加 content
- 只有加给块元素,才能达到清除浮动的效果,所以 display:block
- both 可以同时清除right和left方向的
用处二:清除布局容器的 padding
<style>
.row{
//考虑万一加给内嵌或内嵌块
display:block;
}
@media screen and (min-width:768px){
.row{
//sm屏幕下的布局容器padding是9
margin-left:-9px;
margin-right:-9px;
}
}
@media screen and (min-width:992px){
.row{
//md屏幕下的布局容器padding是11
margin-left:-11px;
margin-right:-11px;
}
}
@media screen and (min-width:1200px){
.row{
//lg屏幕下的布局容器padding是15
margin-left:-15px;
margin-right:-15px;
}
}
</style>
列偏移
在使用列偏移的时候,该元素会从左向右进行移动,并且该元素后面的元素,也会往后移动,根据这个特性,我们推断是用 margin-left 实现
.col-xs-offset-1{
//这里的margin-left其实就是格子的宽度
margin-left:100% / 12 * 1;
}
那么在这里我们同样要准备四套,并且,格子数可能不一样,所以依旧采用less
利用less的列偏移
.col(@index,@s,@num) when(@index>0){
.col(@index - 1,@s,@num);
.col-@{s}-@{index}{
width:100% / @num * @index;
float:left;
}
//列偏移代码
.col-@{s}-offset-@{index}{
margin-left:100% / @num * @index;
}
}
列排序
控制两个(或多个)元素之间调换位置。
可以改变元素位置的属性:
- position
- relative
- absolute
- fixed
- margin
- padding
在这里我们常用的改变元素位置的属性有这些,我们来每个分析一下
relative
该属性在使用过程中,不脱离文档流,定位基于自己本身
absolute
该属性在使用过程中,脱离文档流,定位根据定位父级(具有 relative、absolute、fixed 的父级或祖父级,即可作为定位父级)或文档进行定位
fixed
该属性在使用过程中,脱离文档流,定位根据可视区进行定位
margin
外填充,可以在两个元素之间产生间距,会影响它后面的元素改变位置
padding
内填充,可以在元素边框以内的区域产生间距
综合以上分析出来的特性,我们改变元素位置的时候,首先不能脱离文档流,其次不能影响其他元素,并且作用是改变元素的位置,所以我们最后排除法,剩下的只有relative这条属性
<style>
.col-xs-push-1{
//把一个元素向后推,1也就是一个格子的距离
position:relative;
left:100% / 12 * 1;
}
.col-xs-pull-1{
//把一个元素向前拉,1也就是一个格子的距离
position:relative;
left:-100% / 12 * 1;//给一个负的值
}
</style>
less 版本
.col(@index,@s,@num) when(@index>0){
.col(@index - 1,@s,@num);
.col-@{s}-@{index}{
width:100% / @num * @index;
float:left;
}
//列偏移代码
.col-@{s}-offset-@{index}{
margin-left:100% / @num * @index;
}
//列排序-向后推
.col-@{s}-push-@{index}{
left:100% / @num * @index;
}
//列排序-向前拉
.col-@{s}-pull-@{index}{
left:-100% / @num * @index;
}
}
以上就是我们今天要说的栅格系统的全部功能了,希望本篇文章对大家了解 boostrap 的时候有所帮助~
文字看得不过瘾?想看视频?到这里来观看吧:
视频地址:https://study.miaov.com/v_show/2925
课程咨询:
• 咨询QQ:2852509866、2852509867、2852509868
• 微信:miaov-class
• 电话:010-57269690
