云社区 博客 博客详情
云社区 博客 博客详情

【技术分享】Bootstrap之CSS篇(2)

Zhoubo 发表于 2020-09-06 17:54:31 09-06 17:54
Zhoubo 发表于 2020-09-06 17:54:31 2020/09/06
1
1

【摘要】 本篇主要介绍Bootstrap的栅格系统的使用,关键是这个Bootstrap中文手册翻译得实在是..... 阅读起来真得很生涩,很生,很生......希望我能总结得更直白吧。

本篇我们来学习Bootstrap在CSS布局中“网格系统”的使用。

本篇主要介绍Bootstrap的网格系统的使用,早期被称栅格系统不知何时修改了,名词什么的无所谓,关键是这个Bootstrap中文手册翻译得实在是..... 阅读起来真得很生涩,很生,很生......希望我能总结得更直白吧。


网格系统的介绍

  • Bootstrap提供的网格系统,可以根据设备屏幕尺寸来控制网页的显示内容。

  • 网格系统每1行最多划分为12列。

  • “移动设备优先”,Bootstrap的基础CSS样式默认从小屏幕移动设备开始,然后扩展到大屏幕设备,所以也要求我们在布局时要使用媒体查询来设计平板电脑、台式电脑的展示效果。

  • 随着屏幕大小的增加而添加元素,但系统最多最行只支持12列。

1 1 1 1 1 1 1 1 1 1 1 1
4 4 4
4 8
6 6
12(屏幕最小)


看图总结:

  • 网格系统将列每一行分为12列 (上图第一行中),最小设备屏幕1行1列就占满12列,设备屏幕越大每行中显示的列数越多,但每一行总列数不能超过12

  • 表格中那些 4-4-4/4-8/6-6 这些只是网格分配列数的参照

  • 4-4-4这种列数分配,相当三个div各占屏幕列数 33%,33%,33%

  • 4-8 这种列数分配,相当两个div各占屏幕列数 30%,70%

  • 每行中占列数的和要等于12(4+4+4=12,4+8=12,6+6=12),其实也没要求一定是要占满12

网格参数对照表


  • 上图是网格系统参数选用的对照表,我们布局时可参考使用,有以下几个重点内容需要了解:

    • .col-xs- 适配超小设备手机屏幕中的显示

    • .col-sm- 适配小型设备平板电脑中的显示

    • .col-md- 适配中型设备台式电脑中的显示

    • .col-lg- 适配大型设备台式电脑中的显示

以上这段内容请仔细阅读,细细品,一定要理解,在以后的布局时我们经常会使用到这个“网格系统”。


网格系统的使用

  • 使用网格系统,需要定义一个容器,所有包含内容的行和列都必须放在这个容器内,只有在这个容器内行和列才可以获得最佳的对齐和内边距的效果。

  • 在Bootstrap的布局中

    • 需要创建一个容器(.container)来存放我们包含内容的行和列。

    • Bootstrap使用行(.row)做为布局的起始定位,行必须放置在.container内,这样才能保证行在容器内对齐和内边距能适应不同屏幕尺寸的设备。

    • 在Bootstrap中应将页面内容放在列(col)中,允许一行里存在一个或多个列,不可超过12列,但不允许在列中包含行。

    • 列与列之间使用padding来设置间距,假如有多个列,当前列的外边距(margin)为负值则行偏移(换行)。什么叫行偏移简单来说 一行只可以有12列,超过了就会被挤到下一行这就叫行偏移。

重点:在Bootstrap中通常使用row来定位,col来显示内容元素,所以我们在规划时要先考虑row列的设计


常规布局

  • 通过一个实例代码展示一下Bootstrap的魅力,下面是我设计的一个布局样式,我希望他能在移动、平板、PC这三端都能保持基本相同的布局效果。

代码部份


    <style>
        .container div{
            border:2px solid blue;
            height:100px;
            color:white;
            background-color: red;
            line-height: 100px;
            text-align: center;
        }
        .container .row {
            margin-top:10px;
        }
    </style>
    <div class="container">
        <div class="row">
            <div class="col-xs-4">col-xs-4</div>
            <div class="col-xs-8">col-xs-8</div>
        </div>
        <div class="row">
            <div class="col-xs-8">col-xs-8</div>
            <div class="col-xs-4">col-xs-4</div>
        </div>
        <div class="row">
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">col-xs-4</div>
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">col-xs-4</div>
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">col-xs-4</div>
        </div>
    </div></body>

从代码部分可以看出,我们对超小设备(.col-xs-)屏幕进了适配,如果我们只是要求一致性布局的展示效果,对于平板和PC电脑的样式Bootstrap自动的为我们匹配了,你也可以如我最后一个row代码一样同时加上对sm、md、lg的适配,效果都是一样的。
重点:适配.col-xs-我们也可以理解为即使在最小的移动端屏幕中Bootstrap也会我们要求规则来显示内容。像某些移动端小屏幕无法展示的建议只适配sm、md、lg这样在xs这种移动小屏幕中这些较大屏幕才很好展示的内容会被收缩起来,而不会影响我们移动端重要内容的展示

