Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
<!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"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好，世界！</h1> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> </body> </html>
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
<div class="container"> <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>
如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。
使用 .col-md-offset-2 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
<div class="container"> <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-5 col-md-offset-0" >col-md-offset-0</div> </div> </div>
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）
<div class="container"> <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 class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div> </div>
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
<div class="container"> <div class="row"> <div class="col-xs-3 col-xs-push-6"><div class="box">box1</div></div> <div class="col-xs-3"><div class="box">box2</div></div> <div class="col-xs-3 col-xs-pull-6"><div class="box">box3</div></div> <div class="col-xs-3"><div class="box">box4</div></div> </div> </div>
为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式
<div class="container"> <div class="row"> <a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit"> </div> </div>
使用下面列出的类可以快速创建一个带有预定义样式的按钮
1 <div class="container"> 2 3 <div class="row"> 4 5 <button type="button" class="btn btn-default">（默认样式）Default</button> 6 7 <button type="button" class="btn btn-primary">（首选项）Primary</button> 8 9 <button type="button" class="btn btn-success">（成功）Success</button> 10 11 <button type="button" class="btn btn-info">（一般信息）Info</button> 12 13 <button type="button" class="btn btn-warning">（警告）Warning</button> 14 15 <button type="button" class="btn btn-danger">（危险）Danger</button> 16 17 <button type="button" class="btn btn-link">（链接）Link</button> 18 19 </div> 20 21 </div>
需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
1 <div class="container"> 2 3 <div class="row"> 4 5 <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button> 6 7 <button type="button" class="btn btn-primary">（默认尺寸）Default button</button> 8 9 <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button> 10 11 <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button> 12 13 </div> 14 15 </div>
通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果。
<div class="container"> <div class="row"> <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button> </div> </div>
预定义字体颜色
1 <div class="container"> 2 3 <div class="row"> 4 5 <p class="text-muted">...</p> 6 7 <p class="text-primary">...</p> 8 9 <p class="text-success">...</p> 10 11 <p class="text-info">...</p> 12 13 <p class="text-warning">...</p> 14 15 <p class="text-danger">...</p> 16 17 </div> 18 19 </div>
预定义背景颜色
<div class="container"> <div class="row"> <p class="bg-primary">...</p> <p class="bg-success">...</p> <p class="bg-info">...</p> <p class="bg-warning">...</p> <p class="bg-danger">...</p> </div> </div>
为任意 <table> 标签添加 .table <div class="container"> <div class="row"> <table class="table table-bordered"> <thead> <tr><th>姓名</th><th>性别</th></tr> </thead> <tbody> <tr><td>赵胤禛</td><td>男</td></tr> </tbody> </table> </div> </div>
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
<table class="table table-bordered"> <thead> <tr> <th>姓名</th> <th>性别</th> </tr> </thead>
</table>
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
<table class="table table-hover"> <thead> <tr> <th>姓名</th> <th>性别</th> </tr> </thead> </table>
通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
botstrap引入方式、全局css样式、布局容器、栅格系统、列偏移、列排序、按钮 可作为按钮使用的标签或元素、预定义样式、尺寸、禁用状态、预定义背景颜色、预定义字体颜色
原文：https://www.cnblogs.com/penggedeboke1999/p/11917352.html