版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/aven250/article/details/77573371
<!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, maximum-scale=1, user-scalable=no">
<!-- name="viewport" 设置移动设备优先; user-scalable=no 设置禁止使用缩放 -->
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 笔记</title>
<!-- Bootstrap -->
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- 笔记1 -->
<div class="container" style="border: 1px solid #40413E;"> .container 类用于设置固定宽度并支持响应式布局的容器。</div>
<br>
<!-- 笔记2 -->
<div class="container-fluid" style="border: 1px solid #40413E;"> .container-fluid 类用于设置固 100% 宽度，占据全部视口（viewport）的容器。</div>
<br>
<!-- 笔记3 -->
<!-- 三个等宽的列可以使用三个 .col-xs-4 -->
<!-- 笔记3 -->
<!-- 栅(shan)格表达式 -->
<div class="row">
<div class="col-xs-12 col-md-8" style="border: 1px solid #40413E;">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4" style="border: 1px solid #40413E;">.col-xs-6 .col-md-4</div>
</div>
<br>
<!-- 笔记4 -->
<!-- 使用 .col-md-offset-* 类可以将列向右侧偏移。 -->
<div class="row">
<div class="col-md-4" style="border: 1px solid #40413E;">.col-md-4</div>
<div class="col-md-4 col-md-offset-4" style="border: 1px solid #40413E;">.col-md-4 .col-md-offset-4 向有偏移4格</div>
</div>
<br>
<!-- 笔记5 了解下就行-->
<!-- 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。 -->
<div class="row">
<div class="col-md-9 col-md-push-3" style="border: 1px solid #40413E;">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9" style="border: 1px solid #40413E;">.col-md-3 .col-md-pull-9</div>
</div>
<br>
<!-- 笔记6 -->
<!-- <small> 标签或赋予 .small 类的元素，可以用来标记副标题。 -->
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<br><br>
<!-- 笔记7 -->
<!-- 带被删除线的文本使用 <del>或者 <s> 标签 -->
<del>This line of text is meant to be treated as deleted text.</del><br>
<s>This line of text is meant to be treated as deleted text.</s>
<br><br>
<!-- 笔记8 -->
<!-- 下划线文本使用<ins>或<u>标签。 -->
<ins>This line of text is meant to be treated as an addition to the document.</ins><br>
<u>This line of text will render as underlined</u>
<br><br>
<!-- 笔记9 -->
<!--内联列表: 通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。 -->
<ul class="list-inline">
<li>Lorem ipsum</li>
<li>Phasellus iaculis</li>
<li>Nulla volutpat</li>
</ul>
<br>
<!-- 水平排列的描述: .dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。 -->
<dl class="dl-horizontal">
<dt>标题</dt>
<dd>内容:大法师打发撒旦法撒旦法撒的发</dd>
<dt>标题</dt>
<dd>内容:大法师打发撒旦法撒旦法撒的发</dd>
<dd>内容:大法师打发撒旦法撒旦法撒的打双丰收发</dd>
<dt>标题</dt>
<dd>内容:大法师打发撒旦法撒旦法撒的发</dd>
<dd>内容:大法师打发撒旦法撒旦法撒的打双丰收发</dd>
</dl>
<br>
<table class="table table-bordered table-hover">
<tr>
<td class="active">发斯蒂芬斯蒂芬</td>
<td class="success">是东方故事的发给</td>
<td class="warning">发斯蒂芬斯蒂芬</td>
<td class="danger">是东方故事的发给</td>
<td class="info">是东方故事的发给</td>
</tr>
<tr>
<td>发斯蒂芬斯蒂芬</td>
<td>是东方故事的发给</td>
<td>发斯蒂芬斯蒂芬</td>
<td>是东方故事的发给</td>
<td>啊撒旦法撒旦法撒的</td>
</tr>
<tr>
<td class="success">发斯蒂芬斯蒂芬</td>
<td class="success">是东方故事的发给</td>
<td class="success">发斯蒂芬斯蒂芬</td>
<td class="success">是东方故事的发给</td>
<td class="success">是东方故事的发给</td>
</tr>
</table>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
<!-- 放设置尺寸css文件内的
/*sm->小屏幕(平板，大于等于 768px);*/
/*md->中等屏幕(桌面显示器，大于等于 992px);*/
/*lg->大屏幕(大桌面显示器，大于等于 1200px);*/
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... } -->获取更多资料,进入QQ群:543592003