非常规布局

  • 下面这个布局,就是早期困扰我很久的一知识点,我们都知道Bootstrap的特点,适配屏幕尽可能的确保重要内容在移动、平板、PC终端中的正确显示,从而来实现多端一致性布局,但有很多的网站PC端访问展示的是一种布局设计,移动端访问的时候布局效果却不同,有的更改头换面了。当然这里只是简单介绍改变展示排列的,因为改头换面那种还需要我们掌握Bootstrap辅助类配合使用才能达到。

  • 从图中可看到我们显示了第1行和第3行,第2行通过hidden-xs在移动端设备中进行了隐藏

  • 同时我们对第1行也做了跨行的操作,当设备适配md时,第1行1列和1行2列经过设置已占满屏幕12个列,第1行3列将换行显示,1行3列我们设置它占满屏幕12个列,md适配的正好是PC设备,所以我这个布局在移动端、平板端、移动端都有不同的显示。

  • 第1行的3个列中只适配了col-xs和col-md,Bootstrap默认以最小设备适配所以未定义col-sm将以xs效果来展示。


<body>
    <style>
        .container .row div{
            background-color: red;
            height:100px;
            line-height: 100px;
            text-align: center;
            border:1px solid black;
            margin-top: 2px;
        }
    </style>
    <div class="container">
        <div class="row">
            <div class="col-xs-4 col-md-4">1行1列 col-xs-4 col-md-4</div>
            <div class="col-xs-4 col-md-8">1行2列 col-xs-4 col-md-8</div>
            <div class="col-xs-4 col-md-12">1行3列 col-xs-4 col-md-12</div>
        </div>
        <div class="row">
            <div class="hidden-xs col-sm-4">2行1列 hidden-xs col-sm-4</div>
            <div class="hidden-xs col-sm-4">2行2列 hidden-xs col-sm-4</div>
            <div class="hidden-xs col-sm-4">2行3列 hidden-xs col-sm-4</div>
        </div>
        <div class="row">
            <div class="col-xs-4">3行1列 col-xs-4</div>
            <div class="col-xs-4">3行2列 col-xs-4</div>
            <div class="col-xs-4">3行3列 col-xs-4</div>
        </div>
    </div></body>

列重置


<div class="container">
  <div class="row">
      <div class="col-sm-3 col-xs-6">col1 所有的col属于左浮动,内容增多col3被挤到col2下了</div>
      <div class="col-sm-3 col-xs-6">col2</div>
      <div class="clearfix visible-xs"><!----></div>
      <div class="col-sm-3 col-xs-6">col3</div>
      <div class="col-sm-3 col-xs-6">col4</div>
  </div></div>

列遍移

  • col-md-offset- 列偏移,取值范围从1~11,可以通过它实现列居中效果

  • col-md-offset 列偏移也会占当前行网格的列数

  • col-xs-类不支持偏移,只可以通过空单元格来实现该效果

我们通过列偏移让一个DIV局中


<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-offset-3">这是一个局中的DIV(col+offset共占了9个格)</div>
        <div class="col-xs-4">我是小尾巴(占4个格,超过12所以我换行了)</div>    
    </div></div>

㠌套列

  • 我们在内容列中可以再嵌套网格,但这个被嵌套网格在列数不能超过12(也没要求一定要占满12列)


<div class="container">
    <div class="row">
        <div class="col-sm-4">我是左侧</div>
        <div class="col-sm-8">
            <div class="row">
                <div class="col-sm-6">我是右侧1,占6列</div>
                <div class="col-sm-4">我是右侧2,只占4列,也没要求必须占满12列</div>

            </div>
            <div class="row">
                <div class="col-sm-6">我是右侧3,我占6列</div>
                <div class="col-sm-6">我是右侧4,我占6列</div>
            </div>
        </div>
    </div></div>

列排序

  • col-md-push-col-md-pull-取值范围为1~11,通过这两个类可以互换两列的顺序


    <div class="container">
        <div class="row">
            <p>列排序前</p>
            <div class="col-md-4">我在左</div>
            <div class="col-md-8">我在右</div>
        </div>		
        <br>		
        <div class="row">
            <p>列排序后</p>
            <div class="col-md-4 col-md-push-8">我在左</div>
            <div class="col-md-8 col-md-pull-4">我在右</div>
        </div>
    </div>

终于写完这篇,通过总结搞明白了Bootstrap网格系统的工作原理,非常有收获得,以前总是吃不透这个网格的使用,现在掌握后对整个响应式布局有了一个更全面的认识。希望本篇对大家能有帮助。

Bootstrap相关资源文件,已上传至我的Gitee项目 https://gitee.com/net_master/Ajax_Node/tree/master/Bootstrap

书山有路勤为径,学海无涯苦作舟!!!


登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 1
点赞
分享文章到微博
分享文章到朋友圈

评论 (1)


你快抱抱我啦

1楼2020-09-07 16:40:45
可以的,很厉害
0/1000
评论

登录后可评论,请 登录注册

评论

您还没有写博客的权限!

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

删除操作无法恢复,请谨慎操作。

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

登录超时或用户已下线,请重新登录!!!

确定
取消