BootStrap_03之组件(⼿风琴、导航)1、BootStrap组件——按钮组:
.btn-group>.btn*5;
.btn-group-justified;
.btn-group-lg/sm/xs;
.btn-group-vertical——竖直按钮组;
2、BootStrap组件——下拉菜单:
下拉菜单必须三级结构:
<div class="dropdown">
<a data-toggle="dropdown">触发元素</a>
<ul class="dropdown-menu">
...
</ul>
</div>
3、BootStrap组件——导航:
①标签页式导航:
<ul class="nav nav-tabs">
<li calss="active">
<a data-toggle="tab"></a>
</li>
</ul>
②胶囊式导航:
<ul class="nav nav-pills [nav-justified nav-stacked]">
<li class="active">
<a data-toggle="tab"></a>
</li>
</ul>
③导航条中的导航:
<ul class="nav navbar-nav">
<li class="active">
<a data-toggle="tab"></a>
</li>
</ul>
4、BootStrap组件——警告框:
<div class="alert alert-danger/warning/... alert-dismissible">
<span class="close" data-dismiss="alert">×</span>
<p>...</p>
</div>
5、BootStrap组件——进度条:
<div class="progress">
<div class="progress-bar" ></div>
</div>
* 可以使⽤定时器修改进度条宽度,让它动起来;
6、BootStrap组件——列表组:
①使⽤ul>li实现:
<ul class="list-group">
<li class="list-group-item"></li>
</ul>
②使⽤div>a实现:
<div class="list-group">
<a class="list-group-item"></a>
</div>
7、BootStrap组件——缩略图:
* 配合栅格系统使⽤,实现批量展⽰;
<a class="thumbnail">
<img src="">
</a>
<div class="thumbnail">
<img>
<div class="caption"></div>
</div>
8、BootStrap组件——⾯板和⾯板组:
bootstrap 5* 多个⾯板组实现“⼿风琴”组件:
<div class="panel panel-danger/warning/.../default">
<div class="panel-heading"></div>
<div class="panel-body"></div>
<div class="panel-footer"></div>
</div>
9、BootStrap中JS插件——折叠效果:
<button data-toggle="collapse" data-target="#b"></buttn> <a data-toggle="collapse" href="#b"></a>
...
<div id="b" class="collapse in"></div>
10、BootStrap组件——响应式导航条:
* 响应式导航条必须配合折叠效果插件使⽤;
导航条分类:
①按颜⾊分:
⽩底⿊字——.navbar-default;
⿊底⽩字——.navbar-inverse;
②按定位⽅式分:
相对定位——默认;
固定定位——.navbar-fixed;
③按所在位置分:
固定在顶部——.navbar-fixed-top;
固定在底部——.navbar-fixed-bottom;
实现:
<div class="navbar navbar-default">
<div class="container">
<!--导航条头部=brand+toggle-->
<div class="navbar-header">
.
..
</div>
<!--导航条折叠部分=导航+链接+表单+按钮...-->
<div id="my-menu" class="collpase navbar-collpase"> ...
</div>
</div>
</div>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论