【02】Bootstrap — 布局容器

最新推荐文章于 2021-10-14 08:27:56 发布

有心博客

最新推荐文章于 2021-10-14 08:27:56 发布

阅读量914

点赞数

文章标签： bootstrap container

本文链接：https://blog.csdn.net/qq_32629809/article/details/77828610

版权

Bootstrap需要为页面内容和栅格系统包裹一个容器。我们提供了两个类，分别是.container和.container-fluid。

.container类用于固定宽度并支持响应式布局的容器。
.container-fluid类用于100%宽度，占据窗口全部的容器。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <style>
            .border-line {
                border: 1px solid red;
            }
        </style>
    </head>
    <body style="padding: 20px;">
        <div class="container">
            <div class="row">
                <div class="col-md-1 border-line">.col-md-1</div>
                <div class="col-md-1 border-line">.col-md-1</div>
                <div class="col-md-1 border-line">.col-md-1</div>
                <div class="col-md-1 border-line">.col-md-1</div>
                <div class="col-md-1 border-line">.col-md-1</div>
                <div class="col-md-1 border-line">.col-md-1</div>
                <div class="col-md-1 border-line">.col-md-1</div>
                <div class="col-md-1 border-line">.col-md-1</div>
                <div class="col-md-1 border-line">.col-md-1</div>
                <div class="col-md-1 border-line">.col-md-1</div>
                <div class="col-md-1 border-line">.col-md-1</div>
                <div class="col-md-1 border-line">.col-md-1</div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-1 border-line">.col-md-1</div>
                <div class="col-md-1 border-line">.col-md-1</div>
                <div class="col-md-1 border-line">.col-md-1</div>
                <div class="col-md-1 border-line">.col-md-1</div>
                <div class="col-md-1 border-line">.col-md-1</div>
                <div class="col-md-1 border-line">.col-md-1</div>
                <div class="col-md-1 border-line">.col-md-1</div>
                <div class="col-md-1 border-line">.col-md-1</div>
                <div class="col-md-1 border-line">.col-md-1</div>
                <div class="col-md-1 border-line">.col-md-1</div>
                <div class="col-md-1 border-line">.col-md-1</div>
                <div class="col-md-1 border-line">.col-md-1</div>
            </div>
        </div>
    </body>
</html>

container和container-fluid的区别

有心博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【02】Bootstrap — 布局容器

Bootstrap需要为页面内容和栅格系统包裹一个容器。我们提供了两个类，分别是.container和.container-fluid。.container类用于固定宽度并支持响应式布局的容器。.container-fluid类用于100%宽度，占据窗口全部的容器。<!DOCTYPE html><html lang="zh-CN"> <head> <meta chars
复制链接

扫一扫