<!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>
