官网：www.bootcss.com
一. 全局css样式
栅格系统
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局
<!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 rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="thumbnail">上述3个meta标签*必须*放在最前面</div></div> <div class="col-lg-3 col-md-4 col-sm-6"><div class="thumbnail">上述3个meta标签*必须*放在最前面</div></div> <div class="col-lg-3 col-md-4 col-sm-6"><div class="thumbnail">上述3个meta标签*必须*放在最前面</div></div> <div class="col-lg-3 col-md-4 col-sm-6"><div class="thumbnail">上述3个meta标签*必须*放在最前面</div></div> </div> </div> </body> </html>
表单登录界面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> </head> <body> <div class="container"> <div class="col-lg-3 thumbnail"> <form> <div class="form-group"> <label for="username">用户名</label> <input type="email" class="form-control" id="username" placeholder="请输入用户名"> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" class="form-control" id="password" placeholder="请输入密码"> </div> <div class="checkbox"> <label> <input type="checkbox"> 记住密码 </label> </div> <button type="submit" class="btn btn-success">提交</button> </form> </div> </div> <script src="jQuery/js/jquery.js"></script> </body> </html>
表格的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> </head> <body> <div class="container"> <div class="thumbnail"> <table class="table table-striped table-bordered table-hover"> <tr class="success"> <th>id</th> <th>name</th> <th>age</th> </tr> <tr class="danger"> <td>1</td> <td>ivy</td> <td>18</td> </tr> <tr class="info"> <td>2</td> <td>yvette</td> <td>19</td> </tr> </table> </div> </div> <script src="jQuery/js/jquery.js"></script> </body> </html>
二. 组件
组件是由一个html，一个css, 一个js组成的一个部分
Glyphicons 字体图标，不能和其它类一起，只能单独使用，可以通过span标签
下拉菜单例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> </head> <body> <div class="container"> <div class="thumbnail"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <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> </div> </div> </div> <script src="jQuery/js/jquery.js"></script> <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script> </body> </html>
未完待续.............