jetbrains d3 server 如何做网络营销推广 jaxb jScroll nginx视频 sql视频教程 oracle删除字段 solidworks图库 wps文件修复工具下载 docker启动容器 python报错 python生成随机数 python日期转时间戳 python打开文件夹 java学习手册 java获取当前年份 java中的接口 javalist java项目下载 离散数学及其应用 abaqus最新版本 beatedit 跳一跳脚本 php购物车 手机知识 HTML5从入门到精通 hzfs 数据结构与算法分析 fireworks vbs代码表白 啊哈c语言 excel并排查看 大家来goldwave使用教程 腾讯手机管家root ps制作动画 手机手写怎么设置 饥荒海难最变态的人物 动漫情头一男一女两张
当前位置: 首页 > 学习教程  > 编程语言

积累bootstrap的一些知识

2020/10/16 17:45:24 文章标签:

1.关于如何将3列内容对齐&#xff0c;如图所示 可以用BootsTrap中的 栅格系统来做并且设置col-md属性 html代码 <section id"tese"><div class"container"><div class"row"><div class"col-sm-6 col-md-4">&…

1.关于如何将3列内容对齐,如图所示在这里插入图片描述
可以用BootsTrap中的 栅格系统来做并且设置col-md属性
html代码

<section id="tese">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-4">
                <a href="#">
                    <div class="media">
                        <div class="media-left">
                            <i class="icon-uniE907"></i>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">支付交易保障</h4>
                            <p>银联支付全程保障支付安全</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-sm-6 col-md-4">
                <a href="#">
                    <div class="media">
                        <div class="media-left">
                            <i class="icon-uniE907"></i>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">支付交易保障</h4>
                            <p>银联支付全程保障支付安全</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-sm-6 col-md-4">
                <a href="#">
                    <div class="media">
                        <div class="media-left">
                            <i class="icon-uniE907"></i>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">支付交易保障</h4>
                            <p>银联支付全程保障支付安全</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-sm-6 col-md-4">
                <a href="#">
                    <div class="media">
                        <div class="media-left">
                            <i class="icon-uniE907"></i>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">支付交易保障</h4>
                            <p>银联支付全程保障支付安全</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-sm-6 col-md-4">
                <a href="#">
                    <div class="media">
                        <div class="media-left">
                            <i class="icon-uniE907"></i>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">支付交易保障</h4>
                            <p>银联支付全程保障支付安全</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-sm-6 col-md-4">
                <a href="#">
                    <div class="media">
                        <div class="media-left">
                            <i class="icon-uniE907"></i>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">支付交易保障</h4>
                            <p>银联支付全程保障支付安全</p>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>

css代码

#tese{
    padding:50px 0;
    border-bottom: 1px solid #c0c0c0;
}
.icon-uniE907::before{
    content:"\e907";
}
#tese i{
    font-size:34px;
}
#tese > .container > .row >div{
    margin-top:20px;
    margin-bottom:20px;
}

2.如何将文字左右布局(如图),这就要用到pull-left,pull-right来让左右浮动,不会出现一上一下的情况。
在这里插入图片描述

html代码

<section id="ljyy">
    <div class="container">
        <p class="pull-left"><i class="icon-uniE906"></i>现在有 <span>458</span>人在排队,累计预约交易成功 <span>7409</span>次。
            什么是预约投标?<a href="">立即预约</a></p>
        <p class="pull-right">
            <i class="icon-uniE905"></i>
            微金所企业宣传片
        </p>
    </div>
</section>

css代码

#ljyy{
    border-bottom:1px solid #c0c0c0;
}
#ljyy >.container  p{
    line-height:50px;
    font-size:14px;
}
#ljyy >.container .pull-left span,#ljyy >.container .pull-left a{
    color:#E92322;
}
#ljyy >.container  > .pull-left > a:hover{
  text-decoration: none;
}
.icon-unoE906:before{
    content:"\906";
}

.icon-uniE905:before{
    content:"\e905";
}

本文链接: http://www.dtmao.cc/news_show_300064.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?