bootstrap 响应式栅格系统解析

bootstrap 中自带的坑

很多同学在写响应式网站的时候,第一反应都会使用一个框架,叫做 bootstrap,但是在使用的过程中,我们偶尔会遇到一些坑:

例如:

列(col)上面总是有 padding,导致一个写不好,内容就超出了

标签经过的时候自带下划线

在使用这些 bootstrap 定义 class 的时候,经常遇到这种情况,这些情况的产生就是因为 bootstrap 中定义了大量的样式,这些样式不管你用得到用不到,都会在框架内,某些时候我们只需要其中的某一部分,例如:”栅格”,这时候,我们就必须知道栅格中存在一些什么样式?分别又有哪些功能?

栅格系统功能分析

  • 媒询
  • 布局容器
  • 列偏移
  • 列排序

媒询(@media

作用:在对应的媒体设备和媒体特征下,显示对应样式。

  1. <style>
  2. @media{
  3. // 符合媒体设备和媒体特征下,显示的样式
  4. }
  5. </style>

媒询设备

作用:限定样式在某种设备下才能显示

属性:

  • all 所有 (前端常用)
  • screen 彩屏设备(前端常用)
  • print 打印机和打印预览
  • speech 用于屏幕阅读器等发声设备

媒询特征

作用:对于设备做更多的限制,尺寸方面使用较多

属性:

  • min-width(前端常用)
  • max-width(前端常用)
  • min-height
  • max-height
    ….

媒询中的关键词

作用:用于指定某个特性或连接设备和特征

  1. - only 只有(只有某个设备下或只有某个尺寸下)
  2. - and 用于连接媒询设备和媒询特征
  3. - not 不包含(排除某个设备或某个尺寸)

使用方法

only 关键词
  1. <style>
  2. @media only screen{
  3. //只有当前访问的设备是彩屏设备时,才解析里面的样式
  4. }
  5. </style>
and关键词
  1. <style>
  2. @media screen and (min-width:768px){
  3. //只有当前访问的设备是彩屏设备时,并且当前屏幕宽度大于等于768,才解析里面的样式
  4. }
  5. </style>
not 关键词
  1. <style>
  2. @media not screen{
  3. //只有当前访问的设备不是彩屏设备时,才解析里面的样式
  4. }
  5. </style>

注意事项

样式的解析,在样式表中也是有顺序的,同一个属性在同一个样式下是会被替换的

  1. <style>
  2. .box{
  3. background:red;
  4. width:100px;
  5. height:100px;
  6. }
  7. .box{
  8. background:green;
  9. }
  10. //最后这个盒子的背景色是绿色
  11. </style>
  1. <style>
  2. @media screen{
  3. .box{
  4. background:red;
  5. width:100px;
  6. height:100px;
  7. }
  8. }
  9. .box{
  10. background:green;
  11. }
  12. //媒询并不会提高样式的优先级,所以还是绿色,所以写的时候我们要注意把最后想显示的样式,写在下面
  13. </style>

正确写法如下

  1. <style>
  2. .box{
  3. background:green;
  4. width:100px;
  5. height:100px;
  6. }
  7. @media screen{
  8. .box{
  9. background:red;
  10. }
  11. }
  12. //这样才能符合媒询要求后,替换掉上面的样式,最终显示红色
  13. </style>

bootstrap 中的媒询划分

  • 超小屏 xs(适用手机),没有写在媒询内
  • 小屏 sm(适用平板),媒询范围 - 最小 768px
  • 中等屏幕 md(适用桌面显示器),媒询范围 - 最小 992px
  • 大屏幕 lg(适用大桌面显示器),媒询范围 - 最小 1200px

后面我们都用 xs、sm、md、lg 代指

代码如下

  1. <style>
  2. .box{
  3. background:red;
  4. width:100px;
  5. height:100px;
  6. }
  7. @media screen and (min-width:768px){
  8. .box{
  9. background:green;
  10. }
  11. }
  12. @media screen and (min-width:992px){
  13. .box{
  14. background:blue;
  15. }
  16. }
  17. @media screen and (min-width:1200px){
  18. .box{
  19. background:gray;
  20. }
  21. }
  22. </style>

布局容器

作用:放置行和列,并且在固定宽度的时候,使内容永远居中在可视区

固定宽度布局容器
  1. <style>
  2. .container{
  3. //如果加给内嵌或者内嵌块
  4. display:block;
  5. //使当前元素居中显示
  6. margin:0 auto;
  7. }
  8. @media screen and (min-width:768px){
  9. .container{
  10. width:750px;
  11. padding:0 9px;
  12. }
  13. }
  14. @media screen and (min-width:992px){
  15. .container{
  16. width:970px;
  17. padding:0 11px;
  18. }
  19. }
  20. @media screen and (min-width:1200px){
  21. .container{
  22. width:1170px;
  23. padding:0 15px;
  24. }
  25. }
  26. </style>
流体布局
  1. <style>
  2. .container-fluid{
  3. //如果加给内嵌或者内嵌块
  4. display:block;
  5. //使当前元素居中显示
  6. }
  7. @media screen and (min-width:768px){
  8. .container-fluid{
  9. padding:0 9px;
  10. }
  11. }
  12. @media screen and (min-width:992px){
  13. .container-fluid{
  14. padding:0 11px;
  15. }
  16. }
  17. @media screen and (min-width:1200px){
  18. .container-fluid{
  19. padding:0 15px;
  20. }
  21. }
  22. </style>

在这里我们先来说列,因为列是不需要放在行里面,也可以出现的,那为什么一定要行呢?这就要看我们的列做了什么。

bootstrap 中将整个页面划分12个格子,宽度除了可以接受 px 这种单位,还可以接受 %
,也就是说一个格子就是 100/12

  1. <style>
  2. .col-xs-1{
  3. width8.3%;
  4. }
  5. .col-xs-2{
  6. width8.3% * 2
  7. }
  8. .col-xs-3{
  9. width8.3% * 3
  10. }
  11. </style>

以上代码,我们可以看到首先写起来麻烦,要写 12 个,其次 xs、sm、md、lg 四个屏幕,需要四套,宽度的百分比计算有无限循环,所以我们使用less

以下是 less 代码

  1. //只考虑一个屏幕的
  2. .col-xs(@index) when(@index>0){
  3. .col-xs(@index - 1);
  4. .col-xs-@{index}{
  5. width:100% / 12 * @index;
  6. }
  7. }
  8. .col-xs(12);
  9. //这里的@index代表的是分成几个格子

扩展版本,处理多屏幕,不同格子的情况

  1. .col(@index@s,@num) when(@index>0){
  2. .col(@index - 1,@s,@num);
  3. .col-@{s}-@{index}{
  4. width:100% / @num * @index;
  5. }
  6. }
  7. .col-xs(12,xs,12);
  8. //@index - 代表分多少个格子
  9. //@s - 代表当前屏幕
  10. //@num - 格子总数,用于计算一个格子应该是多大,因为@index是会变的,所以不能直接用

为了使加了的元素能接受宽高,并且排列在一行,所以每一个都加上 float:left

最终版本

  1. .col(@index@s,@num) when(@index>0){
  2. .col(@index - 1,@s,@num);
  3. .col-@{s}-@{index}{
  4. width:100% / @num * @index;
  5. float:left;
  6. }
  7. }

在列的实现中我们使用了 float:left,所以脱离了文档流,无法撑开父级的高度,这时候我们要清除浮动,并且在父级布局容器中,有 padding 值,很碍事

用处一:清除浮动

  1. <style>
  2. .row:after{
  3. content:'';
  4. display:block;
  5. clear:both;
  6. }
  7. </style>
  • clear 只对它前面的元素有效,所以用 after 伪类
  • 因为是伪类必须加 content
  • 只有加给块元素,才能达到清除浮动的效果,所以 display:block
  • both 可以同时清除right和left方向的

用处二:清除布局容器的 padding

  1. <style>
  2. .row{
  3. //考虑万一加给内嵌或内嵌块
  4. display:block;
  5. }
  6. @media screen and (min-width:768px){
  7. .row{
  8. //sm屏幕下的布局容器padding是9
  9. margin-left:-9px;
  10. margin-right:-9px;
  11. }
  12. }
  13. @media screen and (min-width:992px){
  14. .row{
  15. //md屏幕下的布局容器padding是11
  16. margin-left:-11px;
  17. margin-right:-11px;
  18. }
  19. }
  20. @media screen and (min-width:1200px){
  21. .row{
  22. //lg屏幕下的布局容器padding是15
  23. margin-left:-15px;
  24. margin-right:-15px;
  25. }
  26. }
  27. </style>

列偏移

在使用列偏移的时候,该元素会从左向右进行移动,并且该元素后面的元素,也会往后移动,根据这个特性,我们推断是用 margin-left 实现

  1. .col-xs-offset-1{
  2. //这里的margin-left其实就是格子的宽度
  3. margin-left:100% / 12 * 1;
  4. }

那么在这里我们同样要准备四套,并且,格子数可能不一样,所以依旧采用less
利用less的列偏移

  1. .col(@index@s,@num) when(@index>0){
  2. .col(@index - 1,@s,@num);
  3. .col-@{s}-@{index}{
  4. width:100% / @num * @index;
  5. float:left;
  6. }
  7. //列偏移代码
  8. .col-@{s}-offset-@{index}{
  9. margin-left:100% / @num * @index;
  10. }
  11. }

列排序

控制两个(或多个)元素之间调换位置。

可以改变元素位置的属性:

  • position
    • relative
    • absolute
    • fixed
  • margin
  • padding

在这里我们常用的改变元素位置的属性有这些,我们来每个分析一下

relative

该属性在使用过程中,不脱离文档流,定位基于自己本身

absolute

该属性在使用过程中,脱离文档流,定位根据定位父级(具有 relative、absolute、fixed 的父级或祖父级,即可作为定位父级)或文档进行定位

fixed

该属性在使用过程中,脱离文档流,定位根据可视区进行定位

margin

外填充,可以在两个元素之间产生间距,会影响它后面的元素改变位置

padding

内填充,可以在元素边框以内的区域产生间距

综合以上分析出来的特性,我们改变元素位置的时候,首先不能脱离文档流,其次不能影响其他元素,并且作用是改变元素的位置,所以我们最后排除法,剩下的只有relative这条属性

  1. <style>
  2. .col-xs-push-1{
  3. //把一个元素向后推,1也就是一个格子的距离
  4. position:relative;
  5. left:100% / 12 * 1;
  6. }
  7. .col-xs-pull-1{
  8. //把一个元素向前拉,1也就是一个格子的距离
  9. position:relative;
  10. left:-100% / 12 * 1;//给一个负的值
  11. }
  12. </style>

less 版本

  1. .col(@index@s,@num) when(@index>0){
  2. .col(@index - 1,@s,@num);
  3. .col-@{s}-@{index}{
  4. width:100% / @num * @index;
  5. float:left;
  6. }
  7. //列偏移代码
  8. .col-@{s}-offset-@{index}{
  9. margin-left:100% / @num * @index;
  10. }
  11. //列排序-向后推
  12. .col-@{s}-push-@{index}{
  13. left:100% / @num * @index;
  14. }
  15. //列排序-向前拉
  16. .col-@{s}-pull-@{index}{
  17. left:-100% / @num * @index;
  18. }
  19. }

以上就是我们今天要说的栅格系统的全部功能了,希望本篇文章对大家了解 boostrap 的时候有所帮助~


文字看得不过瘾?想看视频?到这里来观看吧:

视频地址:https://study.miaov.com/v_show/2925


课程咨询:

• 咨询QQ:2852509866、2852509867、2852509868
• 微信:miaov-class
• 电话:010-57269690

妙味网友
请登录后留言,请登录注册
 
 
 
 
 
联系我们

点我咨询QQ客服

010-57269690

在线微信客服
客服1
客服在线时间

工作日:9:30~18:00

周六:10:00~17:00

妙味公众号