bootstrap栅格分5等分

电脑端：设置一个类名，width:20%

手机端

代码

：<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #manage{
            margin: 0 0 55px 0;
        }
        #manage .col-zdlg-2-5{
            width: 20%;
            float: left;
        }
        #manage .col-zdlg-2-5 .div1{
            width: auto;
            height: 100px;
            background: url("./image/service11.png") no-repeat center center;
        }
        #manage .col-zdlg-2-5 .div2{
            width: auto;
            height: 100px;
            background: url("./image/service22.png") no-repeat center center;
        }
        #manage .col-zdlg-2-5 .div3{
            width: auto;
            height: 100px;
            background: url("./image/service33.png") no-repeat center center;
        }
        #manage .col-zdlg-2-5 .div4{
            width: auto;
            height: 100px;
            background: url("./image/service44.png") no-repeat center center;
        }
        #manage .col-zdlg-2-5 .div5{
            width: auto;
            height: 100px;
            background: url("./image/service55.png") no-repeat center center;
        }
        #manage .col-zdlg-2-5 .div1:hover{
            background: url("./image/service1.png") no-repeat center center;
        }
        #manage .col-zdlg-2-5 .div2:hover{
            background: url("./image/service2.png") no-repeat center center;
        }
        #manage .col-zdlg-2-5 .div3:hover{
            background: url("./image/service3.png") no-repeat center center;
        }
        #manage .col-zdlg-2-5 .div4:hover{
            background: url("./image/service4.png") no-repeat center center;
        }
        #manage .col-zdlg-2-5 .div5:hover{
            background: url("./image/service5.png") no-repeat center center;
        }
        @media screen and (min-width: 768px) {
            #manage .col-zdlg-2-5{
                float: left;
                width:20%;
            }
        }
        @media screen and (max-width: 767px) {
            #manage .col-zdlg-2-5 {
                float: left;
                width: 100%;
            }
        }
    </style>
</head>
<body>
<div id="manage">
    <div class="container text-center">
        <div class="row ">
            <div class="col-zdlg-2-5 col-xs-6 text-center">
                <div class="text-center div1"></div>
                <h3>iOS开发</h3>
                <p>公司拥有国内顶级IOS开发团队，为您提供一站式的IOS手机
                    app定制开发服务</p>
            </div>
            <div class="col-zdlg-2-5 col-xs-6 text-center">
                <div class="text-center div2"></div>
                <h3>Android开发</h3>
                <p>安卓APP应用软件已经占据国内移动应用市场的50%以上，开发安卓手机
                    app软件的重要性日益凸显</p>
            </div>
            <div class="col-zdlg-2-5 col-xs-6 text-center">
                
                <div class="text-center div3"></div>
                <h3>微信开发</h3>
                <p>北京亿佰蓝图公司为您提供专业的微信公众平台二次开发以及微信商城网站
                    个性化定制开发服务</p>
            </div>
            <div class="col-zdlg-2-5 col-xs-6 text-center">
                <div class="text-center div4"></div>
                <h3>html5手机站开发</h3>
                <p>HTML5是未来网络发展的趋势，可以实现各种多媒体效果，如视频、音频等
                    无需任何插件即可观看收听</p>
            </div>
            <div class="col-zdlg-2-5 col-xs-6 text-center">
                <div class="text-center div5"></div>
                <h3>WEB网站开发</h3>
                <p>国内知名的web网站开发公司北京亿佰蓝图，拥有多年的网站建设经验，提供
                    高端型网站定制开发服务</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/yuanyuan-1994/p/8781306.html

bootstrap栅格分5等分相关推荐

BootStrap栅格之间留出空隙
BootStrap栅格系统可以把我们的container容器划分为若干等分,如果想要每个部分之间留出一定的空隙,我们很可能首先想到的方法就是用margin外边距来使它们分离从而产生空隙,这样做真的的可 ...
BootStrap(栅格系统)
目录 1.什么是BootStrap 2.BootStrap简介 BootStrap栅格layout 3.BootStrap常用样式与标签常用样式 4.BootStrap常用组件按钮组件面板组件 ...
Bootstrap 栅格系统
Bootstrap 栅格系统目录 1.简介 2.栅格选项 3.列偏移 4.嵌套列 5.列排序 1.简介 Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewp ...
bootstrap栅格系统自定义列
bootstrap栅格系统默认是12列,有时候需自定义列数,比如显示5列简单做法:原理就是找到控制列的样式覆盖它,这里以中等屏幕示例: <span style="font-size: ...
Bootstrap 栅格系统理解与总结
Bootstrap 栅格系统学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景. 只是Bootstrap的内容较多,新手往往不能很快 ...
Bootstrap栅格系统（布局）
栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...
如何使用BOOTSTRAP 栅格系统？
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [如何使用BOO ...
bootstrap 栅格系统实现类似table跨行
2019独角兽企业重金招聘Python工程师标准>>> 通过bootstrap 栅格系统实现类似table跨行的效果,如下: 具体代码如下: <div class=" ...
Bootstrap栅格参数
Bootstrap栅格参数跨设备组合定义定义一行,在中等分辨率下是8:4,在超小分辨率下是6:6,在小分辨率下是3:6 <hr /> <div class="row&q ...

bootstrap栅格分5等分

bootstrap栅格分5等分相关推荐

最新文章

热门文章