目录：
全局样式
一、栅格系统
二、表单
三、按钮
四、导航
五、按钮组
六、面板
七、表格
八、分页
九、排版
十、图片
十一、辅助类
十二、响应式工具
组件
内容：
前言：
首先通过https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css 链接下载bootstrap.min.css保存到本地，然后执行下面操作
全局样式：
一、栅格系统
栅格系统是页面布局使用，是区分列布局使用的，一般bootstrap将整个页面分为12份，可以任意组合自己想要的列分割方式，在div标签中使用col-XX的方式来实现，该方式有几种方法：
- col-md-XX 其中md表示中等距离，XX表示一共分几分，例如，四个div标签，如果想并排且等分，可以使用class=‘col-md-3’来实现
- col-sm-XX sm表示小，XX同上
- col-xs-XX xs表示极小，XX同上
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap.min.css"> </head> <body> col代表列的意思，md表示样式，默认分成12分，4代表三个元素每个占3分之一 <div class="col-md-3">Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。 继续阅读下面的内容，看看哪种方式适合你的需求吧。</div> <div class="col-md-3">Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。 继续阅读下面的内容，看看哪种方式适合你的需求吧。</div> <div class="col-md-3">Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。 继续阅读下面的内容，看看哪种方式适合你的需求吧。</div> <div class="col-md-3">Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。 继续阅读下面的内容，看看哪种方式适合你的需求吧。</div> <!--小使用sm--> <div class="col-sm-3">Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。 继续阅读下面的内容，看看哪种方式适合你的需求吧。</div> <div class="col-sm-3">Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。 继续阅读下面的内容，看看哪种方式适合你的需求吧。</div> <div class="col-sm-3">Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。 继续阅读下面的内容，看看哪种方式适合你的需求吧。</div> <div class="col-sm-3">Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。 继续阅读下面的内容，看看哪种方式适合你的需求吧。</div> #布局实例，左面和右面是两份，中间是8份,一共12份 <div class="col-sm-2"> <h3>主侧栏</h3> Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。 继续阅读下面的内容，看看哪种方式适合你的需求吧。</div> <div class="col-sm-8"> <h3>内容</h3> Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。 继续阅读下面的内容，看看哪种方式适合你的需求吧。</div> <div class="col-sm-2"> <h3>右侧栏</h3> Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。 继续阅读下面的内容，看看哪种方式适合你的需求吧。</div> </body> </html>
二、表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> </head> <body> <form class="container container-small"> <div class="form-inline"> <h1>注册</h1> <div class="form-group has-error"> <label class="control-label">姓</label> <input type="text" class="form-control input-lg"> </div> <div class="form-group has-success"> <label class="control-label">名</label> <input type="text" class="form-control"> </div> </div> <div class="form-group "> <label class="control-label">充值金额</label> <div class="input-group"> <div class="input-group-addon input-sm">￥</div> <input type="text" class="form-control"></div> </div> <div class="form-group"> <label>Other</label> <select class="form-control "> <option value="1">双刀</option> <option value="2">山丹</option> <option value="3">贝贝</option> </select> </div> <div class="row"> <div class="col-md-4 "> <input type="text" class="form-control"> </div> <div class="col-md-4 "> <input type="text" class="form-control"> </div> <div class="col-md-4 "> <input type="text" class="form-control"> </div> <div class="form-group"> <input type="submit" class="form-control"> </div> </div> </form> <!--textarea模式--> <form action="" class="container"> <div class="form-group"> <label for="">留言</label> <textarea name="" id="" cols="30" rows="10" class="form-control"></textarea> </div> <!--select模式--> <div class="form-group"> <select name="" id="" class="form-control"> <option value="">北京</option> <option value="">北京</option> <option value="">北京</option> </select> </div> <div class="form-group"> <label for="">选择题</label> <div class="radio"> <label > <input type="radio" name="aaa">篮球 </label> </div> <div class="radio"> <label > <input type="radio" name="aaa">篮球 </label> </div> <div class="radio"> <label > <input type="radio" name="aaa">篮球 </label> </div> </div> <div class="form-group"> <label for="">选择题</label> <div class="radio"> <label > <input type="checkbox" name="aaa"> 篮球 </label> </div> <div class="radio"> <label > <input type="checkbox" name="aaa"> 篮球 </label> </div> <div class="radio"> <label> <input type="checkbox" name="aaa"> 篮球 </label> </div> </div> </form> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> </head> <body> <div class="container"> <form action="" class="form-horizaontal"> <div class="form-group"> <label for="" class="col-sm-2 control-label">用户名：</label> <div class="col-sm-10"> <input type="text" class="form-control"> </div> </div> <br> <br> <div class="form-group"> <label for="" class="col-sm-2 control-label">密码：</label> <div class="col-sm-10"> <input type="text" class="form-control"> </div> </div> <br> <br> <div class="form-group"> <div class="col-sm-10 col-sm-offset-2"> <input value="ok" type="submit" class=" btn btn-primary"> <input value="reset" type="reset" class=" btn btn-danger"> </div> </div> </form> </div> </body> </html>
form-control能支持的控件：
1、input
2、textarea
如果支持多行，可以根据需要改变rows属性
<textarea class="form-control" rows=3></textarea>
3、select
单选多选放在同一行：
class="checkbox-inline"或 radio-inline
静态控件：
<form action="" class="form-horizaontal"> <div class="form-group"> <label for="" class="col-sm-2 control-label">用户名：</label> <div class="col-sm-10"> <p class="form-control-static">小金</p><!-- 通过form-control-static方式将值固定 --> </div> </div>
全部禁用表单
<!--如果要求全部禁用，可以使用fieldset来完成--> <form action="" class="form-horizaontal"> <fieldset disabled> <div class="form-group"> <label for="" class="col-sm-2 control-label">用户名：</label> <div class="col-sm-10"> <p class="form-control-static">小金</p><!-- 通过form-control-static方式将值固定 --> </div> </div> <br> <br> <div class="form-group"> <label for="" class="col-sm-2 control-label">密码：</label> <div class="col-sm-10"> <input type="text" class="form-control"> </div> </div> <br> <br> <div class="form-group"> <div class="col-sm-10 col-sm-offset-2"> <input value="ok" type="submit" class=" btn btn-primary"> <input value="reset" type="reset" class=" btn btn-danger"> </div> </div> </form> </fieldset>
在表单内添加文字型图标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> </head> <body> <form action="" class="form-horizontal"> <!--如果要在表单内添加文字图片，可以使用has-feedback--> <div class="form-group has-success has-feedback"> <label for="" class="col-sm-2 control-label">用户名：</label> <div class="col-sm-10"> <input type="text" class="form-control"/> <!--在span内需要添加form-control-feedback--> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> </div> <div class="form-group has-error has-feedback"> <label for="" class="col-sm-2 control-label">密码：</label> <div class="col-sm-10"> <input type="text" class="form-control"/> <span class="glyphicon glyphicon glyphicon-remove form-control-feedback"></span> </div> </div> <div class="form-group"> <div class="col-sm-10 col-sm-offset-2"> <input value="ok" type="submit" class=" btn btn-primary"> <input value="reset" type="reset" class=" btn btn-danger"> </div> </div> </form> </body> </html>
添加帮助信息
<form action="" class="form-horizontal"> <!--如果要在表单内添加文字图片，可以使用has-feedback--> <div class="form-group has-success has-feedback"> <label for="" class="col-sm-2 control-label">用户名：</label> <div class="col-sm-10"> <input type="text" class="form-control"/> <!--在span内需要添加form-control-feedback--> <span class="glyphicon glyphicon-ok form-control-feedback"></span> <!--help-block添加帮助信息--> <span class="help-block">glyphicon glyphicon-ok form-control-feedback</span> </div> </div>
三、按钮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap.min.css"> </head> <body> <!--well类就表示一个边距--> <div class="well"> <!--btn方式可以让按钮的四个角变圆滑，后面的btn-default是按钮的样式--> <button class="btn btn-default">戳我</button> <button class="btn btn-primary">戳我</button> <button class="btn btn-danger">戳我</button> <button class="btn btn-warning">戳我</button> <button class="btn btn-info">戳我</button> <!--可以对链接也加上btn和btn-XX样式，可以使超链接变成想要的样式--> <a href="http://www.baidu.com" class="btn btn-danger">断网测试</a> <input type="submit" class="btn btn-primary" value="戳我"/> <hr> <!--通过btn-lg来扩大按钮大小，btn-sm表示小，btn-xs表示极小--> <button class="btn btn-default btn-lg">戳我</button> <button class="btn btn-default ">戳我</button> <button class="btn btn-primary btn-sm">戳我</button> <button class="btn btn-danger btn-xs">戳我</button> <hr> <!--btn-block大小占据母元素整个边界--> <button class="btn btn-block">戳我</button> <hr> <!--active表示选中 disabled=disabled表示禁用--> <button class="btn btn-default active">戳我</button> <button class="btn btn-default ">戳我</button> <button disabled="disabled" class="btn btn-default ">戳我</button> </div> </body> </html>
四、导航
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/boostrap.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <ul class="nav nav-tabs nav-justified"> <!--横排显示 平均分布--> <li class="active"><a href="#">登录</a></li> <li><a href="#">注册</a></li> <li><a href="#">忘记密码</a></li> </ul> <div> <h1>登录</h1> XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXx </div> <br> <ul class="nav nav-pills nav-stacked "> <li class="active"><a href="#">登录</a></li> <li><a href="#">注册</a></li> <li><a href="#">忘记密码</a></li> </ul> <div> <h1>登录</h1> XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXx </div> <br> <!--侧栏显示--> <div class="row"> <div class="col-xs-4"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">登录</a></li> <li><a href="#">注册</a></li> <li><a href="#">忘记密码</a></li> </ul> </div> <div class="col-xs-8"> <h1>登录</h1> XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/boostrap.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="navbar navbar-default"> <!--container来约束内容的位置--> <div class="container"> <div class="navbar-header"> <!--标题logo使用navabar-brand来显示，表示一个连接--> <a href="#" class="navbar-brand">修大花</a> </div> <ul class="nav navbar-nav"> <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">联系我们</a></li> </ul> <!--添加搜索栏，navbar-left要求向左浮动--> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control"> </div> <button type="submit" class="btn btn-default">搜索</button> </form> <!--navbar-right表示靠后浮动--> <ul class="nav navbar-nav navbar-right"> <li><a href="#">登录</a></li> <li><a href="#">注册</a></li> </ul> </div> </div> <div class="container"> XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div> </body> </html>
五、按钮组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/boostrap.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="well"> <!--btn-toolbar将btn组分组--> <div class=" btn-toolbar"> <!--三个按钮连接在一起，形成控制按钮组--> <div class=" btn-group btn-group-lg"> <button class="btn btn-default">点击</button> <button class="btn btn-default">点击</button> <button class="btn btn-default">点击</button> </div> <div class=" btn-group "> <button class="btn btn-default">点击</button> <button class="btn btn-default">点击</button> <button class="btn btn-default">点击</button> </div> <div class=" btn-group btn-group-sm"> <button class="btn btn-default">点击</button> <button class="btn btn-default">点击</button> <button class="btn btn-default">点击</button> </div> <div class=" btn-group btn-group-xs"> <button class="btn btn-default">点击</button> <button class="btn btn-default">点击</button> <button class="btn btn-default">点击</button> </div> <br> <!--横向--> <div class=" btn-group-vertical"> <button class="btn btn-default">点击</button> <button class="btn btn-default">点击</button> <button class="btn btn-default">点击</button> </div> </div> </div> </body> </html>
六、面板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/boostrap.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <!--这个例子需要结合main.css里的body{max-400px； padding： 20px auto}--> <div class="panel panel-default"> <div class="panel-heading"> <!--title表示更醒目--> <div class="panel-title"> 用户统计 </div> <div class="small text-muted">每日用户统计</div> </div> <div class="panel-body"> XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div> <div class="panel-footer"> <!--底部描述要求字符小，而且类似于禁用模式--> <div class="small text-muted">数据更新于5秒前</div> </div> </div> <div class="panel panel-success"> <div class="panel-heading"> <!--title表示更醒目--> <div class="panel-title"> 用户统计 </div> <div class="small text-muted">每日用户统计</div> </div> <div class="panel-body"> XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div> <div class="panel-footer"> <!--底部描述要求字符小，而且类似于禁用模式--> <div class="small text-muted">数据更新于5秒前</div> </div> </div> <div class="panel panel-warning"> <div class="panel-heading"> <!--title表示更醒目--> <div class="panel-title"> 用户统计 </div> <div class="small text-muted">每日用户统计</div> </div> <div class="panel-body"> XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div> <div class="panel-footer"> <!--底部描述要求字符小，而且类似于禁用模式--> <div class="small text-muted">数据更新于5秒前</div> </div> </div> <div class="panel panel-danger"> <div class="panel-heading"> <!--title表示更醒目--> <div class="panel-title"> 用户统计 </div> <div class="small text-muted">每日用户统计</div> </div> <div class="panel-body"> XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div> <div class="panel-footer"> <!--底部描述要求字符小，而且类似于禁用模式--> <div class="small text-muted">数据更新于5秒前</div> </div> </div> </body> </html>
七、表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/boostrap.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <table class="table"> <thead> <tr> <th>姓名</th> <th>邮箱</th> <th>注册于</th> </tr> </thead> <tbody> <tr> <td>修大花</td> <td>xdh@163.com</td> <td>2048-10-04</td> </tr> <tr> <td>大大大</td> <td>ddd@163.com</td> <td>2048-10-03</td> </tr> <tr> <td>小小小</td> <td>sss@163.com</td> <td>2048-09-03</td> </tr> </tbody> </table> <!--单复数行显示不同加table-striped--> <table class="table table-striped"> <thead> <tr> <th>姓名</th> <th>邮箱</th> <th>注册于</th> </tr> </thead> <tbody> <tr> <td>修大花</td> <td>xdh@163.com</td> <td>2048-10-04</td> </tr> <tr> <td>大大大</td> <td>ddd@163.com</td> <td>2048-10-03</td> </tr> <tr> <td>小小小</td> <td>sss@163.com</td> <td>2048-09-03</td> </tr> </tbody> </table> <!--table-hover在鼠标划上去的时候会有着重显示--> <table class="table table-hover"> <thead> <tr> <th>姓名</th> <th>邮箱</th> <th>注册于</th> </tr> </thead> <tbody> <tr> <td>修大花</td> <td>xdh@163.com</td> <td>2048-10-04</td> </tr> <tr> <td>大大大</td> <td>ddd@163.com</td> <td>2048-10-03</td> </tr> <tr> <td>小小小</td> <td>sss@163.com</td> <td>2048-09-03</td> </tr> </tbody> </table> <!--加边框用table-bordered--> <table class="table table-bordered"> <thead> <tr> <th>姓名</th> <th>邮箱</th> <th>注册于</th> </tr> </thead> <tbody> <tr> <td>修大花</td> <td>xdh@163.com</td> <td>2048-10-04</td> </tr> <tr> <td>大大大</td> <td>ddd@163.com</td> <td>2048-10-03</td> </tr> <tr> <td>小小小</td> <td>sss@163.com</td> <td>2048-09-03</td> </tr> </tbody> </table> <!--对于特殊用户特殊对待，用danger，warning、success，info--> <table class="table table-striped"> <thead> <tr> <th>姓名</th> <th>邮箱</th> <th>注册于</th> </tr> </thead> <tbody> <tr class="danger"> <td>修大花</td> <td>xdh@163.com</td> <td>2048-10-04</td> </tr> <tr class="success"> <td>大大大</td> <td>ddd@163.com</td> <td>2048-10-03</td> </tr> <tr class="warning"> <td>小小小</td> <td>sss@163.com</td> <td>2048-09-03</td> </tr> </tbody> </table> <!--响应式表格,需要列多才可以撑开--> <div class="container"> <div class="table-responsive"> <table class="table "> <tr> <th>姓名</th> <th>邮箱</th> <th>注册于</th> <th>注册于</th> <th>注册于</th> <th>注册于</th> <th>注册于</th> <th>注册于</th> <th>注册于</th> <th>注册于</th> <th>注册于</th> <th>注册于</th> <th>注册于</th> <th>注册于</th> </tr> <tr class="danger"> <td>修大花</td> <td>xdh@163.com</td> <td>2048-10-04</td> <td>2048-10-04</td> <td>2048-10-04</td> <td>2048-10-04</td> <td>2048-10-04</td> <td>2048-10-04</td> <td>2048-10-04</td> <td>2048-10-04</td> <td>2048-10-04</td> <td>2048-10-04</td> </tr> <tr class="success"> <td>大大大</td> <td>ddd@163.com</td> <td>2048-10-03</td> <td>2048-10-03</td> <td>2048-10-03</td> <td>2048-10-03</td> <td>2048-10-03</td> <td>2048-10-03</td> <td>2048-10-03</td> </tr> <tr class="warning"> <td>小小小</td> <td>sss@163.com</td> <td>2048-09-03</td> <td>2048-09-03</td> <td>2048-09-03</td> <td>2048-09-03</td> <td>2048-09-03</td> <td>2048-09-03</td> <td>2048-09-03</td> <td>2048-09-03</td> <td>2048-09-03</td> <td>2048-09-03</td> <td>2048-09-03</td> </tr> </table> </div> </div> </body> </html>
八、分页
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/boostrap.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <div> <!--alert提醒--> <div class="alert alert-danger">嗯</div> <div class="alert alert-success">嗯</div> </div> <div class="breadcrumb"> <li><a href="#">首页</a></li> <li><a href="#">文字列表</a></li> <!--在下面添加徽章，表示有多少阅读量--> <li class="active">文字地址<span class="badge ">50k</span></li> </div> <h1>Yo, world</h1> <p> <!--显示副标题--> <div class="label label-success">面霜</div> <div class="label label-danger">water baby</div> <div class="label label-warning">http</div> </p> <div> ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<span class="label label-success">ZZZZZ</span>ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ </div> <button class="btn btn-primary">赞 <span class="badge"> 50</span></button> <div> <!--投票列表--> <div class="list-group"> <a href="" class="list-group-item">item</a> <a href="" class="list-group-item">item</a> <a href="" class="list-group-item">item</a> <a href="" class="list-group-item">item</a> <a href="" class="list-group-item">item</a> </div> </div> <div> <ul class="pagination"> <!--当前页--> <li class="active"><a href="#">上一页</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">下一页</a></li> </ul> <ul class="pager"> <li><a href="#">上一页</a></li> <!--disabled表示禁用--> <li class="disabled"><a href="#">下一页</a></li> </ul> </div> </body> </html>
九、排版
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/boostrap.css"> <link rel="stylesheet" href="css/main.css"> <script src="css/jquery.js"></script> <scrtipt src="css/bootstrap.js"></scrtipt> </head> <body> <div class="container"> <h1 class="page-header">Bootstrap前端框架</h1> <!--kbd显示为黑色背景--> <p>linux is <kbd> ctrl+shift</kbd> very muck!</p> <!--var显示为斜体--> <p>linux is <var> ctrl+shift</var> very muck!</p> </div> </body> </html>
十、图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/boostrap.css"> <link rel="stylesheet" href="css/main.css"> <script src="css/jquery.js"></script> <scrtipt src="css/bootstrap.js"></scrtipt> </head> <body> <div class="container"> <h1>Bootstrap图片</h1> <div> <!--正方形，四个角带弧度--> <img src="css/tu.jpg" width="200px" class="img-rounded"> <!--变为圆形--> <img src="css/tu.jpg" width="200px" class="img-circle"> <!--修改背景为白色--> <img src="css/tu.jpg" width="200px" class="img-thumbnail"> </div> </div> </body> </html>
十一、辅助类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/boostrap.css"> <link rel="stylesheet" href="css/main.css"> <script src="css/jquery.js"></script> <scrtipt src="css/bootstrap.js"></scrtipt> </head> <body> <!--文本颜色--> <p class="text-muted">Liunx is very much</p> <p class="text-success">Liunx is very much</p> <p class="text-danger">Liunx is very much</p> <p class="text-warning">Liunx is very much</p> <p class="text-info">Liunx is very much</p> <p class="text-primary">Liunx is very much</p> <!--背景颜色--> <p class="bg-danger">Liunx is very much</p> <p class="bg-warning">Liunx is very much</p> <p class="bg-info">Liunx is very much</p> <p class="bg-primary">Liunx is very much</p> <!--对该段添加关闭按钮通过class=close添加--> <p class="bg-primary">Liunx is very much <span class="close">×</span></p> <!--添加小三角--> <!--向右浮动 pull-right pull-left向左浮动 clearfix清除浮动--> <h2 class="bg-primary">Liunx is very much <button class="btn btn-primary pull-right">更多 <span class="caret"></span></button></h2> <!--块标签居中也就是margin：0 auto--> <p class="text-info center-block">Liunx is very much</p> <!--hide和show是显示和隐藏--> <p class="text-info hide">Liunx is very muchabc</p> <p class="text-info show">Liunx is very muchaaaaa</p> </body> </html>
十二、响应式工具
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/boostrap.css"> <link rel="stylesheet" href="css/main.css"> <script src="css/jquery.js"></script> <scrtipt src="css/bootstrap.js"></scrtipt> </head> <body> <div class="container"> <h1>Bootstrap响应式工具</h1> <div> img-responsive响应式图片 <img src="css/tu.jpg" class="img-rounded img-responsive"> </div> </div> </body> </html>
组件
一、图标字体
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <scrtipt src="../bootstrap/js/bootstrap.js"></scrtipt> </head> <body> <p><span class="glyphicon glyphicon-euro"></span>Linux is very much</p> <p><span class="glyphicon glyphicon-asterisk"></span>Linux is very much</p> <button class="btn btn-primary">更多<span class="glyphicon glyphicon-triangle-left"></span></button> <button class="btn btn-primary">更多<span class="glyphicon glyphicon-triangle-right"></span></button> <button class="btn btn-primary">更多<span class="glyphicon glyphicon-triangle-bottom"></span></button> <button class="btn btn-primary">更多<span class="glyphicon glyphicon-triangle-top"></span></button> </body> </html>
二、下拉菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> </head> <body> <div class="dropdown"> <button class="btn btn-primary" data-toggle="dropdown">更多课程 <span class="glyphicon glyphicon-triangle-bottom"></span></button> <ul class="dropdown-menu"> <li><a href="">aaaa</a></li> <li><a href="">aaaa</a></li> <li><a href="">aaaa</a></li> <li><a href="">aaaa</a></li> <li><a href="">aaaa</a></li> </ul> </div> <!--在下拉菜单中通过dropdown-header添加标题，通过divider分割事项--> <div class="dropdown "> <button class="btn btn-primary" data-toggle="dropdown">更多课程 <span class="glyphicon glyphicon-triangle-bottom"></span></button> <ul class="dropdown-menu "> <li class="dropdown-header">周一事项</li> <li><a href="">aaaa</a></li> <li><a href="">aaaa</a></li> <li><a href="">aaaa</a></li> <li class="divider"></li> <li class="dropdown-header">周二事项</li> <li><a href="">aaaa</a></li> <li><a href="">aaaa</a></li> </ul> </div> <div class="dropdown pull-right"> <button class="btn btn-primary" data-toggle="dropdown">更多课程 <span class="glyphicon glyphicon-triangle-bottom"></span></button> <ul class="dropdown-menu dropdown-menu-right"> <li class="dropdown-header">周一事项</li> <li><a href="">aaaa</a></li> <li><a href="">aaaa</a></li> <li><a href="">aaaa</a></li> <li class="divider"></li> <li class="dropdown-header">周二事项</li> <li><a href="">aaaa</a></li> <li><a href="">aaaa</a></li> </ul> </div> </div> </body> </html>
三、按钮组
1、普通按钮组、按钮工具箱
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <scrtipt src="../bootstrap/js/bootstrap.js"></scrtipt> </head> <body> <div class="container"> <div class="btn-toolbar"> <div class="btn-group"> <button class="btn btn-primary">百度</button> <button class="btn btn-danger">百度</button> <button class="btn btn-info">百度</button> <button class="btn btn-warning">百度</button> </div> <div class="btn-group"> <button class="btn btn-primary">百度</button> <button class="btn btn-danger">百度</button> <button class="btn btn-info">百度</button> <button class="btn btn-warning">百度</button> </div> <div class="btn-group"> <button class="btn btn-primary">百度</button> <button class="btn btn-danger">百度</button> <button class="btn btn-info">百度</button> <button class="btn btn-warning">百度</button> </div> </div> </div> </body> </html>
2、按钮组尺寸
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <scrtipt src="../bootstrap/js/bootstrap.js"></scrtipt> </head> <body> <div class="container"> <div class="btn-toolbar"> <div class="btn-group btn-group-lg"> <button class="btn btn-primary">百度</button> <button class="btn btn-danger">百度</button> <button class="btn btn-info">百度</button> <button class="btn btn-warning">百度</button> </div> <div class="btn-group btn-group-sm"> <button class="btn btn-primary">百度</button> <button class="btn btn-danger">百度</button> <button class="btn btn-info">百度</button> <button class="btn btn-warning">百度</button> </div> <div class="btn-group btn-group-xs"> <button class="btn btn-primary">百度</button> <button class="btn btn-danger">百度</button> <button class="btn btn-info">百度</button> <button class="btn btn-warning">百度</button> </div> </div> </div> </body> </html>
3、嵌套
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> </head> <body> <div class="container"> <div class="btn-group"> <button class="btn btn-primary">百度</button> <button class="btn btn-danger">百度</button> <div class="btn-group dropdown"> <!--保证下拉菜单也是带圆弧的，需要添加drop-toggle的class属性--> <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">百度 <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">aaa</a></li> <li><a href="#">aaa</a></li> <li><a href="#">aaa</a></li> <li><a href="#">aaa</a></li> </ul> </div> </div> </div> </div> </body> </html>
4、垂直排列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> </head> <body> <div class="container"> <!--添加btn-group-vertical垂直排列--> <div class="btn-group btn-group-vertical"> <button class="btn btn-primary">百度</button> <button class="btn btn-danger">百度</button> <div class="btn-group dropdown"> <!--保证下拉菜单也是带圆弧的，需要添加drop-toggle的class属性--> <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">百度 <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">aaa</a></li> <li><a href="#">aaa</a></li> <li><a href="#">aaa</a></li> <li><a href="#">aaa</a></li> </ul> </div> </div> </div> </div> </body> </html>
5、两端对齐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> </head> <body> <div class="container"> <div class="btn-group btn-group-justified"> <div class="btn-group"> <button class="btn btn-primary">百度</button> </div> <div class="btn-group"> <button class="btn btn-primary">百度</button> </div> <div class="btn-group"> <button class="btn btn-primary">百度</button> </div> </div> </div> </body> </html>
6、分列式下拉菜单
<!-- Split button --> <div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <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> </div>
四、输入框旁边添加额外的样式符号
<form action="" > <!--input-group下输入input-group-addon的模式来显示--> <div class="input-group input-group-lg"> <div class="input-group-addon">$</div> <input type="text" class="form-control"> <div class="input-group-addon">.00</div> </div> <div class="input-group input-group-sm"> <div class="input-group-addon">$</div> <input type="text" class="form-control"> <div class="input-group-addon">.00</div> </div> <div class="input-group "> <div class="input-group-addon">$</div> <input type="text" class="form-control"> <div class="input-group-addon">.00</div> </div> </form>
五、作为额外元素的按键
<form action="" > <!--添加额外的元素按钮--> <div class="input-group "> <div class="input-group-btn"> <input type="button" class="btn btn-primary" value="GO"> </div> <input type="text" class="form-control"> <div class="input-group-btn"> <input type="button" class="btn btn-primary" value="GO"> </div> </div> </form>
六、导航
1、标签页式导航
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> <style> .row{ padding: 15px 15px; display: none; } </style> </head> <body> <div class="container"> <h1 class="page-header">Bootstrap</h1> <ul class="nav nav-tabs"> <li class=""> <a href="">Linux</a> </li> <li class=""> <a href="">Linux</a> </li> <li class=""> <a href="">Linux</a> </li> </ul> <div class="row"> <p>linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much </p> </div> <div class="row"> <p>php is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much </p> </div> <div class="row"> <p>java is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much </p> </div> </div> <script> $('li').mouseenter(function () { $(this).addClass('active'); $('li').not($(this)).removeClass('active'); idx = $(this).index('li'); $('.row').eq(idx).show(); $('.row').not($('.row').eq(idx)).hide(); }); $('.row').eq(0).show(); </script> </body> </html>
2、胶囊式导航
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> <style> .row{ padding: 15px 15px; display: none; } </style> </head> <body> <div class="container"> <h1 class="page-header">Bootstrap</h1> <!--nav-pills表示胶囊式导航索引--> <ul class="nav nav-pills"> <li class=""> <a href="">Linux</a> </li> <li class=""> <a href="">Linux</a> </li> <li class=""> <a href="">Linux</a> </li> </ul> <div class="row"> <p>linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much </p> </div> <div class="row"> <p>php is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much </p> </div> <div class="row"> <p>java is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much </p> </div> </div> <script> $('li').mouseenter(function () { $(this).addClass('active'); $('li').not($(this)).removeClass('active'); idx = $(this).index('li'); $('.row').eq(idx).show(); $('.row').not($('.row').eq(idx)).hide(); }); $('.row').eq(0).show(); </script> </body> </html>
3、竖排胶囊方式导航
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> <style> .navs { padding: 15px 0; display: none; } </style> </head> <body> <div class="container"> <h1 class="page-header">Bootstrap</h1> <!--nav-pills表示胶囊式导航索引,nav-stacked表示 侧栏堆叠，同时引入col-md方式水平排列--> <div class="row"> <div class="col-md-2"> <ul class="nav nav-pills nav-stacked"> <li class=""> <a href="">Linux</a> </li> <li class=""> <a href="">Linux</a> </li> <li class=""> <a href="">Linux</a> </li> </ul> </div> <div class="col-md-10"> <div class="navs"> <p>linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much </p> </div> <div class="navs"> <p>php is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much </p> </div> <div class="navs"> <p>java is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much </p> </div> </div> </div> </div> <script> $('li').mouseenter(function () { $(this).addClass('active'); $('li').not($(this)).removeClass('active'); idx = $(this).index('li'); $('.navs').eq(idx).stop().show(1000); $('.navs').not($('.navs').eq(idx)).stop().hide(100); }); $('.navs').eq(0).show(100); </script> </body> </html>
七、导航条
1、基础导航条
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> <style> </style> </head> <body> <div class="container" <h1 class="page-header">Bootstap</h1> <nav class="navbar navbar-default"> <div class="navbar-header"> <a href="" class="navbar-brand">Bootstrap</a> <button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="mynavbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="">起步</a></li> <li><a href="">全局CSS样式</a></li> <li><a href="">组件</a></li> <li><a href="">JavaScript插件</a></li> <li><a href="">定制</a></li> <li><a href="">网站实例</a></li> </ul> <form class="navbar-form navbar-left"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-btn"> <input type="button" class="btn btn-default" value="GO"> </div> </div> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="">Bootstrap网站</a></li> </ul> </div> </nav> </div> <script> </script> </body> </html>
2、inverse反色导航条
<nav class="navbar navbar-inverse"> <div class="navbar-header"> <a href="" class="navbar-brand">Bootstrap</a> <button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="mynavbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="">起步</a></li> <li><a href="">全局CSS样式</a></li> <li><a href="">组件</a></li> <li><a href="">JavaScript插件</a></li> <li><a href="">定制</a></li> <li><a href="">网站实例</a></li> </ul> <form class="navbar-form navbar-left"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-btn"> <input type="button" class="btn btn-default" value="GO"> </div> </div> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="">Bootstrap网站</a></li> </ul> </div> </nav>
3、导航条中直接button搜索而没有input框使用navbar-btn
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> <style> </style> </head> <body> <div class="container" <h1 class="page-header">Bootstap</h1> <nav class="navbar navbar-default"> <div class="navbar-header"> <a href="" class="navbar-brand">Bootstrap</a> <button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="mynavbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="">起步</a></li> <li><a href="">全局CSS样式</a></li> <li><a href="">组件</a></li> <li><a href="">JavaScript插件</a></li> <li><a href="">定制</a></li> <li><a href="">网站实例</a></li> </ul> <form class="navbar-form navbar-left"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-btn"> <input type="button" class="btn btn-default" value="GO"> </div> </div> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="">Bootstrap网站</a></li> </ul> </div> </nav> <!--inverse代表反色--> <nav class="navbar navbar-inverse"> <div class="navbar-header"> <a href="" class="navbar-brand">Bootstrap</a> <button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="mynavbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="">起步</a></li> <li><a href="">全局CSS样式</a></li> <li><a href="">组件</a></li> <li><a href="">JavaScript插件</a></li> <li><a href="">定制</a></li> <li><a href="">网站实例</a></li> </ul> <form class="navbar-form navbar-left"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-btn"> <input type="button" class="btn btn-default" value="GO"> </div> </div> </form> <!--导航条中直接放按钮而没有input输入，使用navbar-btn--> <input type="button" class="btn btn-default navbar-btn" value="搜索"> <ul class="nav navbar-nav navbar-right"> <li><a href="">Bootstrap网站</a></li> </ul> </div> </nav> </div> <script> </script> </div></body> </html>
4、在导航条内放文字使用navbar-text
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> <style> </style> </head> <body> <div class="container" <h1 class="page-header">Bootstap</h1> <nav class="navbar navbar-default"> <div class="navbar-header"> <a href="" class="navbar-brand">Bootstrap</a> <button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="mynavbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="">起步</a></li> <li><a href="">全局CSS样式</a></li> <li><a href="">组件</a></li> <li><a href="">JavaScript插件</a></li> <li><a href="">定制</a></li> <li><a href="">网站实例</a></li> </ul> <form class="navbar-form navbar-left"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-btn"> <input type="button" class="btn btn-default" value="GO"> </div> </div> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="">Bootstrap网站</a></li> </ul> </div> </nav> <!--inverse代表反色--> <nav class="navbar navbar-inverse"> <div class="navbar-header"> <a href="" class="navbar-brand">Bootstrap</a> <button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="mynavbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="">起步</a></li> <li><a href="">全局CSS样式</a></li> <li><a href="">组件</a></li> <li><a href="">JavaScript插件</a></li> <li><a href="">定制</a></li> <li><a href="">网站实例</a></li> </ul> <form class="navbar-form navbar-left"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-btn"> <input type="button" class="btn btn-default" value="GO"> </div> </div> </form> <!--导航条中直接放按钮而没有input输入，使用navbar-btn--> <input type="button" class="btn btn-default navbar-btn" value="搜索"> <!--在导航条内放文字使用navbar-text--> <p class="navbar-text">小小网站</p> <ul class="nav navbar-nav navbar-right"> <li><a href="">Bootstrap网站</a></li> </ul> </div> </nav> </div> <script> </script> </div></div></div></body> </html>
5、导航条中的链接，使用navbar-link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> <style> </style> </head> <body> <div class="container" <h1 class="page-header">Bootstap</h1> <nav class="navbar navbar-default"> <div class="navbar-header"> <a href="" class="navbar-brand">Bootstrap</a> <button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="mynavbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="">起步</a></li> <li><a href="">全局CSS样式</a></li> <li><a href="">组件</a></li> <li><a href="">JavaScript插件</a></li> <li><a href="">定制</a></li> <li><a href="">网站实例</a></li> </ul> <form class="navbar-form navbar-left"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-btn"> <input type="button" class="btn btn-default" value="GO"> </div> </div> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="">Bootstrap网站</a></li> </ul> </div> </nav> <!--inverse代表反色--> <nav class="navbar navbar-inverse"> <div class="navbar-header"> <a href="" class="navbar-brand">Bootstrap</a> <button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="mynavbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="">起步</a></li> <li><a href="">全局CSS样式</a></li> <li><a href="">组件</a></li> <li><a href="">JavaScript插件</a></li> <li><a href="">定制</a></li> <li><a href="">网站实例</a></li> </ul> <form class="navbar-form navbar-left"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-btn"> <input type="button" class="btn btn-default" value="GO"> </div> </div> </form> <!--导航条中直接放按钮而没有input输入，使用navbar-btn--> <input type="button" class="btn btn-default navbar-btn" value="搜索"> <!--在导航条内放文字使用navbar-text--> <!--导航条中的链接，使用navbar-link--> <p class="navbar-text">小小<a href="" class="navbar-link">网站</a></p> <ul class="nav navbar-nav navbar-right"> <li><a href="">Bootstrap网站</a></li> </ul> </div> </nav> </div> <script> </script> </div></div></div></body> </html>
6、固定在顶部使用nav内的navbar-fixed-top,底部使用navbar-fixed-bottom
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> <style> </style> </head> <body> <div class="container" <h1 class="page-header">Bootstap</h1> <!--固定在顶部使用nav内的navbar-fixed-top--> <nav class="navbar navbar-default navbar-fixed-top"> <div class="navbar-header"> <a href="" class="navbar-brand">Bootstrap</a> <button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="mynavbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="">起步</a></li> <li><a href="">全局CSS样式</a></li> <li><a href="">组件</a></li> <li><a href="">JavaScript插件</a></li> <li><a href="">定制</a></li> <li><a href="">网站实例</a></li> </ul> <form class="navbar-form navbar-left"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-btn"> <input type="button" class="btn btn-default" value="GO"> </div> </div> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="">Bootstrap网站</a></li> </ul> </div> </nav> <!--inverse代表反色--> <nav class="navbar navbar-inverse "> <div class="navbar-header"> <a href="" class="navbar-brand">Bootstrap</a> <button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="mynavbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="">起步</a></li> <li><a href="">全局CSS样式</a></li> <li><a href="">组件</a></li> <li><a href="">JavaScript插件</a></li> <li><a href="">定制</a></li> <li><a href="">网站实例</a></li> </ul> <form class="navbar-form navbar-left"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-btn"> <input type="button" class="btn btn-default" value="GO"> </div> </div> </form> <!--导航条中直接放按钮而没有input输入，使用navbar-btn--> <input type="button" class="btn btn-default navbar-btn" value="搜索"> <!--在导航条内放文字使用navbar-text--> <!--导航条中的链接，使用navbar-link--> <p class="navbar-text">小小<a href="" class="navbar-link">网站</a></p> <ul class="nav navbar-nav navbar-right"> <li><a href="">Bootstrap网站</a></li> </ul> </div> </nav> </div> <script> </script> </div></div></div></body> </html>
7、路径导航
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> <style> </style> </head> <body> <div class="container"> <h1 class="page-header">Bootstap</h1> <!--路径导航使用breadcrumb--> <ol class="breadcrumb"> <li><a href="">Linux</a></li> <li><a href="">Linux</a></li> <li class="active">Linux</li> </ol> <script> </script> </div></div></div></body> </html>
八、分页
1、基础分页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> <style> </style> </head> <body> <div class="container"> <h1 class="page-header">Bootstap</h1> <!--路径导航使用breadcrumb--> <ol class="breadcrumb"> <li><a href="">Linux</a></li> <li><a href="">Linux</a></li> <li class="active">Linux</li> </ol> <ul class="pagination"> <li><a href="">«</a></li> <li><a href="">1</a></li> <li><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="">»</a></li> </ul> <script> </script> </div></div></div></body> </html>
2、激活与禁用，普通上下页，两端对齐的上下页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> <style> </style> </head> <body> <div class="container"> <h1 class="page-header">Bootstap</h1> <!--路径导航使用breadcrumb--> <ol class="breadcrumb"> <li><a href="">Linux</a></li> <li><a href="">Linux</a></li> <li class="active">Linux</li> </ol> <ul class="pagination"> <li><a href="">«</a></li> <li><a href="">1</a></li> <li><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="">»</a></li> </ul> <ul class="pagination"> <li class="active"><a href="">«</a></li> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> <li class="disabled"><a href="">»</a></li> </ul> <br> <!--尺寸使用pagination-lg和sm表示--> <ul class="pagination pagination-lg"> <li><a href="">«</a></li> <li><a href="">1</a></li> <li><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="">»</a></li> </ul> <br> <ul class="pagination pagination-sm"> <li><a href="">«</a></li> <li><a href="">1</a></li> <li><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="">»</a></li> </ul> <br> <ul class="pagination"> <li><a href="">«</a></li> <li><a href="">1</a></li> <li><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="">»</a></li> </ul> <br> <!--上下页--> <ul class="pager"> <li><a href="">Previous</a></li> <li><a href="">Next</a></li> </ul> <!--两端对齐 使用li中使用两个类表示--> <ul class="pager"> <li class="previous"><a href="">上一页</a></li> <li class="next"><a href="">上一页</a></li> </ul> <script> </script> </div></div></div></body> </html>
九、标签与徽章
<h1> linux is very much <span class="label label-danger">300</span></h1> <h1> linux is very much <span class="badge">300</span></h1> <button class="btn btn-primary">Message <span class="badge">200</span></button>
十、巨幕
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> <style> </style> </head> <body> <div class="container"> <h1 class="page-header">Bootstap</h1> <div class="jumbotron"> <h1>演示</h1> <p> linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much </p> </div> <script> </script> </div> </body> </html>
十一、缩略图和自定义内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> <script src="../bootstrap/js/holder.js"></script> <style> </style> </head> <body> <div class="container"> <h1 class="page-header">Bootstap</h1> </div> <div class="container"> <div class="row"> <div class="col-md-3 "> <!--缩略图在a上添加thumbnail属性--> <a href="" class="thumbnail"> <img src="holder.js/100px200"> </a> </div> <div class="col-md-3 "> <a href="" class="thumbnail"> <img src="holder.js/100px200"> </a> </div> <div class="col-md-3 "> <a href="" class="thumbnail"> <img src="holder.js/100px200"> </a> </div> <div class="col-md-3 "> <a href="" class="thumbnail"> <img src="holder.js/100px200"> </a> </div> </div> <div class="row"> <div class="col-md-3"> <div class="thumbnail"> <img src="holder.js/100px200" alt=""> <div class="caption"> <h2>Linux 技术</h2> <p>Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much </p> <input type="button" class="btn btn-primary" value="OK"> <input type="button" class="btn btn-danger" value="Cancel"> </div> </div> </div> <div class="col-md-3"> <div class="thumbnail"> <img src="holder.js/100px200" alt=""> <div class="caption"> <h2>Linux 技术</h2> <p>Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much </p> <input type="button" class="btn btn-primary" value="OK"> <input type="button" class="btn btn-danger" value="Cancel"> </div> </div> </div> <div class="col-md-3"> <div class="thumbnail"> <img src="holder.js/100px200" alt=""> <div class="caption"> <h2>Linux 技术</h2> <p>Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much </p> <input type="button" class="btn btn-primary" value="OK"> <input type="button" class="btn btn-danger" value="Cancel"> </div> </div> </div> <div class="col-md-3"> <div class="thumbnail"> <img src="holder.js/100px200" alt=""> <div class="caption"> <h2>Linux 技术</h2> <p>Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much </p> <input type="button" class="btn btn-primary" value="OK"> <input type="button" class="btn btn-danger" value="Cancel"> </div> </div> </div> </div> </div> <script> </script> </body> </html>
十二、进度条
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> <script src="../bootstrap/js/holder.js"></script> <style> </style> </head> <body> <div class="container"> <h1 class="page-header">Bootstap</h1> <div class="alert alert-success"> <p> <!--data-dismiss里添加标记，原理是找到它父标签然后隐藏，就可以使关闭--> <span class="close" data-dismiss="alert">×</span> Linux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver much Linux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver much </p> </div> <div class="alert alert-danger"> <!--在a标签中添加alert-link属性可以变成链接--> <p><a href="#" class="alert-link">Linux is ver much</a>Linux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver much Linux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver much </p> </div> <div class="alert alert-warning"> <p>Linux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver much Linux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver much </p> </div> <div class="alert alert-info"> <p>Linux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver much Linux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver much </p> </div> </div> <script> </script> </body> </html>
十三、进度条
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> <script src="../bootstrap/js/holder.js"></script> <style> </style> </head> <body> <div class="container"> <h1 class="page-header">Bootstap</h1> <!--progress-bar progress代表进度条，progress-sucess代表颜色，style里加width代表进度，progress-bar-striped代表条纹--> <!--加active代表动画效果--> <div class="progress"> <div class="progress-bar progress-success progress-bar-striped active" style="90%">90%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped" style="50%">50%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped" style="30%">30%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning progress-bar-striped" style="10%">10%</div> </div> <!--多个叠加有堆叠效果--> <div class="progress"> <div class="progress-bar progress-bar-warning progress-bar-striped" style="10%">10%</div> <div class="progress-bar progress-bar-info progress-bar-striped" style="30%">30%</div> <div class="progress-bar progress-bar-danger progress-bar-striped" style="50%">50%</div> </div> <!--动态进度条--> <div class="progress"> <div id="a" class="progress-bar progress-success progress-bar-striped active" style="5%">0%</div> </div> </div> <script> s=0; v=2; sobj = setInterval(function () { s+=v; if(s>=100){ clearInterval(sobj); } $('#a').text(s+'%').css({'width':s+'%'}); },100) </script> </body> </html>
十四、媒体对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> <script src="../bootstrap/js/holder.js"></script> <style> </style> </head> <body> <div class="container"> <h1 class="page-header">Bootstap</h1> <div class="media"> <!--左评论 使用media-top可以头像和顶部对齐--> <div class="media-left media-top"> <div class="media-object"> <img src="holder.js/100x100" alt=""> </div> </div> <div class="media-body"> <div class="media-heading"> <h2>linux技术</h2> <p>linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much </p> </div> </div> <br> <!--头像与内容底部对齐--> <div class="media-left media-bottom"> <div class="media-object"> <img src="holder.js/100x100" alt=""> </div> </div> <div class="media-body"> <div class="media-heading"> <h2>linux技术</h2> <p>linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much </p> </div> </div> <br> <div class="media-left media-middle"> <div class="media-object"> <img src="holder.js/100x100" alt=""> </div> </div> <div class="media-body"> <div class="media-heading"> <h2>linux技术</h2> <p>linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much </p> </div> </div> <br> <div class="media-body"> <div class="media-heading"> <h2>linux技术</h2> <p>linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much</p> </div> </div> <!--右评论--> <div class="media-right"> <div class="media-object"> <img src="holder.js/100x100" alt=""> </div> </div> </div>
十五、列表组与面板结合
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> <script src="../bootstrap/js/holder.js"></script> <style> </style> </head> <body> <div class="container"> <h1 class="page-header">Bootstap</h1> <!--列表组--> <ul class="list-group"> <li class="list-group-item">Linux</li> <li class="list-group-item">Linux</li> <li class="list-group-item">Linux</li> <li class="list-group-item">Linux</li> </ul> <br> <!--链接列表组--> <div class="list-group"> <a href="" class="list-group-item active">Linux</a> <!--添加颜色--> <a href="" class="list-group-item list-group-item-success">Linux</a> <a href="" class="list-group-item list-group-item-danger">Linux</a> <a href="" class="list-group-item list-group-item-warning">Linux</a> <a href="" class="list-group-item list-group-item-info">Linux</a> <!--加上disable后，使用jquery变为不可用--> <a href="" class="list-group-item disabled">Linux</a> </div> <br> <!--新闻类网站使用--> <div class="col-md-6"> <div class="list-group"> <a href="" class="list-group-item active"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text"> Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much </p> </a> <a href="" class="list-group-item"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text"> Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much </p> </a> </div> </div> <div class="col-md-6"> <div class="list-group"> <a href="" class="list-group-item active"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text"> Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much </p> </a> <a href="" class="list-group-item"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text"> Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much </p> </a> </div> </div> <div class="page-header"> <h1>带面板的列表组</h1> </div> <div class="col-md-6"> <div class="panel panel-primary"> <div class="panel-heading"> <div class="panel-title"> <h1>百度新闻</h1> </div> </div> <a href="" class="list-group-item"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text"> Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much </p> </a> <a href="" class="list-group-item"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text"> Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much </p> </a> </div> </div> <div class="col-md-6"> <div class="panel panel-primary"> <div class="panel-heading"> <div class="panel-title"> <h1>百度新闻</h1> </div> </div> <a href="" class="list-group-item"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text"> Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much </p> </a> <a href="" class="list-group-item"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text"> Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much </p> </a> </div> </div> <div class="page-header"> <h1>带表格的面板</h1> </div> <div class="panel panel-default"> <div class="panel-heading"> <div class="panel-title"> Linux </div> </div> <div class="panel-body"> <table class="table table-hover table-sctriped table-bordered"> <tr> <th>ID</th> <th>ID</th> <th>ID</th> </tr> <tr> <td>AAA</td> <td>AAA</td> <td>AAA</td> </tr> </table> </div> </div> <div class="page-header"> <h1>无缝对接表格面板去掉panel-body</h1> </div> <div class="panel panel-default"> <div class="panel-heading"> <div class="panel-title text-center"> Linux </div> </div> <table class="table table-hover table-sctriped table-bordered"> <tr> <th>ID</th> <th>ID</th> <th>ID</th> </tr> <tr> <td>AAA</td> <td>AAA</td> <td>AAA</td> </tr> </table> </div> </div> </div> <script> $('.disabled').click(function () { return false; }) </script> </body> </html>
十六、iframe嵌入其他页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> <script src="../bootstrap/js/holder.js"></script> <style> </style> </head> <body> <div class="container"> <h1 class="page-header">嵌入其他页面</h1> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="http://www.163.com"></iframe> </div> </div> <script> </script> </body> </html>
十七、well
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> <script src="../bootstrap/js/holder.js"></script> <style> </style> </head> <body> <div class="container"> <h1 class="page-header">嵌入其他页面</h1> <div class="well well-lg"> linux is very much! </div> <div class="well"> linux is very much! </div> <div class="well well-sm"> linux is very much! </div> </div> <script> </script> </body> </html>
JavaScript插件
一、模态框
1、基础模态框，使用data-toggle来指定动作为弹出，使用data-target来指定弹出模态框的位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> <script src="../bootstrap/js/holder.js"></script> <style> </style> </head> <body> <div class="container"> <h1 class="page-header">模态框</h1> <!--data-toggle方法为modal方式，目标是mymodal--> <button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">Launch demo modal</button> <!--modal是和上面data-toggle对应，fade表示淡入效果--> <div id="mymodal" class="modal fade" > <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <span class="close" data-dismiss="modal">×</span> <h4 class="text-center">Linux技术文章</h4> </div> <div class="modal-body"> <div class="container"> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading"> <div class="panel-title"> <h5 class="text-center">Linux</h5> </div> </div> <div class="list-group"> <a href="" class="list-group-item"> <div class="list-group-heading"> <div class="list-group-title"> Linuxssssss </div> </div> <div class="list-group-text"> Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much </div> </a> </div> </div> </div> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading"> <div class="panel-title"> <h5 class="text-center">Linux</h5> </div> </div> <div class="list-group"> <a href="" class="list-group-item"> <div class="list-group-heading"> <div class="list-group-title"> Linuxssssss </div> </div> <div class="list-group-text"> Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much </div> </a> </div> </div> </div> </div> </div> <div class="modal-footer"> <input type="button" class="btn btn-primary" value="save" > <input type="button" class="btn btn-default" value="close" data-dismiss="modal"> </div> </div> </div> </div> </div> <script> </script> </body> </html>
2、不使用data-toggle，使用js方式里的show和hide函数来实现弹出与关闭
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> <script src="../bootstrap/js/holder.js"></script> <style> </style> </head> <body> <div class="container"> <h1 class="page-header">模态框</h1> <!--去掉data-toggle，使用js中show函数完成同样弹出的功能--> <button class="btn btn-primary smodal" >Launch demo modal</button> <!--modal是和上面data-toggle对应，fade表示淡入效果--> <div id="mymodal" class="modal fade" > <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <span class="close" data-dismiss="modal">×</span> <h4 class="text-center">Linux技术文章</h4> </div> <div class="modal-body"> <div class="container"> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading"> <div class="panel-title"> <h5 class="text-center">Linux</h5> </div> </div> <div class="list-group"> <a href="" class="list-group-item"> <div class="list-group-heading"> <div class="list-group-title"> Linuxssssss </div> </div> <div class="list-group-text"> Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much </div> </a> </div> </div> </div> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading"> <div class="panel-title"> <h5 class="text-center">Linux</h5> </div> </div> <div class="list-group"> <a href="" class="list-group-item"> <div class="list-group-heading"> <div class="list-group-title"> Linuxssssss </div> </div> <div class="list-group-text"> Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much </div> </a> </div> </div> </div> </div> </div> <div class="modal-footer"> <input id="save" type="button" class="btn btn-primary save" value="save"/> <input type="button" class="btn btn-default" data-dismiss="modal" value="close"/> </div> </div> </div> </div> </div> <script> $('.save').click(function () { //把modal隐藏 modal('hide')表示隐藏 modal（"show'）表示显示 $('#mymodal').modal('toggle'); }); $('.smodal').click(function () { $('#mymodal').modal('toggle'); }); //打开模态框前变为红色 $('#mymodal').on('shown.bs.modal', function () { $('body').css({'background':'#33f'}) }); //打开模态框后桌面变成蓝色 $('#mymodal').on('shown.bs.modal', function (e) { $('body').css({'background':'#aaf'}) }); //关闭时模态框为颜色 $('#mymodal').on('hide.bs.modal', function () { $('body').css({'background':'#2ff'}) }); //关闭后模态框后桌面变成蓝色 $('#mymodal').on('hidden.bs.modal', function (e) { $('body').css({'background':'#f23'}) }); </script> </body> </html>
3、将button变为a
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> <script src="../bootstrap/js/holder.js"></script> <style> </style> </head> <body> <div class="container"> <h1 class="page-header">模态框</h1> <!--去掉data-toggle，使用js中show函数完成同样弹出的功能--> <a href="#mymodal" class="btn btn-primary smodal" >Launch demo modal</a> <!--modal是和上面data-toggle对应，fade表示淡入效果--> <div id="mymodal" class="modal fade" > <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <span class="close" data-dismiss="modal">×</span> <h4 class="text-center">Linux技术文章</h4> </div> <div class="modal-body"> <div class="container"> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading"> <div class="panel-title"> <h5 class="text-center">Linux</h5> </div> </div> <div class="list-group"> <a href="" class="list-group-item"> <div class="list-group-heading"> <div class="list-group-title"> Linuxssssss </div> </div> <div class="list-group-text"> Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much </div> </a> </div> </div> </div> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading"> <div class="panel-title"> <h5 class="text-center">Linux</h5> </div> </div> <div class="list-group"> <a href="" class="list-group-item"> <div class="list-group-heading"> <div class="list-group-title"> Linuxssssss </div> </div> <div class="list-group-text"> Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much </div> </a> </div> </div> </div> </div> </div> <div class="modal-footer"> <input id="save" type="button" class="btn btn-primary save" value="save"/> <input type="button" class="btn btn-default" data-dismiss="modal" value="close"/> </div> </div> </div> </div> </div> <script> $('.save').click(function () { //把modal隐藏 modal('hide')表示隐藏 modal（"show'）表示显示 $('#mymodal').modal('toggle'); }); $('.smodal').click(function () { $('#mymodal').modal('toggle'); }); //打开模态框前变为红色 $('#mymodal').on('shown.bs.modal', function () { $('body').css({'background':'#33f'}) }); //打开模态框后桌面变成蓝色 $('#mymodal').on('shown.bs.modal', function (e) { $('body').css({'background':'#aaf'}) }); //关闭时模态框为颜色 $('#mymodal').on('hide.bs.modal', function () { $('body').css({'background':'#2ff'}) }); //关闭后模态框后桌面变成蓝色 $('#mymodal').on('hidden.bs.modal', function (e) { $('body').css({'background':'#f23'}) }); </script> </body> </html>
4、模态框大小调整 modal-sm和modal-lg
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../css/main.css"> <script src="../css/jquery.js"></script> <script src="../bootstrap/js/bootstrap.js"></script> <script src="../bootstrap/js/holder.js"></script> <style> </style> </head> <body> <div class="container"> <h1 class="page-header">模态框</h1> <a href="#mymodal" class="btn btn-primary smodal" >Launch demo modal</a> <div id="mymodal" class="modal fade" > <!--modal-sm和modal-lg两种对话框大小--> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <span class="close" data-dismiss="modal">×</span> <h4 class="text-center">Linux技术文章</h4> </div> <div class="modal-body"> <div class="container"> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading"> <div class="panel-title"> <h5 class="text-center">Linux</h5> </div> </div> <div class="list-group"> <a href="" class="list-group-item"> <div class="list-group-heading"> <div class="list-group-title"> Linuxssssss </div> </div> <div class="list-group-text"> Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much </div> </a> </div> </div> </div> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading"> <div class="panel-title"> <h5 class="text-center">Linux</h5> </div> </div> <div class="list-group"> <a href="" class="list-group-item"> <div class="list-group-heading"> <div class="list-group-title"> Linuxssssss </div> </div> <div class="list-group-text"> Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much </div> </a> </div> </div> </div> </div> </div> <div class="modal-footer"> <input id="save" type="button" class="btn btn-primary save" value="save"/> <input type="button" class="btn btn-default" data-dismiss="modal" value="close"/> </div> </div> </div> </div> </div> <script> $('.save').click(function () { //把modal隐藏 modal('hide')表示隐藏 modal（"show'）表示显示 $('#mymodal').modal('toggle'); }); $('.smodal').click(function () { $('#mymodal').modal('toggle'); }); //打开模态框前变为红色 $('#mymodal').on('shown.bs.modal', function () { $('body').css({'background':'#33f'}) }); //打开模态框后桌面变成蓝色 $('#mymodal').on('shown.bs.modal', function (e) { $('body').css({'background':'#aaf'}) }); //关闭时模态框为颜色 $('#mymodal').on('hide.bs.modal', function () { $('body').css({'background':'#2ff'}) }); //关闭后模态框后桌面变成蓝色 $('#mymodal').on('hidden.bs.modal', function (e) { $('body').css({'background':'#f23'}) }); </script> </body> </html>