Bootstrap学习笔记 02 - Grids

最新推荐文章于 2021-06-23 15:39:55 发布

Cynhard85

最新推荐文章于 2021-06-23 15:39:55 发布

阅读量459

点赞数

分类专栏： Bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/u011304970/article/details/78401321

版权

Bootstrap 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

Grid

Bootstrap 最多允许页面包含12列，多个相邻列可以合并成一个。Bootstrap grids 会根据页面大小自动调整。

样式

用 row 表示行
用col-*-* 表示列
- 第一个 * 可以是下面四种中的一个：
  - xs（手机）
  - sm（平板）
  - md（桌面）
  - lg（更大的左面）
- 第二个 * 表示占多少列

例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <title>Grids</title>
    </head>
    <body>
        <!-- 将整个页面分成3列，每列的比例为 3:4:5 -->
        <div class="row">
            <div class="col-xs-3" style="background-color:lavender;">.col-xs-3</div>
            <div class="col-xs-4" style="background-color:lavenderblush;">.col-xs-4</div>
            <div class="col-xs-5" style="background-color:lavender;">.col-xs-5</div>
        </div>

        <!-- 将整个页面等分 -->
        <div class="row">
            <div class="col-xs-6" style="background-color:lavender;">.col-xs-6</div>
            <div class="col-xs-6" style="background-color:lavenderblush;">.col-xs-6</div>
        </div>

        <!-- 仅用前四列 -->
        <div class="row">
            <div class="col-xs-2" style="background-color:lavender;">.col-xs-2</div>
            <div class="col-xs-2" style="background-color:lavenderblush;">.col-xs-2</div>
        </div>
    </body>
</html>

效果如下：

这里写图片描述

Cynhard85

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap学习笔记 02 - Grids

GridBootstrap 最多允许页面包含12列，多个相邻列可以合并成一个。Bootstrap grids 会根据页面大小自动调整。样式用 row 表示行用col-*-* 表示列第一个 * 可以是下面四种中的一个： xs（手机）sm（平板）md（桌面）lg（更大的左面）第二个 * 表示占多少列例子<!DOCTYPE html><html> <head>
复制链接

扫一扫

专栏目录