响应式导航条
- 特征
- 在PC和平板中默认要显示所有的内容
- 在手机中导航条默认只显示logo，以及一个“菜单折叠展开按钮”，只有点击按钮后才显示所有的菜单项
- bootstrap中导航条的基本结构
- 基础类 class="navbar"
- 按位置区分
- 顶部导航条和底部导航条
- 按颜色区分
- 浅色底深色的字 - navbar-default
- 深色底浅色的字 - navbar-inverse
- 按定位方式分
- 静态定位 - 默认值
- 固态定位 - nav-fixed-top/bottom
- 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>
- 应用实例
<div class="navbar navbar-default ">
<div class="container">
<!--导航条头部-->
<div class="navbar-header">
<a href="#" class="navbar-brand">
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target="#collapse"><span class="glyphicon glyphicon-th-list"></span></button>
</div>
<!--折叠菜单-->
<div class="navbar-collapse collapse in" id="collapse">
<a href="#" class="navbar-link navbar-text navbar-right">注册</a>
<span class="navbar-text navbar-right">|</span>
<button class="btn btn-danger navbar-btn navbar-right">登陆</button>
<form action="" class="navbar-form navbar-right">
<div class="form-group has-feedback">
<label for="uname" class="sr-only">搜索：</label>
<input type="text" class="form-control">
<span class="form-control-feedback glyphicon glyphicon-search"></span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">吃饭</a></li>
<li><a href="#">睡觉</a></li>
<li><a href="#">打豆豆</a></li>
</ul>
</div>
</div>
</div>
适应手机
适应PC
插件-标签页
html代码
<ul class="nav nav-tabs">
<li><a href="#item1" data-toggle="tab">十元套餐</a></li>
<li class="active"><a href="#item2" data-toggle="tab">二十元套餐</a></li>
<li><a href="#item3" data-toggle="tab">三十元套餐</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade" id="item1">欢迎使用十元套餐Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt optio a ullam aspernatur quasi necessitatibus in saepe neque consectetur officia quod debitis et quam quas placeat alias dolor voluptate eius?</div>
<div class="active tab-pane fade in" id="item2">欢迎使用二十元套餐Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui soluta atque dolorum quasi earum asperiores aspernatur neque unde. Odit libero qui facilis fugit doloremque architecto. Non natus necessitatibus veritatis laudantium.</div>
<div class="tab-pane fade " id="item3">欢迎使用三十元套餐Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius cumque iste quasi laborum earum inventore tempore non ipsum quam nesciunt maiores saepe. Perferendis nulla a vero nihil impedit! Possimus dolores.</div>
</div>
标签页
插件-弹出框
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)
5.模态对话框
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>
应用实例
<div class="modal fade in" id="modal1" >
<!--设置大小和定位-->
<div class="modal-dialog modal-md">
<!--设置边框颜色-->
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">XML和HTML的区别</h3>
</div>
<div class="modal-body">XHTML是更为严格的HTMLlorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore fuga repellat rerum dolor eos in est. Ipsam minima tenetur fuga voluptatem quae numquam provident saepe ducimus dolorum laboriosam deleniti consequuntur.</div>
<div class="modal-footer">
<button class="btn btn-danger pull-left">上一页</button>
<button class="btn btn-success pull-left">下一页</button>
<button class="btn btn-warning pull-right">OK</button>
</div>
</div>
</div>
</div>
<!--让modal显示-->
<a href="#modal1" data-toggle="modal">modal的显示</a>
<button data-toggle="modal" data-target="#modal1">button的modal显示</button>
模态提示框
插件-折叠效果
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>
应用实例
<h1>折叠效果</h1>
<button data-toggle="collapse" data-target="#d1">点击我折叠</button>
<div class="collapse in" id="d1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus ducimus temporibus blanditiis iusto mollitia ullam ab quam est placeat fuga architecto voluptas aliquam asperiores qui doloremque dolor accusamus deleniti laboriosam?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quisquam quos sint laudantium nihil debitis aliquam consequatur velit architecto quidem quis voluptas quia iure maxime harum eum sed repellendus repellat.
</div>
<h1>手风琴</h1>
<div class="panel-group" id="accordion">
<div class="panel panel-danger">
<div class="panel-heading"><a href="#pan1" data-toggle="collapse" data-parent="#accordion">西游记</a></div>
<div class="panel-body collapse in" id="pan1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum accusantium excepturi nihil dicta molestias sit soluta? Doloribus laborum minima ad sapiente vel nesciunt accusamus obcaecati consectetur earum alias iste tempora!</div>
</div>
<div class="panel panel-success">
<div class="panel-heading"><a href="#pan2" data-toggle="collapse" data-parent="#accordion">水浒传</a></div>
<div class="panel-body collapse in" id="pan2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam quidem impedit animi deleniti laborum quo debitis odit eos corrupti saepe beatae minus harum voluptate laudantium et architecto blanditiis facilis similique.</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading"><a href="#pan3" data-toggle="collapse" data-parent="#accordion">三国演义</a></div>
<div class="panel-body collapse in" id="pan3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam ut voluptate nobis repellendus explicabo nihil maxime dignissimos veniam corrupti asperiores ipsum consequatur odit tenetur reprehenderit dolores assumenda velit. Blanditiis consequatur.</div>
</div>
</div>
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<div class="carousel-caption">
...
</div>
</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>
折叠效果一
手风琴
手风琴二
