<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="./bower_components/
圆角图片 <img src="rabbit.png" class="img-rounded" alt="rabbit" width="121" height="121"/> 圆形图片 <img src="rabbit.png" class="img-circle" alt="rabbit" width="121" height="121"/> 缩略图 <img src="rabbit.png" c
Jumbotron <div class="jumbotron">
<h1>String class</h1>
Strings are objects that represent sequences of characters.
The standard string class provides support for such objects with an
Page Header <div class="page-header">
<h1>String class</h1>
</div>
<p>Strings are objects that represent sequences of characters.</p>
<p>The standard string class provides support for such objects
Wells normal <div class="well">Normal Well</div> small <div class="well well-sm">Small Well</div> large <div class="well well-lg">Large Well</div>
Alerts Success <div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div> Info <div class="alert alert-info">
<strong>Info!</strong> Indicate
Button 风格 <button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<
按钮组用<div>包含，样式为 btn-group 示例： <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="style
徽章：class="badge" 标签：class="label" 示例： <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link re
<div> 中通过使用 .progress 样式实现进度条 <div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
<span class="s
分页 <ul class="pagination" id="pagination">
<li id="page1"><a href="#">1</a></li>
<li id="page2"><a href="#">2</a></li>
<li id="page3"><a href="#">3</a></li>
</ul> active 与 disabled 状态 <ul
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="./bower_component
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="./bower_component
.dropdown 表示下拉菜单 示例 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" hre
Collapse 实现Collapse 在某个元素（比如<div>）加上 .collapse 类，该元素用来显示折叠的内容 为了控制折叠内容的显示与隐藏，需要增加另外一个元素（ <a> 或者 <button>），并且加上 data-toggle="collapse" 类 为了将折叠元素与控制折叠的元素关联起来，需要在折叠元素上加上 id=xxx 并且在控制折叠的元素上加上 data-target=
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="./bower_component
基本形态 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="./bower_comp
Forms 以 .form-control 修饰的表单控件宽度为 100%，例如：<input>，<textarea>，<select> Bootstrap 提供了 3 种表单样式：Vertical，Horizontal，Inline 如何应用表单样式？ form 节点添加 role="form" 将 label 与 表单控件应用 <div class="form-group"> <input>，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
float float 历史 float 的初衷仅仅是：文字环绕效果 float 特性 flock formatting context -- 块级格式化上下文 具有包裹性的元素： display: inline-block / table-cell position: absolute / fixed / sticky overflow: hidden / scroll 浮动的破坏性，会让父元素
