为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：
Bootstrap3：
下面的一行代码可以让网页的宽度自动适应手机屏幕的宽度
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Bootstrap4：
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
在IOS9中要想起作用，得加上"shrink-to-fit=no"，原因如下：
Bootstrap4 CDN
<!-- 新 Bootstrap4 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js --> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。
官网最新CSS 文件、JS、Popper.js 以及 jQuery 文件
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。
默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif。
此外，所有的 <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。
<dl>标记定义了一个定义列表，定义列表中的条目是通过使用<dt>标记(“definition title”，定义标题)和<dd>标记(“definition description”，定义描述)创建的。<dt>给出了术语名，<dd>标记给出了术语的定义。
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签的一个常见应用就是用来表示计算机的源代码。
可以导致段落断开的标签（例如标题、<p> 和 <address> 标签）绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。
pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如 <a> 标签）放到 <pre> 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。
如果您希望使用 <pre> 标签来定义计算机源代码，比如 HTML 源代码，请使用符号实体来表示特殊字符，比如 "<" 代表 "<"，">" 代表 ">"，"&" 代表 "&"。
以下的元素均是字体样式元素。我们并不被反对使用这些标签。但是如果您只是希望通过这些标签单纯地改变文本的样式，建议您使用样式表来取得更加丰富的效果。
| <tt> | 呈现类似打字机或者等宽的文本效果。 |
| <i> | 显示斜体文本效果。 |
| <b> | 呈现粗体文本效果。 |
| <big> | 呈现大号字体效果。 |
| <small> | 呈现小号字体效果。 |
× (×) 是 HTML 实体字符，来表示关闭操作，而不是字母 "x"。
bootstrap modal的data-dismiss属性
<button type="button" class="btn default" data-dismiss="modal">关闭</button>
如果你的modal弹窗里面加上这个按钮，那么点击则会关闭当前弹窗，关键在于data-dismiss="modal"，它让按钮有了这个功能。这是bootstrap.js中MODAL插件相关代码中定义的:
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
class="close"有鼠标hover的一个样式
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-primary active">点击后的按钮</button>
<button type="button" class="btn btn-primary" disabled>禁止点击的按钮</button>
<a href="#" class="btn btn-primary disabled">禁止点击的链接</a>
disabled在里面或者在外面注意区分
data-toggle指以什么事件触发，常用的如modal,popover,tooltips,collapse等，data-target指事件的目标。
<a href="login.html" data-toggle="modal" data-target="#signin-signup-tab" id="signin-button" class="pull-right">Sign In</a>
：因为Bootstrap为这些元素都绑定上了事件，而终止了链接默认行为，你可以看看Bootstrap的文档，data-toggle指以什么事件触发，常用的如modal,popover,tooltips等，data-target指事件的目标,你这段代码的意思就是指将#signin-signup-tab这个Dom元素的内容以模态框的形式展示。
caret彻底的理解css的三角形【通过border】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.caret0{
0;
height:0;
border: 5px solid #000;
}
.caret1{
0;
height:0;
border-top: 5px solid #000;
border-left: 5px solid #fff;
border-right: 5px solid #fff;
border-bottom: 5px solid #000;
}
.caret2{
0;
height:0;
border-top: 5px solid #fff;
border-left: 5px solid #f00;
border-right: 5px solid #f00;
border-bottom: 5px solid #fff;
}
.caret2{
0;
height:0;
border-top: 5px solid #fff;
border-left: 5px solid #f00;
border-right: 5px solid #f00;
border-bottom: 5px solid #fff;
}
.caret3{
0px;
height: 0px;
border-bottom: 5px solid #000;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.caret4{
0px;
height: 0px;
border-right: 5px solid #000;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
.caret5{
0px;
height: 0px;
border-top: 5px solid #000;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.caret6{
0px;
height: 0px;
border-left: 5px solid #000;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
</style>
</head>
<body>
<h1>通过border的设置的三角形</h1>
<div class="caret0"></div>
<br>
<div class="caret1"></div>
<br>
<div class="caret0"></div>
<br>
<div class="caret1"></div>
<br>
<div class="caret2"></div>
<br>
向上的三角形
<div class="caret3"></div>
<br>
向左的三角形
<div class="caret4"></div>
<br>
向下的三角形
<div class="caret5"></div>
<br>
向右的三角形
<div class="caret6"></div>
</body>
</html>
徽章插入到元素内
badge-light
以下实例将徽章嵌入到按钮内：
实例
<button type="button" class="btn btn-primary"> Messages <span class="badge badge-light">4</span> </button>
IE9 及其以下版本不支持弹性盒子，所以如果你需要兼容 IE8-9，请使用 Bootstrap 3。