一. bootstrap-组件-响应式导航条
1. 特征
1）在PC和平板中默认要显示所有的内容
2）在手机中导航条默认只显示logo，以及一个“菜单折叠展开按钮”，只有点击按钮后才显示所有的菜单项
2. bootstrap中导航条的基本结构
0) 基础class-navbar
1) 按位置区分
顶部导航条和底部导航条
2）按颜色区分
浅色底深色的字 - navbar-default
深色底浅色的字 - navbar-inverse
3）按定位方式分
静态定位 - 默认值
固态定位 - nav-fixed-top/bottom
3. html结构
<div class="navbar 颜色 定位">
<div class="container">
导航条的头部-商标加按钮
<div class="navbar-header">
<a class="navbar-brand">
<button class="navbar-toggle">
</div>
导航条的折叠菜单
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<form class="navbar-form">
<button class="navbar-btn">
<span class="navbar-text">
<a class="nav-link navbar-text">
</div>
</div>
</div>
导航及手风琴折叠效果示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>响应式导航</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.css">
<!--[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>
<div class="navbar navbar-default "><!--navbar-fixed-top-->
<div class="container">
<div class="navbar-header">
<a class="navbar-brand"></a>
<button class="navbar-toggle" data-toggle="collapse" data-target="#collapse"><span class="glyphicon glyphicon-list"></span></button>
</div>
<div class="navbar-collapse collapse in" id="collapse">
<a class="navbar-link navbar-text navbar-right">注册</a>
<span class="navbar-right navbar-text">|</span>
<button class="btn navbar-btn btn-danger navbar-right">登录</button>
<form class="navbar-form navbar-right">
<div class="form-group has-feedback">
<label for="search" class="sr-only"></label>
<input class="form-control" id="search" type="text" placeholder="搜索..."/>
<span class="form-control-feedback glyphicon glyphicon-search"></span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">我的信息</a></li>
<li><a href="#">我的身高</a></li>
<li><a href="#">我的体重</a></li>
</ul>
</div>
</div>
</div>
<h1>响应式导航</h1>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<h1>手风琴折叠效果</h1>
<div class="panel-group" id="according">
<div class="panel panel-success">
<div class="panel-heading">
<a href="#i1" data-toggle="collapse" data-parent="#according">杨可儿的一生</a>
</div>
<div class="panel-body collapse" id="i1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam quasi voluptas tempora maxime eveniet tenetur sint laudantium fugit odio laborum facilis mollitia dicta ipsum reiciendis numquam est harum neque id!
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<a href="#i2" data-toggle="collapse" data-parent="#according">圈圈的黑照</a>
</div>
<div class="panel-body collapse" id="i2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi cumque officiis placeat est pariatur mollitia aliquid provident culpa nihil commodi quas doloremque doloribus? Eveniet in quidem libero impedit mollitia blanditiis!
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<a href="#i3" data-toggle="collapse" data-parent="#according">屁狗的狗生</a>
</div>
<div class="panel-body collapse" id="i3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis commodi voluptate asperiores minus dicta corporis animi placeat accusamus dolorem sint non tempore provident tenetur suscipit repellat eveniet voluptatibus omnis quibusdam.
</div>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.js"></script>
</html>
二. 插件
1. bootstrap基于JQ提供了十几个插件函数(类似于JQueryUI插件)，每个插件对应一个js文件，可以单独使用，也可以整体引用(bootstrap.js);
2. 调用上诉十几个插件可以用两种格式
1) 传统的JS方式调用
$().dropdown() $().tab();
2) 使用data-*扩展属性方式调用
<a data-toggle="dropdown">
三. 插件-标签页
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#p1">十元套餐</a></li>
<li><a data-toggle="tab" href="#p2">二十元套餐</a></li>
<li><a data-toggle="tab" href="#p3">三十元套餐</a></li>
</ul>
<div class="tab-content">
<div id="p1" class="tab-pane active fade in">十元套餐详情 </div>
<div id="p2" class="tab-pane fade ">二十元套餐详情 </div>
<div id="p3" class="tab-pane fade ">三十元套餐详情 </div>
</div>
四. 插件-bootstrap提供的弹出框
1. 工具提示框(tooltip)
data-toggle="tooltip"
2. 弹出框(popover)
data-toggle="popover"
3. 警告框(alert)
<div class="alert alert-四种颜色 alert-dismissible>
<span class="close" data-dismiss="alert">×</span>
xxxx
</div>
4. 模态对话框(modal)
五. 插件-bootstrap提供的弹出框 - 模态对话框(modal)
1. 模态框定义：在父窗体中弹出一个子窗体，子窗体若不关闭，父窗体就无法获得焦点，同时父子窗体之间还可以传递数据，window.alert()/confirm()/prompt()就是典型的例子
2. 模态框必需的结构
<div class="modal"> 半透明的黑色遮罩层
<div class="modal-dialog"> 宽、定位
<div class="modal-content"> 边框背景色阴影
<div class="modal-header"><h3 class="modal-title"></h3></div>
<div class="modal-body">主体</div>
<div class="modal-footer">尾部</div>
</div>
</div>
</div>
3. 显示一个模态框
1） <a href="#模态框id" data-toggle="modal">
2) <button data-toggle="modal" data-target="#模态框id">
4. 关闭一个模态框
<span data-dismiss="modal">×</span>
几种js插件示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js插件</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.css">
<!--[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>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#d1">10元套餐</a></li>
<li><a data-toggle="tab" href="#d2">20元套餐</a></li>
<li><a data-toggle="tab" href="#d3">30元套餐</a></li>
</ul>
<div class="tab-content">
<div id="d1" class="tab-pane active fade in">杨可儿大傻逼</div>
<div id="d2" class="tab-pane fade">圈圈大傻逼</div>
<div id="d3" class="tab-pane fade">屁屁大傻逼</div>
</div>
<br /><br /><br />
<h1>提示框</h1>
<div class="alert alert-danger alert-dismissible">
<span class="close" data-dismiss="alert">×</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente minima voluptatem quasi at magni totam eveniet reiciendis laudantium doloribus aspernatur nisi corporis blanditiis sunt est cupiditate amet debitis libero itaque?
</div>
<div class="alert alert-success alert-dismissible">
<span class="close" data-dismiss="alert">×</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente minima voluptatem quasi at magni totam eveniet reiciendis laudantium doloribus aspernatur nisi corporis blanditiis sunt est cupiditate amet debitis libero itaque?
</div>
<div class="alert alert-info alert-dismissible">
<span class="close" data-dismiss="alert">×</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente minima voluptatem quasi at magni totam eveniet reiciendis laudantium doloribus aspernatur nisi corporis blanditiis sunt est cupiditate amet debitis libero itaque?
</div>
<h1>模态框</h1>
<div id="modal1" class="modal fade"><!--设置遮罩-->
<div class="modal-dialog modal-sm"><!--设置宽高定位-->
<div class="modal-content"><!--设置边框颜色-->
<div class="modal-header">
<h3 class="modal-title">html和xhtml的区别</h3>
</div>
<div class="modal-body">
xhtml是更为严格的html <br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate earum natus ad porro dolorum magni illum autem saepe laudantium praesentium excepturi nihil molestiae temporibus aliquid asperiores assumenda vitae molestias quisquam?
</div>
<div class="modal-footer">
<button class="btn btn-danger pull-left">上一页</button>
<button class="btn btn-success pull-right">下一页</button>
</div>
</div>
</div>
</div>
<!--让modal显示-->
<a href="#modal1" data-toggle="modal">modal显示</a>
<button data-toggle="modal" data-target="#modal1">modal显示</button>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.js"></script>
</html>
六. 插件-折叠效果(collapse)
1. 触发一个折叠效果
1）<a href="#折叠元素id" data-toggle="collapse">
2) <button data-toggle="collapse" data-target="#折叠元素id">
2. 折叠元素
<div id="折叠元素id" class="collapse in">
</div>
3. 折叠组件的两个扩展用途
1) 响应式导航条在手机屏幕中的效果
2) according(手风琴)
4. 手风琴html结构-依托于面板和折叠组件（具体示例看导航栏部分）
<div class="panel-group" id="test">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">
<a href="#item1" data-toggle="#item1" data-parent="#test">红楼梦简介</a>
</h3>
</div>
<div id="item1" class="collapse">
<div class="panel-body">
</div>
</div>
<div class="panel-footer">
尾部
</div>
</div>
</div>
网友评论