Bootstrap学习笔记 02

来源：互联网发布：onclick seo 编辑：程序博客网时间：2024/06/06 02:12

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>

效果如下：

这里写图片描述

阅读全文

0 0