学习响应式BootStrap来写融职教育网站，Bootsrtap第二天

于 2021-05-31 21:13:19 发布
阅读量134 收藏 1
点赞数 1
分类专栏： 大前端 文章标签： bootstrap 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/god953/article/details/117429942
版权

栅格布局

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>融职教育</title>
    <!--    移动设备优先-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--    引入bootstrap CSS-->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .col, .col-1, .col-2, .col-3, .col-4, .col-12, .col-sm-6, .col-lg-3 .col-sm-4, .col-sm-12, .col-md-2, .col-md-10 .col-md-6, .col-md, .col-sm-12, .col-lg-4 {
            background: #AAA;
            padding: 10px;
            border: 1px solid #0f6674;
        }
    </style>

</head>
<body>
<!--顶部导肮开始-->
<nav>
    <div class="container">
        <div class="row">
            <div class="col">
                导航
            </div>
        </div>
    </div>
</nav>
<!--顶部导肮结束-->

<!--头部开始-->
<header class="mt-4">
    <div class="container">
        <div class="row">
            <div class="col">LOGO</div>
            <div class="col">SLOGEN</div>
            <div class="col">TOOL BTN</div>
        </div>
    </div>
</header>
<!--头部结束-->

<!--轮播图开始-->
<section class="mt-4">
    <div class="container">
        <div class="row">
            <div class="col">
                轮播图
            </div>
        </div>
    </div>
</section>
<!--轮播图结束-->

<!--你的收获开始-->
<section class="mt-4">
    <div class="container">
        <div class="row">
            <div class="col">
                <div>
                    <h4 class="d-inline-block">你的收获</h4>
                    <small class="text-muted pl-2">掌握的是一门就业的技术，为成长积蓄力量</small>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-4 col-sm-4 col-md"></div>
            <div class="col-4 col-sm-4 col-md"></div>
            <div class="col-4 col-sm-4 col-md"></div>
            <div class="col-4 col-sm-4 col-md"></div>
            <div class="col-4 col-sm-4 col-md"></div>
            <div class="col-4 col-sm-4 col-md"></div>
        </div>
    </div>
</section>
<!--你的收获结束-->

<!--关注我们开始-->
<section class="mt-4">
    <div class="container">
        <div class="row">
            <div class="col">
                <div>
                    <h4 class="d-inline-block">关注我们</h4>
                    <small class="text-muted pl-2">掌握的是一门就业的技术，为成长积蓄力量</small>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-lg-8"></div>
            <div class="col-sm-12 col-lg-4"></div>
        </div>
    </div>
</section>
<!--关注我们结束-->

<!--成长平台开始-->
<section class="mt-4">
    <div class="container">
        <div class="row">
            <div class="col">
                <div>
                    <h4 class="d-inline-block">成长平台</h4>
                    <small class="text-muted pl-2">掌握的是一门就业的技术，为成长积蓄力量</small>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-1"></div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col-1"></div>
            <div class="col-2"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col-2"></div>
            <div class="col-1"></div>
        </div>
        <div class="row">
            <div class="col"></div>
        </div>
    </div>
</section>
<!--成长平台结束-->

<!--培养模式开始-->
<section class="mt-4">
    <div class="container">
        <div class="row">
            <div class="col">
                <div>
                    <h4 class="d-inline-block">培养模式</h4>
                    <small class="text-muted pl-2">掌握的是一门就业的技术，为成长积蓄力量</small>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-1"></div>
            <div class="col-3"></div>
            <div class="col-4"></div>
            <div class="col-3"></div>
            <div class="col-1"></div>
        </div>
    </div>
</section>
<!--培养模式结束-->

<!--面授培训开始-->
<section class="mt-4">
    <div class="container">
        <div class="row">
            <div class="col">
                <div>
                    <h4 class="d-inline-block">面授培训</h4>
                    <small class="text-muted pl-2">掌握的是一门就业的技术，为成长积蓄力量</small>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-2"></div>
            <div class="col-2"></div>
            <div class="col-1"></div>
            <div class="col-3"></div>
            <div class="col-4"></div>
        </div>
        <div class="row">
            <div class="col-2"></div>
            <div class="col-2"></div>
            <div class="col-1"></div>
            <div class="col-3"></div>
            <div class="col-4"></div>
        </div>
        <div class="row">
            <div class="col-2"></div>
            <div class="col-2"></div>
            <div class="col-1"></div>
            <div class="col-3"></div>
            <div class="col-4"></div>
        </div>
        <div class="row">
            <div class="col-2"></div>
            <div class="col-2"></div>
            <div class="col-1"></div>
            <div class="col-3"></div>
            <div class="col-4"></div>
        </div>
    </div>
</section>
<!--面授培训结束-->

<!--实习目标开始-->
<section class="mt-4">
    <div class="container">
        <div class="row">
            <div class="col">
                <div>
                    <h4 class="d-inline-block">实习目标</h4>
                    <small class="text-muted pl-2">掌握的是一门就业的技术，为成长积蓄力量</small>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-md-6"></div>
            <div class="col-sm-12 col-md-6"></div>
            <div class="col-sm-12 col-md-6"></div>
            <div class="col-sm-12 col-md-6"></div>
        </div>
    </div>
</section>
<!--实习目标结束-->

<!--你的总监开始-->
<section class="mt-4">
    <div class="container">
        <div class="row">
            <div class="col">
                <div>
                    <h4 class="d-inline-block">你的总监</h4>
                    <small class="text-muted pl-2">掌握的是一门就业的技术，为成长积蓄力量</small>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-3"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col-12 col-sm-6 col-lg-3"></div>
            <div class="col-12 col-sm-6 col-lg-3"></div>
            <div class="col-12 col-sm-6 col-lg-3"></div>
            <div class="col-12 col-sm-6 col-lg-3"></div>
        </div>
    </div>
</section>
<!--你的总监结束-->

<!--对标培训开始-->
<section class="mt-4">
    <div class="container">
        <div class="row">
            <div class="col">
                <div>
                    <h4 class="d-inline-block">对标培训</h4>
                    <small class="text-muted pl-2">掌握的是一门就业的技术，为成长积蓄力量</small>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col-2"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col-2"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col-2"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col-2"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col-2"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col-2"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col-2"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col-2"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col-2"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col-2"></div>
            <div class="col"></div>
        </div>
    </div>
</section>
<!--对标培训结束-->

<!--工作环境开始-->
<section class="mt-4">
    <div class="container">
        <div class="row">
            <div class="col">
                <div>
                    <h4 class="d-inline-block">工作环境</h4>
                    <small class="text-muted pl-2">掌握的是一门就业的技术，为成长积蓄力量</small>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col"></div>
        </div>
    </div>
</section>
<!--工作环境结束-->

<!--页脚开始-->
<footer class="mt-4">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-10"></div>
            <div class="col-sm-12 col-md-2"></div>
        </div>
    </div>
</footer>
<!--页脚结束-->


<!--先引入jQuery 在引入popper.js 最后在引入bootstrap.js-->
<script src="js/jquery-3.4.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
zeuskk
关注
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值