使用bootstrap的栅栏实现五列布局

我们知道,在使用Bootstrap栅格的时候,我们可以对网页方便的进行模块分割。Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。

它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。如果要2等分,使用col-md-6即可;要3等分,使用col-md-4即可;但如果我们要5等分或者8等分怎么办呢?下面的示例是bootstrap五等分布局:

图片.png

Bootstrap 网格系统教程:可以学习和参考一下

http://www.runoob.com/bootstrap/bootstrap-grid-system.html

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <!--视口的设置,让网页能等比例的缩放到对应设备中-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!--告诉ie浏览器用最新内核去渲染网页-->
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

        <style type="text/css">
            .col-xs-1-5,
            .col-sm-1-5,
            .col-md-1-5,
            .col-lg-1-5 {
                position: relative;
                min-height: 1px;
                padding-right: 10px;
                padding-left: 10px;
            }
            
            .col-xs-1-5 {
                width: 20%;
                float: left;
            }
            
            @media (min-width: 768px) {
                .col-sm-1-5 {
                    width: 20%;
                    float: left;
                }
            }
            
            @media (min-width: 992px) {
                .col-md-1-5 {
                    width: 20%;
                    float: left;
                }
            }
            
            @media (min-width: 1200px) {
                .col-lg-1-5 {
                    width: 20%;
                    float: left;
                }
            }
        </style>

        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

        <body>

            <div class="container">
                <div class="row">
                    <div class="col-xs-1-5">
                        <div class="items text-center">
                            <img class="img-responsive" src="../img/my.jpg" />

                            <div class="row">
                                <div class="name" id="">姓名:<span>王婷</span></div>
                            </div>

                            <div class="row">
                                <div class="sex" id="">性别:<span>女</span></div>
                            </div>

                            <div class="row">
                                <div class="orgin" id="">部门:<span>宣传部</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-1-5">
                        <div class="items text-center">
                            <img class="img-responsive" src="../img/my.jpg" />

                            <div class="row">
                                <div class="name" id="">姓名:<span>王婷</span></div>
                            </div>

                            <div class="row">
                                <div class="sex" id="">性别:<span>女</span></div>
                            </div>

                            <div class="row">
                                <div class="orgin" id="">部门:<span>宣传部</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-1-5">
                        <div class="items text-center">
                            <img class="img-responsive" src="../img/my.jpg" />

                            <div class="row">
                                <div class="name" id="">姓名:<span>王婷</span></div>
                            </div>

                            <div class="row">
                                <div class="sex" id="">性别:<span>女</span></div>
                            </div>

                            <div class="row">
                                <div class="orgin" id="">部门:<span>宣传部</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-1-5">
                        <div class="items text-center">
                            <img class="img-responsive" src="../img/my.jpg" />

                            <div class="row">
                                <div class="name" id="">姓名:<span>王婷</span></div>
                            </div>

                            <div class="row">
                                <div class="sex" id="">性别:<span>女</span></div>
                            </div>

                            <div class="row">
                                <div class="orgin" id="">部门:<span>宣传部</span></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-1-5">
                        <div class="items text-center">
                            <img class="img-responsive" src="../img/my.jpg" />

                            <div class="row">
                                <div class="name" id="">姓名:<span>王婷</span></div>
                            </div>

                            <div class="row">
                                <div class="sex" id="">性别:<span>女</span></div>
                            </div>

                            <div class="row">
                                <div class="orgin" id="">部门:<span>宣传部</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </body>

</html>

原文作者:祈澈姑娘

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏开源项目

你真的会用 Issue 吗?

大家对 Issue 一定不陌生,它灵活又实用,可以用来做 Bug 跟踪、需求管理、项目管理、交流探讨、写文章…… 不少新用户在后台问我们,如何优雅地使用 Iss...

32250
来自专栏机器之心

学界 | 中科院计算所开源Easy Machine Learning:让机器学习应用开发简单快捷

选自Github 机器之心编译 今日,中科院计算所研究员徐君在微博上宣布「中科院计算所开源了 Easy Machine Learning 系统,其通过交互式图...

35550
来自专栏AI研习社

谷歌发布 TensorFlow 1.5,全面支持动态图机制和 TensorFlow Lite

AI 研习社消息,日前,谷歌发布 TensorFlow 1.5,TensorFlow 又一次迎来更新。 在此前的版本中,TensorFlow 迎来三大重大变化:...

31140
来自专栏章鱼的慢慢技术路

坑爹的奥数——枚举

19860
来自专栏葡萄城控件技术团队

应用系统中常见报表类型解析

根据报表的布局、数据源结构、打印方式和数据分析方式,可将应用系统中的报表分为以下类型: 清单报表 图表报表 分栏报表 分组报表 交叉报表 并排报表 ...

23950
来自专栏编程

基于Python的人脸识别库,离线识别率高达99.38%!

-欢迎 原文该项目是要构建一款免费、开源、实时、离线的网络 app,支持组织者使用人脸识别技术或二维码识别所有受邀人员。有了世界上最简单的人脸识别库,使用 Py...

33580
来自专栏AI科技大本营的专栏

这一次,我拒绝了Python,选择了Go

最近,我用一个以 Go 语言为后端的软件,实现了一个人脸识别项目。它能够识别出上传照片中的人像 (如流行歌手)是谁。这听起来不错,我决定试一下也给你们介绍一下项...

23140
来自专栏应用案例

RIOT 与 ImageOptim - 两款 Win 和 Mac 上好用的免费图片优化无损压缩工具

不管你是网站站长、自媒体、博客作者、摄影师、设计师,还是需要在网上分享传输图片/照片的人,都希望自己上传图片耗时更短、图片体积更小,别人浏览时又能更快下载显示出...

46350
来自专栏腾讯移动品质中心TMQ的专栏

腾讯TMQ在线沙龙|测试与图像识别

测试与图像识别 活动时间:2016年3月16日 QQ群视频交流 活动介绍:TMQ在线沙龙第十七期分享 本次分享的主题是:测试与图像识别 共有43位测试小伙伴报名...

31160
来自专栏机器之心

资源 | 基于Python的开源人脸识别库:离线识别率高达99.38%

选自Github 机器之心编译 参与:路雪 仅用 Python 和命令行就可以实现人脸识别的库开源了。该库使用 dlib 顶尖的深度学习人脸识别技术构建,在户外...

56880

扫码关注云+社区

领取腾讯云代金券