一：布局容器：
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。
.container :
<div class="container"> // 页面的两边留白 ... </div>
.container-fluid:
<div class="container-fluid"> // 100%宽度 两边不留白 ... </div>
二，栅格系统：
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。
1：行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中。
2：行（row）在水平方向创建一组“列（column）。
3：内容应当放置于列（column）内，并且，只有列（column）”可以作为行（row）”的直接子元素。
4：如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> .c1 { background-color: red; height: 50px; border: 3px solid black; } /*媒体容器;限制屏幕大小*/ @media screen and (max- 600px) { .c1 { background-color: green; height: 50px; border: 3px solid black; } } </style> </head> <body> <!--两边留白的容器--> <div class="container"> <!--定义一行（12列）--> <div class="row"> <!--col-md：适用于中等屏幕（中等大小的电脑屏幕）--> <!--col-xs：适用于超小屏幕（手机屏幕）--> <!--一行的列数固定为12--> <div class="col-md-6 col-xs-6 c1"></div> <div class="col-md-6 col-xs-6 c1"></div> <br> <div class="col-md-3 c1"></div> <div class="col-md-9 c1"></div> <br> <div class="col-md-1 c1"> <div class="row"> <div class="col-md-6 c1"></div> <div class="col-md-6 c1"></div> </div> </div> <div class="col-md-1 c1"></div> <div class="col-md-1 c1"></div> <div class="col-md-1 c1"></div> <div class="col-md-1 c1"></div> <div class="col-md-1 c1"></div> <div class="col-md-1 c1"></div> <div class="col-md-1 c1"></div> <div class="col-md-1 c1"></div> <div class="col-md-1 c1"></div> <div class="col-md-1 c1"></div> <div class="col-md-1 c1"></div> <div class="col-md-1 c1"></div> </div> <div class="row"> <div class="col-md-9 c1"></div> </div> </div> </body> </html>
三：常用标签和类：
col-md-6 col-md-offset-3：将col-md-6元素向右偏移3个列的宽度。
<small>文本</small>：使用小号文本。
<abbr title="attribute">attr</abbr>:abbr标签是缩略语，带有title属性：鼠标移至上面有问号指针，鼠标悬停在缩略语上面，可以看到title里面的内容。
ps：可以为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。
blockquote标签：内部采用引用样式。
footer标签：定义在blockquote标签内部，表明引用来源。
cite标签：定义在footer标签内部，表名来源的名称。
list-unstyled类：移除了默认的列表样式，（只会针对子元素）
pre标签：正确的显示代码，尖括号要左转义处理 <：< >：>
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> .c1 { background-color: red; height: 50px; border: 3px solid black; } </style> </head> <body> <div class="container"> <div class="row"> <!--将col-md-6元素向右偏移3个列的宽度。--> <div class="col-md-6 col-md-offset-3"> <h1>虹桥校区脱产七期最牛逼!</h1> <!--small：使用小号文本--> <h1>虹桥校区脱产七期最牛逼!<small>确实牛逼</small></h1> <p>电视剧发行的风景和史蒂<p class="lead">芬霍金说的，电视剧发</p>行的风景和史蒂芬霍金说的，电视剧发行的风景和史蒂芬霍金说的，电视剧发行的风景和史蒂芬霍金说的电视剧发行的风景和史蒂芬霍金说的</p> abbr: <!--鼠标悬停在‘egondsb’上会显示：egon同志就是一个大帅比（initialism把egondsb的字体变小）--> <abbr title="egon同志就是一个大帅比" class="initialism">egondsb</abbr> <blockquote> <p>20岁超越30岁，40岁，50岁的人,衣锦还乡,技多不压身</p> <footer>上海第一帅:<cite title="Source Title">Jason</cite></footer> </blockquote> <ul class="list-unstyled"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <pre><p>Sample text here...</p></pre> </div> </div> </div> </body> </html>
四，表格
table标签中添加的样式：
table类：为普通表格赋予基本的样式
table.hover类：让 <tbody> 中的每一行对鼠标悬停状态作出响应。
table-bordered 类：为表格和其中的每个单元格增加边框。
table-striped类：给 <tbody> 之内的每一行增加斑马条纹样式。
为行或单元格设置颜色：
active类：鼠标悬停在行或单元格上时所设置的颜色。
success类：标识成功或积极的动作。
info类：标识普通的提示信息或动作。
warning：标识警告或需要用户注意
danger：标识危险或需要用户注意
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <table class="table table-hover table-bordered table-striped"> <thead> <tr class="info"> <th>name</th> <th>password</th> <th>hobby</th> </tr> </thead> <tbody> <tr class="danger"> <td class="text-center">Jason</td> <td>123</td> <td>学习</td> </tr> <tr class="warning"> <td>Egon</td> <td>123</td> <td>减肥</td> </tr> <tr class="success"> <td>Kevin</td> <td>123</td> <td>腰子汤</td> </tr> <tr class="active"> <td>Tank</td> <td>123</td> <td>吃生蚝</td> </tr> </tbody> </table> </div> </div> </div> </body> </html>
五，表单：
form-control类：默认表单格式，设置在控件内部（如input）。
form-group类：包裹label和其他控件（input），获得很好的效果。
form-horizontal类：水平布局，设在form标签中，并且无需添加row类
校验状态：
has-warning类：input边框显示橙色。
has-error类：input边框显示红色。
has-success类：input边显示绿色。
ps：（.control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="awesome/css/font-awesome.css"> <style> .c1 { margin-top: 100px; } body { background-color: #EEEEEE; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4 c1"> <form class="form-horizontal"> <div class="form-group has-error"> <h1 class="text-center">会员登录 <span class="glyphicon glyphicon-user"></span></h1> <label for="inputEmail3" class="col-sm-3 control-label ">用户名</label> <div class="col-sm-9 "> <input type="email" class="form-control " id="inputEmail3" placeholder="用户名"> <span class="error help-block">用户名错误</span> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-3 control-label">密码</label> <div class="col-sm-9"> <input type="password" class="form-control" id="inputPassword3" placeholder="密码"> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <button type="submit" class="btn btn-primary active">Sign in<i class="fa fa-bath" aria-hidden="true"></i></button> </div> </div> </form> </div> </div> </div> <script> // 光标移到input输入框内部时，清除span标签中的内容，并且删除警告校验状态 $('input').on('focus',function () { $(this).next().text('').parent().parent().removeClass('has-error') }) </script> </body> </html>
六：按钮：
btn btn-default类：默认样式：白色
btn btn-primary类：首选项：蓝色
btn btn-success类：成功：绿色
btn btn-info类：一般信息：淡蓝色
btn btn-warning类：警告信息：橙色
btn btn-danger类：危险信息：红色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <button class="btn btn-success">button</button> <button class="btn btn-info">button</button> <button class="btn btn-warning">button</button> <button class="btn btn-danger">button</button> <button class="btn btn-primary">button</button> <a href="http://www.xiaohuar.com" class="btn btn-primary">Link</a> </div> </div> </div> </body> </html>
七：字体图标
http://www.fontawesome.com.cn/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> span { color: green; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <span class="glyphicon glyphicon-heart"></span> <span class="glyphicon glyphicon-heart-empty"></span> </div> </div> </div> </body> </html>
八：导航条
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="bootstrap-sweetalert-master/dist/sweetalert.css"> <script src="bootstrap-sweetalert-master/dist/sweetalert.min.js"></script> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container"> <div class="row"> <div class="page-header"> <h1>Example page header <small>Subtext for header</small> </h1> </div> <div class="jumbotron"> <h1>Hello, world!</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style=" 45%"> <span class="sr-only">45% Complete</span> </div> </div> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> <div class="panel-body"> Panel content </div> </div> <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><a href="#">1</a></li> <li class="active"><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> </div> </div> </body> </html>
九：模态框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </body> </html>