一、bootstrap模板
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!-- y以最高的ie浏览器渲染 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 视口设置 移动设备优先 支持移动端 在多个设备上适应 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <!-- <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> --> <!-- 引入样式 --> <link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> <!-- 在ie9以下的版本时要打开以下代码 --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好，世界！</h1> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
二、响应适应
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 使用媒体查询 必须使用@media 必须做以下操作 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>响应适应</title> <style type="text/css"> *{ padding:0; margin:0; } /*大于900px*/ @media screen and (min-900px) { /* CSS 代码 */ .box{ width: 200px; height: 200px; background: yellow; } } /*700px-900px之间显示的样式 */ @media screen and (min-700px) and (max-900px) { /* CSS 代码 */ .box{ width: 200px; height: 200px; background: blue; } } /*小于700px*/ @media screen and (max-700px) { /* CSS 代码 */ .box{ width: 200px; height: 200px; background: green; } } </style> </head> <body> <div class="box">hhh</div> </body> </html>
三、栅格系统介绍
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!-- y以最高的ie浏览器渲染 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 视口设置 移动设备优先 支持移动端 在多个设备上适应 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>栅格</title> <!-- 引入样式 --> <link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"> <style type="text/css"> [class^="col"]{ background-color: pink; border: 1px solid; text-align: center; } </style> </head> <body> <!-- 注意：不要随意修改bootstrap提供的系统类 --> <!-- 固定宽度容器：.container 100%宽度容器：.container-fluid 一个页面中，这两种容器不能互相嵌套使用--> <div class="container"> <h1>栅格系统</h1> <!-- 一行 12列--> <!-- col-lg-：大屏幕 col-md-：中等屏幕 col-sm-：小屏幕 col-xs-：超小屏幕 --> <div class="row"> <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">春眠不觉晓</div> <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">处处闻啼鸟</div> <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">夜来风雨声</div> <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">花落知多少</div> <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">抽刀断水水更流</div> <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">举杯消愁愁更愁</div> </div> </div> </body> </html>
四、全局css样式
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!-- y以最高的ie浏览器渲染 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 视口设置 移动设备优先 支持移动端 在多个设备上适应 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>全局css样式</title> <!-- 引入样式 --> <link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"> <style type="text/css"> [class^="col"]{ background-color: pink; border: 1px solid; text-align: center; } </style> </head> <body> <div class="container"> <h1>全局css样式</h1> <!-- 一行 12列--> <!-- col-lg-：大屏幕 col-md-：中等屏幕 col-sm-：小屏幕 col-xs-：超小屏幕 --> <!-- 全局css样式默认每块区域会有padding-left=15px 和padding-right=15px的空白区域 --> <div class="row"> <div class="col-md-4"> <h1>h1标题</h1> <h2>h2标题</h2> <h3>h3标题</h3> <h4>h4标题</h4> <h5>h5标题</h5> <h6>h6标题</h6> <!-- 添加.lead 可以使内容突出显示 --> <p><span class="lead">页面</span>主体用p标签</p> <!-- 高亮显示 --> <p><mark>页面</mark>主体用p标签</p> <!-- 被删除的文本 --> <del>删除的文本</del> <!-- 无用文本<s></s> --> <p><s>这是一个无用的文本</s></p> <!-- 插入文本<ins> --> <p><ins>这是一个插入的文本</ins></p> <!-- 带下划线文本 <u> --> <p><u>这是一个带下划线的文本</u></p> </div> <div class="col-md-4"> <p class="text-left">左对齐</p> <p class="text-center">居中</p> <p class="text-right">右对齐</p> <p class="text-justify">根据文本长度，自动换行ddddddddddddddddddddddddddddddadadasaadsadsa</p> <p class="text-nowrap">不管多长都不换行ddddddddddddddddddddddddasdasdadadaaaaaa</p> </div> <div class="col-md-4"> <!-- 给table标签添加一个.table类 --> <!-- 可以给tbody的每一行添加条纹：.table-striped类 --> <!-- 边框：.table-bordered类 --> <!-- 悬停：.table-hover --> <!-- 状态类： .active .success .info .warning .danger 给每一行添加这个状态类之后使得每一行以不同的颜色显示出来 --> <!-- 在table外面再加一层.table-responsive类，是表格变为响应式的表格 --> <div class="table-responsive"> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>#</th> <th>姓名</th> <th>年龄</th> <th>身高</th> </tr> </thead> <tbody> <tr class="warning"> <td>1</td> <td>jack</td> <td>23</td> <td>180</td> </tr> <tr class="success"> <td>2</td> <td>nick</td> <td>24</td> <td>176</td> </tr> <tr class="info"> <td>3</td> <td>lucy</td> <td>24</td> <td>176</td> </tr> </tbody> </table> </div> </div> <div class="col-md-4"> <!-- 状态类： .active .success .info .warning .danger --> </div> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!-- y以最高的ie浏览器渲染 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 视口设置 移动设备优先 支持移动端 在多个设备上适应 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- 引入样式 --> <link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1>css全局样式</h1> <div class="row"> <div class="col-md-4"> <form> <!-- .sr-only：隐藏元素 --> <div class="form-group"> <label for="username">用户名</label> <input type="email" class="form-control" id="username" placeholder="用户名"> </div> <div class="form-group"> <label for="pwd">密码</label> <input type="password" class="form-control" id="pwd" placeholder=密码"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <!-- 可以通过类设置不同的按钮样式： .btn-default :默认样式 .btn-primary:首选样式 .btn-success 成功 .btn-info 一般信息 .btn-warning 警告 .btn-danger 危险 .btn-link 链接 可以设置按钮尺寸： 不设置时为默认大小 .btn-lg 大 .btn-sm 小 .btn-xs 超小 --> <button type="submit" class="btn btn-info">注册</button> <button type="submit" class="btn btn-success">登录</button> <button type="submit" class="btn btn-link">登录</button> <!-- 设置按钮大小 --> <button type="submit" class="btn btn-danger btn-sm">登录</button> <!-- 通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。 --> <button type="submit" class="btn btn-warning btn-block">登录</button> <!-- 给按钮添加.active类 --> <button type="button" class="btn btn-primary btn-lg active">Primary button</button> <!-- 可以为基于 <a> 元素创建的按钮添加 .active 类。 --> <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a> <a href="#" class="btn btn-default btn-lg active" role="button">Link</a> <!-- 按钮禁用 disabled--> <button type="button" class="btn btn-lg btn-primary" disabled="disabled">禁用按钮1</button> <button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按钮2</button> </form> </div> <div class="col-md-6"> <!-- 为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。 --> <form class="form-inline"> <div class="form-group"> <!-- sr-only --> <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label> <div class="input-group"> <!-- 组件的使用：用一个span标签，给它加上一个组件类就可以了 --> <div class="input-group-addon"><span class="glyphicon glyphicon-chevron-right"></span></div> <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount"> <div class="input-group-addon">.00</div> </div> </div> <button type="submit" class="btn btn-primary">Transfer cash</button> </form> </div> <div class="col-md-6"> <!-- 图片 .img-responsive ：响应式图片，图片大小自适应视口 --> <img src="imgs/1.jpg" class="img-responsive" alt="Responsive image"> </div> <!-- 图片形状： .img-rounded .img-circle .img-thumbnail --> <div class="col-md-4"> <img src="imgs/1.jpg" alt="..." class="img-rounded"> <img src="imgs/1.jpg" alt="..." class="img-circle"> <img src="imgs/1.jpg" alt="..." class="img-thumbnail"> </div> </div> </div> </body> </html>
五、bootstrap组件使用
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!-- y以最高的ie浏览器渲染 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 视口设置 移动设备优先 支持移动端 在多个设备上适应 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>组件</title> <!-- 引入样式 --> <link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"> <style type="text/css"> .navColor{ background-color: rgba(0,0,0,0.7); } </style> </head> <body style="height: 2000px;padding-top: 70px;"> <!-- 导航：要独立于.container类之上 --> <!-- 添加 .navbar-fixed-top 类可以让导航条固定在顶部 --> <!-- 这个固定的导航条会遮住页面上的其它内容，除非你给 <body> 元素底部设置了 padding。 --> <!-- 通过添加 .navbar-inverse 类可以改变导航条的外观。 --> <!-- 可以自定义一个类,如.navColor，设置导航条颜色 --> <nav class="navbar navbar-default navbar-fixed-top navbar-inverse navColor"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">logo</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li> <li><a href="#">附页</a></li> </ul> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-success">搜索</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">登录</a></li> <li><a href="#">注册</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container"> <div class="row"> <div class="col-md-4"> <!-- 下拉菜单 --> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="col-md-6"> <!-- 面板 --> <div class="panel panel-default"> <div class="panel-heading"> <!-- 面板标题 --> <h3 class="panel-title">按钮式下拉菜单</h3> </div> <div class="panel-body"> <!-- 按钮式下拉菜单 --> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action <span class="caret"></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> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">各种颜色进度条</h3> </div> <div class="panel-body"> <!-- 进度条 --> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style=" 40%"> <span class="sr-only">40% Complete (success)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style=" 20%"> <span class="sr-only">20% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style=" 60%"> <span class="sr-only">60% Complete (warning)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style=" 80%"> <span class="sr-only">80% Complete (danger)</span> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">动画效果进度条</h3> </div> <div class="panel-body"> <!-- 进度条 --> <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style=" 45%"> <span class="sr-only">45% Complete</span> </div> </div> </div> </div> </div> </div> </div> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
六、插件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!-- y以最高的ie浏览器渲染 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 视口设置 移动设备优先 支持移动端 在多个设备上适应 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 插件</title> <!-- 引入样式 --> <link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"> </head> <body> <div class="container-fluid"> <div class="row"> <dir class="col-md-4"> <!-- 模态框 --> <!-- Button trigger modal --> <!-- 自定义一个按钮用js实现模态框 --> <button type="button" class="btn btn-danger btn-lg" id="closeBtn" data-toggle="modal"> 删除 </button> <!-- <button type="button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#myModal"> 删除 </button> --> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">你确定要删除吗</h4> </div> <div class="modal-body"> 如果删除，不可返回！ </div> <div class="modal-footer"> <button type="button" class="btn btn-success" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary">确定</button> </div> </div> </div> </div> </dir> </div> </div> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> <script type="text/javascript"> //自定义触发模态框 $(function(){ $("#closeBtn").click(function(){ $('#myModal').modal({ keyboard: false }) }) }) </script> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!-- y以最高的ie浏览器渲染 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 视口设置 移动设备优先 支持移动端 在多个设备上适应 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 插件——collapse</title> <!-- 引入样式 --> <link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-4"> <!-- collapse（手风琴样式） --> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 数码 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <p><a href="#">大家电</a></p> <p><a href="#">生活家电</a></p> <p><a href="#">个人家电</a></p> <p><a href="#">休闲家电</a></p> <p><a href="#">数码配件</a></p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 美食 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <p><a href="#">各地特产</a></p> <p><a href="#">茗茶冲饮</a></p> <p><a href="#">休闲零食</a></p> <p><a href="#">各类坚果</a></p> <p><a href="#">生鲜蔬果</a></p> <p><a href="#">粮油米面</a></p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 箱包 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> <p><a href="#">女包</a></p> <p><a href="#">男包</a></p> <p><a href="#">旅行包袋</a></p> <p><a href="#">运动包</a></p> <p><a href="#">各类小包</a></p> </div> </div> </div> </div> </div> </div> </div> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
七、轮播图
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!-- y以最高的ie浏览器渲染 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 视口设置 移动设备优先 支持移动端 在多个设备上适应 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap——carousel</title> <link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> <li data-target="#carousel-example-generic" data-slide-to="4"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="imgs/4.JPG" alt="..."> </div> <div class="item"> <img src="imgs/5.JPG" alt="..."> </div> <div class="item"> <img src="imgs/6.JPG" alt="..."> </div> <div class="item"> <img src="imgs/7.JPG" alt="..."> </div> <div class="item"> <img src="imgs/8.JPG" alt="..."> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> </div> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
八、动态监听
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!-- y以最高的ie浏览器渲染 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 视口设置 移动设备优先 支持移动端 在多个设备上适应 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"> </head> <body> <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy"> <span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">luffy</a> </div> <div class="collapse navbar-collapse bs-js-navbar-scrollspy"> <ul class="nav navbar-nav"> <li> <a href="#ios">iOS</a> </li> <li> <a href="#svn">SVN</a> </li> <li class="dropdown"> <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1"> <li> <a href="#jmeter" tabindex="-1">jmeter</a> </li> <li> <a href="#ejb" tabindex="-1">ejb</a> </li> <li class="divider"></li> <li> <a href="#spring" tabindex="-1">spring</a> </li> </ul> </li> </ul> </div> </div> </nav> <div data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height:200px;overflow:auto; position: relative;"> <h4 id="ios">iOS</h4> <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。 </p> <h4 id="svn">SVN</h4> <p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。 </p> <h4 id="jmeter">jMeter</h4> <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。 </p> <h4 id="ejb">EJB</h4> <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。 </p> <h4 id="spring">Spring</h4> <p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。 </p> <p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。 </p> </div> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>