<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- 移动设备优先 -->
<!-- 适当的绘制和触屏缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 如果需要只让用户滚动屏幕静止缩放功能(设置 meta 属性为 user-scalable=no) -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/my.css">
</head>
<body>
<!-- 布局的容器 -->
<!-- 固定宽度并支持响应式的布局容器 -->
<div class="container">
<h3>这是固定宽度，支持响应式的布局容器</h3>
<div class="row">
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">col-md-8</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
</div>
<br />
<br />
<br />
<!-- 100%宽度，占据全部视口的容器 -->
<div class="container-fluid">
<h3>这是100%宽度的流式布局容器</h3>
<!-- 桌面端按8-4进行分割 手机端按12-6进行分割 超出部分在下面显示 -->
<div class="row">
<div class="col-xs-12 col-md-8">col-xs-12 col-md-8</div>
<div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
</div>
<!-- 桌面按4-4-4进行分割 手机端按6-6-6进行分割 超出部分在下面显示 -->
<div class="row">
<div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
<div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
<div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
</div>
<!-- 手机和桌面按照6-6进行分割 保持比例不变 -->
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
</div>
<br>
<br>
<br>
<div class="container">
<h3>这是固定宽度，支持响应式的布局容器</h3>
<!-- 桌面布局8-4 平板布局6-6 手机布局12-6 -->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">col-xs-12 col-sm-6 col-md-8</div>
<div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
<div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
</div>
<br>
<br>
<br>
<div class="container">
<h3>这是固定宽度，支持响应式的布局容器</h3>
<!-- 多于的列另起一行排列 -->
<div class="row">
<div class="col-xs-9">col-xs-9</div>
<!-- 因为9+4>12，所以另外增加一列 9单独成行 这一行到新的行去 -->
<div class="col-xs-4">col-xs-4</div>
<!-- 后续的列沿着新行继续 -->
<div class="col-xs-6">col-xs-6</div>
</div>
</div>
<br>
<br>
<br>
<div class="container">
<h3>这是固定宽度，支持响应式的布局容器</h3>
<!--
响应式列重置：
在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，需要使用 .clearfix 和 响应式工具类
-->
<div class="row">
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
</div>
<!-- 仅为所需的视口添加额外的clearfix -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
<br>
<br>
<br>
<div class="container">
<h3>重置偏移，后推或前拉某个列</h3>
<div class="row">
<div class="col-sm-5 col-md-6">col-sm-5 col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">col-sm-6 col-md-5 col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">
col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0
</div>
</div>
</div>
<br>
<br>
<br>
<div class="container">
<h3>列偏移</h3>
<!-- 12等份需要加上偏移量 -->
<div class="row">
<div class="col-md-4 my-style">col-md-4</div>
<div class="col-md-4 col-md-offset-4">col-md-4 col-md-offset-4</div>
</div>
<!-- 先偏移 再取有多少个等份 -->
<div class="row">
<div class="col-md-3 col-md-offset-3">col-md-3 col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">col-md-3 col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">col-md-6 col-md-offset-3</div>
</div>
<!-- 覆盖较低网格层的偏移量 -->
<div class="row">
<div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
<div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0</div>
</div>
</div>
<br>
<br>
<br>
<div class="container">
<h3>嵌套列</h3>
<div class="row">
<div class="col-sm-9">
Level 1: col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: col-xs-8 col-sm-6
</div>
</div>
</div>
</div>
<hr/>
<h3>列排序</h3>
<div class="row">
<div class="col-md-9 col-md-push-3">col-md-9 col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">col-md-3 col-md-pull-9</div>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<script src="./js/jquery.js"></script>
<script src="./js/bootstrap.js"></script>
</body>
</html>
最后修改：2021 年 02 月 04 日
© 允许规范转载