<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>模态框</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="./js/jquery-1.11.2.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>创建模态框（Modal）</h3> <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击我显示模态框</button> <!-- 定义模态框触发器，此处为按钮触发 --> <form method="post" action="#" class="form-horizontal" role="form" id="myForm" onsubmit="return "> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <!-- 定义模态框，过渡效果为淡入，id为myModal,tabindex=-1可以禁用使用tab切换，aria-labelledby用于引用模态框的标题，aria-hidden=true保持模态框在触发前窗口不可见 --> <div class="modal-dialog"> <!-- 显示模态框对话框模型（若不写下一个div则没有颜色） --> <div class="modal-content"> <!-- 显示模态框白色背景，所有内容都写在这个div里面 --> <div class="btn-info modal-header"> <!-- 模态框标题 --> <button type="button" class="close" data-dismiss="modal">×</button> <!-- 关闭按钮 --> <h4>您好，欢迎进入模态框</h4> <!-- 标题内容 --> </div> <div class="modal-body"> <!-- 模态框内容，我在此处添加一个表单 --> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="uname" class="col-sm-2 control-label">用户名</label> <div class="col-sm-9"> <input type="text" id="uname" name="uname" class="form-control well" placeholder="请输入用户名"/> </div> </div> <div class="form-group"> <label for="upwd" class="col-sm-2 control-label">密码</label> <div class="col-sm-9"> <input type="password" id="upwd" name="upwd" class="form-control well" placeholder="请输入密码"/> </div> </div> </form> </div> <div class="modal-footer"> <!-- 模态框底部样式，一般是提交或者确定按钮 --> <button type="submit" class="btn btn-info">确定</button> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> </div> </div><!-- /.modal-content --> </div> </div> <!-- /.modal --> </form> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>模态框</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="./js/jquery-1.11.2.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> $(function(){ $(".btn").click(function(){ $("#myModal").modal({ backdrop:false, keyboard:false }); }); }) </script> </head> <body> <div class="container"> <h3>创建模态框（Modal）</h3> <button class="btn btn-primary" >点击我显示模态框</button> <!-- 定义模态框触发器，此处为按钮触发 --> <form method="post" action="#" class="form-horizontal" role="form" id="myForm" onsubmit="return "> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <!-- 定义模态框，过渡效果为淡入，id为myModal,tabindex=-1可以禁用使用tab切换，aria-labelledby用于引用模态框的标题，aria-hidden=true保持模态框在触发前窗口不可见 --> <div class="modal-dialog"> <!-- 显示模态框对话框模型（若不写下一个div则没有颜色） --> <div class="modal-content"> <!-- 显示模态框白色背景，所有内容都写在这个div里面 --> <div class="btn-info modal-header"> <!-- 模态框标题 --> <button type="button" class="close" data-dismiss="modal">×</button> <!-- 关闭按钮 --> <h4>您好，欢迎进入模态框</h4> <!-- 标题内容 --> </div> <div class="modal-body"> <!-- 模态框内容，我在此处添加一个表单 --> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="uname" class="col-sm-2 control-label">用户名</label> <div class="col-sm-9"> <input type="text" id="uname" name="uname" class="form-control well" placeholder="请输入用户名"/> </div> </div> <div class="form-group"> <label for="upwd" class="col-sm-2 control-label">密码</label> <div class="col-sm-9"> <input type="password" id="upwd" name="upwd" class="form-control well" placeholder="请输入密码"/> </div> </div> </form> </div> <div class="modal-footer"> <!-- 模态框底部样式，一般是提交或者确定按钮 --> <button type="submit" class="btn btn-info">确定</button> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> </div> </div><!-- /.modal-content --> </div> </div> <!-- /.modal --> </form> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>下拉菜单</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="./js/jquery-1.11.2.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <div class="container"> <ul class="nav nav-tabs"> <li><a href="#">PHP</a></li> <li><a href="#">JSP</a></li> <li><a href="#">ASP.NET</a></li> <li><a href="#">MySql</a></li> <li><a href="#">Pathon</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown">前端技术 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Bootstrap</a></li> <li><a href="#">Vue</a></li> </ul> </li> </ul> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>选项卡</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="./js/jquery-1.11.2.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> $(function () { $('#myTab li:eq(1) a').tab('show'); }); </script> </head> <body> <div class="container"> <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab"> Bootstrap</a> </li> <li><a href="#vue" data-toggle="tab">VUE</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">前端<b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li><a href="#jmeter" tabindex="-1" data-toggle="tab"> HTML</a> </li> <li><a href="#ejb" tabindex="-1" data-toggle="tab"> CSS</a> </li> </ul> </li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="home"> <p>Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。</p> </div> <div class="tab-pane fade" id="vue"> <p>Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。</p> </div> <div class="tab-pane fade" id="jmeter"> <p>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p> </div> <div class="tab-pane fade" id="ejb"> <p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 </p> </div> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>轮播图</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="./js/jquery-1.11.2.min.js"></script> <script src="js/bootstrap.min.js"></script> <style> .carousel-inner img{ width: 100%} </style> </head> <body> <div class="container"> <div class="col-lg-6"> <div id="myCarousel" class="carousel slide" data-ride = "carousel" data-interval="2000"> <!-- 轮播（Carousel）指标 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- 轮播（Carousel）项目 --> <div class="carousel-inner"> <div class="item active"> <img src="img/0.jpg" alt="First slide"> <div class="carousel-caption">运动</div> </div> <div class="item"> <img src="img/1.jpg" alt="Second slide"> <div class="carousel-caption">力量</div> </div> <div class="item"> <img src="img/2.jpg" alt="Third slide"> <div class="carousel-caption">羽毛球</div> </div> </div> <!-- 轮播（Carousel）导航 --> <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" 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> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>弹出框</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="./js/jquery-1.11.2.min.js"></script> <script src="js/bootstrap.min.js"></script> <style> button{ margin-right: 10px;} </style> </head> <body> <div class="container" style="padding: 100px 50px 10px;" > <button type="button" class="btn btn-primary" title="Popover title" data-container="body" data-toggle="popover" data-placement="top" data-content="顶部的 Popover 中的一些内容" data-trigger="click hover"> 顶部的 Popover </button> <button type="button" class="btn btn-warning" title="Popover title" data-container="body" data-toggle="popover" data-placement="right" data-content="右侧的 Popover 中的一些内容"> 右侧的 Popover </button> </div> <script> $(function (){ $("[data-toggle='popover']").popover(); }); </script> </div> </body> </html>
<!DOCTYPE html> <html> <head> <title>Bootstrap 警告框插件</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" > <script src="js/jquery-1.11.2.min.js"></script> <script src="js/bootstrap.min.js"></script> <style> body{ font-size:24px; } </style> <script> $(function(){ $("#myClose").click(function(){ $(".alert").alert("close"); }) }) </script> </head> <body> <div class="container"> <div id="myAlert" class="alert alert-danger"> <a href="#" class="close" data-dismiss="alert" >×</a> <p>用户名与密码不正确</p> </div> <a href="#" class="btn btn-info" data-dismiss="alert" data-target="#myAlert">样式类关闭</a> <a href="#" class="btn btn-info" id="myClose"> JavaScript脚本关闭</a> </div> </body> </html>