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" style="width:30%"></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组件——面板和面板组:
* 多个面板组实现“手风琴”组件:
<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>
BootStrap_03之组件(手风琴、导航)的更多相关文章
- [Flex] ButtonBar系列——arrowKeysWrapFocus属性如果为 true,则使用箭头键在组件内导航时,如果击中某一端则将折回。
<?xml version="1.0" encoding="utf-8"?> <!--arrowKeysWrapFocus 如果为 true, ...
- Bootstrap组件之导航
.nav--指定列表元素为导航组件. .nav-tabs--指定导航组件的样式为标签页: .nav-pills--指定导航组件的样式为胶囊式标签页: .nav-stacked--指定标签页的样式为垂直 ...
- 初尝微信小程序2-Swiper组件、导航栏标题配置
swiper 滑块视图容器. 很多网页的首页都会有一个滚动的图片模块,比如天猫超市首页,滚动着很多优惠活动的图片,用来介绍优惠内容,以及供用户点击快速跳转到相应页面. Swiper不仅可以滚动图片,也 ...
- 简洁的jQuery cxMenu 手风琴导航
版本: jQuery v1.7+ jQuery cxMenu v1.2 注意事项: 自动判断是否有子导航,有则显示并不触发链接,无则触发链接. 实例预览 使用方法 载入 JavaScript 文件 & ...
- bootstrap 组件之"导航条"
一个典型的导航条基本代码如下: <nav class="navbar navbar-default"> <div class="container&qu ...
- .vue公共组件裁减导航
场景: 有一个公共头部和底部,vue搭建的框架,在app.vue里写的公共方法,首页是个登录页面,不需要公共部分,在这基础上进行公共部分的显示隐藏. 即注册页.登录页.404页面都不要导航 代码: ( ...
- bootstrap的下拉菜单组件与导航条
前期准备:bootstrap的css文件和js文件先引入 Bootstrap 组件-拉下菜单(class+js) 下拉菜单必需三级结构 <div class="dropdown&quo ...
- 组件内导航之beforeRouteUpdate的使用
使用场景: 组件复用:路由跳转: beforeRouteUpdate (to, from, next) { // 在当前路由改变,但是该组件被复用时调用 // 举例来说,对于一个带有动态参数的路径 / ...
- 【Flutter】功能型组件之导航返回拦截
前言 为了避免用户误触返回按钮而导致APP退出,在很多APP中都拦截了用户点击返回键的按钮,然后进行一些防误触判断,比如当用户在某一个时间段内点击两次时,才会认为用户是要退出(而非误触).Flutte ...
随机推荐
- AutoMapper
什么是AutoMapper? AutoMapper是一个对象和对象间的映射器.对象与对象的映射是通过转变一种类型的输入对象为一种不同类型的输出对象工作的.让AutoMapper有意思的地方在于它提供了 ...
- Javascript生成二维码(QR)
网络上已经有非常多的二维码编码和解码工具和代码,很多都是服务器端的,也就是说需要一台服务器才能提供二维码的生成.本着对服务器性能的考虑,这种小事情都让服务器去做,感觉对不住服务器,尤其是对于大流量的网 ...
- ABP文档 - Hangfire 集成
文档目录 本节内容: 简介 集成 Hangfire 面板授权 简介 Hangfire是一个综合的后台作业管理器,可以在ABP里集成它替代默认的后台作业管理器,你可以为Hangfire使用相同的后台作业 ...
- console的高级使用
1.console.table()用来表格化展示数据. var people = { zqz: { name: 'zhaoqize', age: 'guess?' }, wdx: { name: 'w ...
- H5坦克大战之【画出坦克】
今天是个特殊的日子,圣诞节,也是周末,在这里先祝大家圣诞快乐!喜庆的日子,我们可以稍微放松一下,扯一扯昨天雷霆对战凯尔特人的比赛,这场比赛大威少又双叒叕拿下三双,而且是一个45+11+11的超级三双, ...
- Windows 常用运行库下载 (DirectX、VC++、.Net Framework等)
经常听到有朋友抱怨他的电脑运行软件或者游戏时提示缺少什么 d3dx9_xx.dll 或 msvcp71.dll.msvcr71.dll又或者是 .Net Framework 初始化之类的错误而无法正常 ...
- 使用C/C++写Python模块
最近看开源项目时学习了一下用C/C++写python模块,顺便把学习进行一下总结,废话少说直接开始: 环境:windows.python2.78.VS2010或MingW 1 创建VC工程 (1) 打 ...
- 【算法】C语言实现数组的动态分配
C语言实现数组的动态分配 作者:白宁超 2016年10月27日20:13:13 摘要:数据结构和算法对于编程的意义不言而喻,具有指导意义的.无论从事算法优化方向研究,还是大数据处理,亦或者网站开发AP ...
- PHP代码优化
1 代码优化 1 尽量静态化 如果一个方法能被静态,那就声明它为静态的,速度可提高1/4,甚至我测试的时候,这个提高了近三倍. 当然了,这个测试方法需要在十万级以上次执行,效果才明显. 其实静态方法和 ...
- VB.NET设置控件和窗体的显示级别
前言:在用VB.NET开发射频检测系统ADS时,当激活已存在的目标MDI子窗体时,被其他子窗体遮住了,导致目标MDI子窗体不能显示. 这个问题怎么解决呢?网上看到一篇帖子VB.NET设置控件和窗体的显 ...