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 ...
随机推荐
- 在docker中运行ASP.NET Core Web API应用程序(附AWS Windows Server 2016 widt Container实战案例)
环境准备 1.亚马逊EC2 Windows Server 2016 with Container 2.Visual Studio 2015 Enterprise(Profresianal要装Updat ...
- javaScript的原型继承与多态性
1.prototype 我们可以简单的把prototype看做是一个模版,新创建的自定义对象都是这个模版(prototype)的一个拷贝 (实际上不是拷贝而是链接,只不过这种链接是不可见,给人们的感觉 ...
- CRL快速开发框架系列教程十(导出对象结构)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
- Jquery(1)
鼠标点击事件: <input type="button" value="测试" onclick="test()" /> < ...
- C++ 事件驱动型银行排队模拟
最近重拾之前半途而废的C++,恰好看到了<C++ 实现银行排队服务模拟>,但是没有实验楼的会员,看不到具体的实现,正好用来作为练习. 模拟的是银行的排队叫号系统,所有顾客以先来后到的顺序在 ...
- Win7安装MySQL-5.7.16过程
1.在C盘新建MYSQL文件夹:2.将mysql-5.7.16-winx64拷贝到C:\MYSQL文件夹下,更名为mysql-5.7.16:3.在mysql-5.7.16目录下,建my.ini文件,内 ...
- iOS7 NavigationController 手势问题
在iOS7中,如果使用了UINavigationController,那么系统自带的附加了一个从屏幕左边缘开始滑动可以实现pop的手势.但是,如果自定义了navigationItem的leftBarB ...
- Linux下部署ASP.NET服务连接oracle遇到的问题记录
一.如何卸载MONO Q:mono是linux系统上跨平台软件,卸载它有两种方式: 1.知道mono安装路径,安装原来的路径直接覆盖安装(最为简单): 2.不知道mono安装路径,首先通过sudo f ...
- 【腾讯Bugly干货分享】Android动态布局入门及NinePatchChunk解密
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57c7ff5d53bbcffd68c64411 作者:黄进——QQ音乐团队 摆脱 ...
- GO基础(二)
本例中梳理go语言中的协程和通道. package main import ( "fmt" "time" ) //func01.func02 为演示同步机制 f ...