一:警告框的使用
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <title>警告框</title> </head> <body> <!--警告框分二种: 一种就是纯提示，这个叫组件，还有一种叫插件，还一个关闭按钮--> <div class="alert alert-success" role="alert"> <strong>警告:</strong>我是一个优雅的弹窗 </div> <hr> <div class="alert alert-info" role="alert"> <strong>警告:</strong>我是一个优雅的弹窗 </div> <!--警告框中还可以放链接--> <div class="alert alert-warning" role="alert"> <strong>警告:</strong>想知道什么，请点击: <a href="http://www.php.cn" class="alert-link">php中文网</a> </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="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <title>警告框</title> </head> <body> <!--1.基本样式,支持添加徽章--> <ul class="list-group"> <li class="list-group-item active">前端学习的经验分享1 <span class="badge">450</span></li> <li class="list-group-item">前端学习的经验分享2 <span class="badge">567</span></li> <li class="list-group-item">前端学习的经验分享3 <span class="badge">850</span></li> <li class="list-group-item">前端学习的经验分享4 <span class="badge">123</span></li> <li class="list-group-item">前端学习的经验分享5 <span class="badge">400</span></li> </ul> <hr> <!--2.带有链接的列表项,注意不要用ul,应该用div+a这种组合 --> <div class="list-group"> <a href="" class="list-group-item active">了解最新动态</a> <a href="" class="list-group-item">了解最新动态</a> <a href="" class="list-group-item">了解最新动态</a> <a href="" class="list-group-item">了解最新动态</a> <a href="" class="list-group-item">了解最新动态</a> </div> <hr> <!--3.列表项全部由按钮组成, div+button--> <div class="list-group"> <button type="button" class="list-group-item active">用户管理</button> <button type="button" class="list-group-item">查看用户</button> <button type="button" class="list-group-item">编辑用户</button> <button type="button" class="list-group-item">查询积分</button> <button type="button" class="list-group-item">其它操作</button> </div> <!--4.为每个列表项创建情景类--> <div class="list-group"> <a href="" class="list-group-item list-group-item-info">了解最新动态</a> <a href="" class="list-group-item list-group-item-success">了解最新动态</a> <a href="" class="list-group-item list-group-item-warning">了解最新动态</a> <a href="" class="list-group-item list-group-item-danger">了解最新动态</a> </div> <hr> <!--5.定制列表项的内容--> <div class="list-group"> <a href="" class="list-group-item active"> <h4 class="list-group-item-heading">2018最新的web前端开发框架排行总结</h4> <p class="list-group-item-text">如果你是一个前端开发人员，当你在开发新项目时，想必一定被人问过“你用的是什么框架？”进而开展各种前端技术话题。</p> </a> <a href="" class="list-group-item"> <h4 class="list-group-item-heading">2018最新的web前端开发框架排行总结</h4> <p class="list-group-item-text">如果你是一个前端开发人员，当你在开发新项目时，想必一定被人问过“你用的是什么框架？”进而开展各种前端技术话题。</p> </a> <a href="" class="list-group-item"> <h4 class="list-group-item-heading">2018最新的web前端开发框架排行总结</h4> <p class="list-group-item-text">如果你是一个前端开发人员，当你在开发新项目时，想必一定被人问过“你用的是什么框架？”进而开展各种前端技术话题。</p> </a> </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="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <title>警告框</title> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <!--面板也有一个基类: panel--> <div class="panel panel-default"> <!--面板的头部--> <div class="panel-heading"> <!--面板的标题--> <h3 class="panel-title">面板的标题</h3> </div> <!--面板的主体--> <div class="panel-body"> <div class="list-group"> <a href="" class="list-group-item list-group-item-info">了解最新动态</a> <a href="" class="list-group-item list-group-item-success">了解最新动态</a> <a href="" class="list-group-item list-group-item-warning">了解最新动态</a> <a href="" class="list-group-item list-group-item-danger">了解最新动态</a> </div> </div> <div class="panel-footer"> 页板的脚部 </div> </div> <!--面板的情景样式--> <!--<div class="panel panel-primary">--> <div class="panel panel-default"> <div class="panel-heading"> <!--面板的标题--> <h3 class="panel-title text-center">学生成绩表</h3> </div> <!--面板的主体--> <!--<div class="panel-body">--> <!--在面板中嵌入一个表格--> <table class="table table-bordered table-hover"> <thead> <tr class="bg-success"> <td>学号</td> <td>姓名</td> <td>班级</td> <td>课程</td> <td>成绩</td> </tr> </thead> <tbody> <tr> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> </tbody> </table> <!--</div>--> <!--<div class="panel-footer">--> <!----> <!--</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="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <title>警告框</title> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <!--面板也有一个基类: panel--> <div class="panel panel-default"> <!--面板的头部--> <div class="panel-heading"> <!--面板的标题--> <h3 class="panel-title">面板的标题</h3> </div> <!--面板的主体--> <div class="panel-body"> <div class="list-group"> <a href="" class="list-group-item list-group-item-info">了解最新动态</a> <a href="" class="list-group-item list-group-item-success">了解最新动态</a> <a href="" class="list-group-item list-group-item-warning">了解最新动态</a> <a href="" class="list-group-item list-group-item-danger">了解最新动态</a> </div> </div> <div class="panel-footer"> 页板的脚部 </div> </div> <!--面板的情景样式--> <!--<div class="panel panel-primary">--> <div class="panel panel-default"> <div class="panel-heading"> <!--面板的标题--> <h3 class="panel-title text-center">学生成绩表</h3> </div> <!--面板的主体--> <!--<div class="panel-body">--> <!--在面板中嵌入一个表格--> <table class="table table-bordered table-hover"> <thead> <tr class="bg-success"> <td>学号</td> <td>姓名</td> <td>班级</td> <td>课程</td> <td>成绩</td> </tr> </thead> <tbody> <tr> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> </tbody> </table> <!--</div>--> <!--<div class="panel-footer">--> <!----> <!--</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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
四.模态框/弹层
data-: 属性与javascript代码绑定,内置的API
模态框可以通过一个按钮来激活,还有可以通过一个js代码(ajax)
通过按钮激活模态框的时候一定要与二个data属性配合:
data-toggle: 模态框的打开与关闭
data-target: 指出我要弹出是哪个模态框
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <title>模态框和弹出层</title> </head> <body> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">打开模态框</button> <!--模态框的代码--> <div class="modal fade" id="myModal"> <!--创建一个对话框--> <div class="modal-dialog"> <div class="modal-content"> <!--模态框头部--> <div class="modal-header"> <!--关闭按钮--> <button type="button" class="close" data-dismiss="modal" aria-label="Clost">×</button> <h4>模态模型标题</h4> </div> <!--模态框的主体--> <div class="modal-body"> 模态框的主体代码/表单/表格/图片/视频 </div> <!--模态框的底部--> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <!--用户自定义功能按钮: 确定/保存/提交--> <button type="button" class="btn btn-primary">保存</button> </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="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <title>标签页/选项卡层</title> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4"> <!--选项卡有二个必须设置的属性--> <!--a标签中的href设置锚点:#和标签页对应的内容区的id对应--> <!--data-toggle="tab"--> <ul class="nav nav-tabs"> <li class="active"><a href="#article" data-toggle="tab">技术文章</a></li> <li><a href="#code" data-toggle="tab">网站源码</a></li> <li><a href="#manual" data-toggle="tab">原生手册</a></li> <li><a href="#blog" data-toggle="tab">推荐博文</a></li> </ul> <!--标签页对应的内容区--> <div class="tab-content"> <div id="article" class="tab-pane active"> <div class="list-group"> <a href="" class="list-group-item no-border">了解最新技术文章</a> <a href="" class="list-group-item no-border">了解最新技术文章</a> <a href="" class="list-group-item no-border">了解最新技术文章</a> <a href="" class="list-group-item no-border">了解最新技术文章</a> </div> </div> <div id="code" class="tab-pane"> <div class="list-group"> <a href="" class="list-group-item no-border">了解最新网站源码</a> <a href="" class="list-group-item no-border">了解最新网站源码</a> <a href="" class="list-group-item no-border">了解最新网站源码</a> <a href="" class="list-group-item no-border">了解最新网站源码</a> </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="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<title>警告框插件</title>
</head>
<body>
<div class="alert alert-success">
<!--警告框的插件比组件，就是多一个关闭按钮-->
<button class="close" data-dismiss="alert" type="button">×</button>
<p>恭喜您,转帐成功</p>
</div>
<!--使用一个链接当关闭按钮-->
<div class="alert alert-warning">
<h4>公安提醒:</h4>
<p>请转帐之前电话确认一下</p>
<a data-dismiss="alert" href="">关闭</a>
</div>
<!--用按钮来关闭警告框 -->
<div class="alert alert-danger">
<h4>淘宝提醒:</h4>
<p>任何提醒你中奖的都是***</p>
<button class="btn btn-primary btn-sm" data-dismiss="alert" type="button">朕知道了</button>
</div>
<!--用户自定义一个事件来关闭-->
<div class="alert alert-success">
<h4>恭喜您入职php中文网</h4>
<button class="btn btn-primary btn-sm" type="button" id="close">明白了</button>
</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>
<script>
$('#close').click(function(){
$(this).alert('close')
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
七.折叠插件
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<title>警告框插件</title>
</head>
<body style="padding: 50px;">
<a href="#declare" class="btn btn-primary" data-toggle="collapse">操作说明</a>
<div class="collapse" id="declare">
<div class="well well-sm">
<p>可以修改用户名和密码及邮箱等个人资料</p>
</div>
</div>
<hr>
<style>
#declare1 *, #declare2 *, a[href="#declare1"],a[href="#declare2"] {border-radius: 0;}
</style>
<a href="#declare1" class="btn btn-primary" data-toggle="collapse">用户管理</a>
<div class="collapse" id="declare1">
<div class="btn-group-vertical">
<a href="" class="btn btn-default">修改密码</a>
<a href="" class="btn btn-default">用户列表</a>
<a href="" class="btn btn-default">积分查询</a>
</div>
</div>
<br>
<a href="#declare2" class="btn btn-primary" data-toggle="collapse">商品管理</a>
<div class="collapse" id="declare2">
<div class="btn-group-vertical">
<a href="" class="btn btn-default">分类管理</a>
<a href="" class="btn btn-default">促销管理</a>
<a href="" class="btn btn-default">订单管理</a>
</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>运行实例 »
点击 "运行实例" 按钮查看在线实例
8.轮播图/跑马灯/旋转木马/ carousel
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="../lib/dist/css/bootstrap.css"> <title>轮播图/跑马灯/旋转木马/ carousel</title> </head> <body> <!--1.创建轮播图的容器--> <div id="slider" class="carousel slide" data-ride="carousel"> <!--2.设置播放顺序--> <ol class="carousel-indicators"> <li data-target="#slider" data-slide-to="0" class="active"></li> <li data-target="#slider" data-slide-to="1"></li> <li data-target="#slider" data-slide-to="3"></li> </ol> <!--3.设置图片--> <div class="carousel-inner"> <div class="item active"> <img src="1.jpg" alt=""> <div class="carousel-caption">广告1</div> </div> <div class="item"> <img src="2.jpg" alt=""> <div class="carousel-caption">广告2</div> </div> <div class="item"> <img src="3.jpg" alt=""> <div class="carousel-caption">广告3</div> </div> </div> <!--4.控制播放--> <a href="#slider" class="carousel-control left" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a href="#slider" class="carousel-control right" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <script src="../lib/jquery.js"></script> <script src="../lib/dist/js/bootstrap.js"></script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例