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

最新推荐文章于 2024-03-12 20:16:50 发布
最新推荐文章于 2024-03-12 20:16:50 发布
阅读量9.2k 收藏 4
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36538012/article/details/83218577
版权

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

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

5640239-7a9b788a538f4447.png
图片.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>

原文作者：祈澈姑娘
技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

祈澈菇凉
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
bootstrap的栅栏五列布局
前端视听
05-07 2065
我们知道，在使用Bootstrap栅格的时候，我们可以对网页方便的进行模块分割。Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。 它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。如果要2等分，使用col-md-6即可；要3等分，使用col-md-4即可；但如果我们要5等分或者8等...
bootstrap——bootstrapTable实现隐藏列的示例
08-31
本篇文章主要介绍了bootstrapTable实现隐藏列的示例，具有一定的参考价值，有兴趣的可以了解一下。
Bootstrap实战（第一弹：栅格实现5等分或8等分）
热门推荐
艺术就是爆炸的专栏
02-15 1万+
在使用Bootstrap栅格的时候，我们可以对网页方便的进行模块分割。 要2等分，使用col-md-6即可； 要3等分，使用col-md-4即可； 要4等分，使用col-md-3即可； 要6等分，使用col-md-2即可。 但如果我们要5等分或者8等分怎么办呢？直接使用Bootstrap是不方便进行5等分或者8等分的，但是我们可以参考Bootstrap的栅格写法，来自己写css实现5等分或
基于bootstrap-table 实现 右侧列固定
08-14
基于bootstrap-table 实现 右侧列固定，也可以针对左侧列固定，针对操作列使用起来非常方便，引用jquery、bootstrap-table-fixed 样式和js文件后，可以随意设置，灵活。 fixedColumns: true,//fixedtNumber:2, //设置固定左侧列数目 fixedRightNumber:2, //设置固定右侧列数目 ，绝对比网上随便搜罗的资源靠谱，另外网上很多资源仅仅是介绍，没有 配套的jquery、bootstrap 和ootstrap-table-fixed 版本，网上的版本大部分问题百出，基本不能用。
bootstrap常用的几种布局
最新发布
m0_56565958的博客
03-12 571
五、弹性布局（rem/em布局）：使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，因为em是相对父级元素的原因没有得到推广。三、自适应布局（Adaptive Layout）：自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。2、优点：这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式。
bootstrap-5-columns:Bootstrap 五列布局
06-22
bootstrap-5 列 Bootstrap 五列布局。 这是受此启发。 它利用 Bootstrap 自己的 LESS mixin 函数是最干净、更面向未来的解决方案。 此外，它还为您提供了所有offset 、 pull 、 push类。 快速查看源代码表明，我可以使用./less/bootstrap-5-columns.less内容轻松实现这一./less/bootstrap-5-columns.less 。 ！ 指示 使用凉亭安装： bower install bootstrap-5-columns 导入dist/bootstrap-5-columns.min.css 随意使用课程！ 兼容性 我已经针对 Bootstrap >= 3.2.0 对其进行了测试，但对于早期版本也可能没问题。 如果你发现了，请告诉我！
bootstrap table实现列拖动.rar
07-01
在之前做过的一个web项目中，前端表格是基于jQuery和Bootstrap Table实现的，要求能利用拖动改变列宽。Bootstrap Table可拖动列，需要用到它的Resizable扩展插件需要引入 bootstrap-table扩展插件 bootstrap-table-resizable.js
bootstrap栅格系统五等分
qq_39717567的博客
03-23 440
.col-xs-1-5,.col-sm-1-5,.col-md-1-5,.col-lg-1-5 { min-height: 1px; padding-left: 15px; padding-right: 15px; position: relative; } .col-xs-1-5 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-1-5 { width: 20%; float: l
Ant design vue 对栅格系统进行5等分
Mu_Soul的博客
06-14 1万+
Antd vue 使用的是24栅格系统，可以很轻松的将内容分为4，6，8份，但是，需求不会只局限于这几种分法，5等分，7等分比比皆是，那么怎么让Antd vue的栅格系统可以做到5等分呢。 下面图片为4等分容器（span=“6”）时的截图 下面图片为5等分容器 （span=“5”） 时的截图 看一下Antd vue 是如何将栅格5等分的 打开Antd vue的源码中的 Grid下的index.css，可以看到其实这个css文件是定义了每一个情况栅格所占的大小以及布局的 也就是说，我们只需要对col的样式进
Bootstrap 栅格系统
weixin_47174945的博客
09-23 207
Bootstrap 栅格系统 目录 1、简介 2、栅格选项 3、列偏移 4、嵌套列 5、列排序 1、简介 Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。 2、栅格选项 bootstrap3.x使用了四种栅格选项来形成栅格系统，这四种选项在官网上的介绍如下图，很多人不理解，这里跟大家详解一下四种栅格选项之间的区别，其实区别只有一条就是适
Bootstrap栅栏布局
tsz000727的博客
07-06 6119
Bootstrap栅栏布局 bootstrap栅栏系统css中的col-xs-、col-sm-、col-md-* 、col-lg-*的意义： 小于 768px 的时候，用 col-xs-12 类对应的样式； 在 768px 到 992px 之间的时候，用 col-sm-9 类对应的样式； 在 992px 到 1200px 之间的时候，用 col-md-6 类对应的样式； 大于 1200px 的时候...
bootstrap中把row等分成5份
weixin_42413684的博客
08-03 7895
&lt;!DOCTYPE html&gt; &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt;     &lt;meta charset="utf-8" /&gt; &lt;title&gt;屏幕五等分&lt;/title&gt; &lt;meta na
使用bootstrap实现多选下拉框
04-23
使用bootstrap实现多选下拉框
bootstrap显示5列的方法
sinat_38244712的博客
10-20 1965
在 head  里加载 bootstrap 的 css &lt;link href="http://cdn.staticfile.org/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"&gt; 之后 自己再添加几个 css class &lt;style&gt; .col-lg-2dot4 { position:...
html把屏幕分成2行5列,html – 如何将bootstrap行分成5个相等的部分？
weixin_29763721的博客
06-16 387
解决这个问题的一个好方法是here！默认情况下,Bootstrap不提供允许我们创建五列布局的网格系统,但正如您所看到的那样,它非常简单.首先,您需要以Bootstrap的方式创建默认列定义.我打电话给我的班级col -..- 15..col-xs-15,.col-sm-15,.col-md-15,.col-lg-15 {position: relative;min-height: 1px;pad...
bootstrap如何自定义5列
weixin_30279671的博客
03-16 268
废话少说，先上代码： <!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de...
bootstrap 一排5个_Bootstrap5 列（Columns）
weixin_39560029的博客
12-19 780
对其使用flexbox对齐工具来垂直和水平对齐列。垂直对齐One of three columnsOne of three columnsOne of three columnsOne of three columnsOne of three columnsOne of three columnsOne of three columnsOne of three columnsOne of thre...
boostrap布局( 二）—后台布局实例（左侧菜单激活、右边页面切换）
鲸鱼姐的专栏
06-18 6908
实际项目效果如下： 选中左侧菜单，右边自动变换页面。默认选中Page1页面产品信息。 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 布局实例</title> <link ...
5/9 完成后台部分的简陋界面 bootstrap的垂直分割布局
w_z_y1997的博客
05-09 2776
直接上一张我认为我写的里面最复杂的一个页面好了（虽然非常简单）：（请忽略右下角的网易云音乐）&lt;h1&gt;、&lt;hr&gt;什么的昨天说过了，今天说说新用到的row和span系列如果大家还记得的话，之前的三个表格是一溜竖着排下来的，虽然我的审美非常有限也觉得实在是太丑了而且也不方便用户用，所以去查了一下用bootstrap垂直分割布局的办法:在一个div中，bootstrap会自动的把区...
electron如何使用bootstrap实现响应式布局
03-12
2. 在HTML文件中使用Bootstrap的网格系统来布局页面，可以使用容器、行和列来实现。 3. 使用Bootstrap的CSS类来设置页面元素的样式，如文字、颜色、背景等。 4. 使用Bootstrap的组件来实现页面的功能，如导航栏、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值