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">&times;</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之组件(手风琴、导航)的更多相关文章

  1. [Flex] ButtonBar系列——arrowKeysWrapFocus属性如果为 true,则使用箭头键在组件内导航时,如果击中某一端则将折回。

    <?xml version="1.0" encoding="utf-8"?> <!--arrowKeysWrapFocus 如果为 true, ...

  2. Bootstrap组件之导航

    .nav--指定列表元素为导航组件. .nav-tabs--指定导航组件的样式为标签页: .nav-pills--指定导航组件的样式为胶囊式标签页: .nav-stacked--指定标签页的样式为垂直 ...

  3. 初尝微信小程序2-Swiper组件、导航栏标题配置

    swiper 滑块视图容器. 很多网页的首页都会有一个滚动的图片模块,比如天猫超市首页,滚动着很多优惠活动的图片,用来介绍优惠内容,以及供用户点击快速跳转到相应页面. Swiper不仅可以滚动图片,也 ...

  4. 简洁的jQuery cxMenu 手风琴导航

    版本: jQuery v1.7+ jQuery cxMenu v1.2 注意事项: 自动判断是否有子导航,有则显示并不触发链接,无则触发链接. 实例预览 使用方法 载入 JavaScript 文件 & ...

  5. bootstrap 组件之"导航条"

    一个典型的导航条基本代码如下: <nav class="navbar navbar-default"> <div class="container&qu ...

  6. .vue公共组件裁减导航

    场景: 有一个公共头部和底部,vue搭建的框架,在app.vue里写的公共方法,首页是个登录页面,不需要公共部分,在这基础上进行公共部分的显示隐藏. 即注册页.登录页.404页面都不要导航 代码: ( ...

  7. bootstrap的下拉菜单组件与导航条

    前期准备:bootstrap的css文件和js文件先引入 Bootstrap 组件-拉下菜单(class+js) 下拉菜单必需三级结构 <div class="dropdown&quo ...

  8. 组件内导航之beforeRouteUpdate的使用

    使用场景: 组件复用:路由跳转: beforeRouteUpdate (to, from, next) { // 在当前路由改变,但是该组件被复用时调用 // 举例来说,对于一个带有动态参数的路径 / ...

  9. 【Flutter】功能型组件之导航返回拦截

    前言 为了避免用户误触返回按钮而导致APP退出,在很多APP中都拦截了用户点击返回键的按钮,然后进行一些防误触判断,比如当用户在某一个时间段内点击两次时,才会认为用户是要退出(而非误触).Flutte ...

随机推荐

  1. 在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 ...

  2. javaScript的原型继承与多态性

    1.prototype 我们可以简单的把prototype看做是一个模版,新创建的自定义对象都是这个模版(prototype)的一个拷贝 (实际上不是拷贝而是链接,只不过这种链接是不可见,给人们的感觉 ...

  3. CRL快速开发框架系列教程十(导出对象结构)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  4. Jquery(1)

    鼠标点击事件: <input type="button" value="测试" onclick="test()" /> < ...

  5. C++ 事件驱动型银行排队模拟

    最近重拾之前半途而废的C++,恰好看到了<C++ 实现银行排队服务模拟>,但是没有实验楼的会员,看不到具体的实现,正好用来作为练习. 模拟的是银行的排队叫号系统,所有顾客以先来后到的顺序在 ...

  6. 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文件,内 ...

  7. iOS7 NavigationController 手势问题

    在iOS7中,如果使用了UINavigationController,那么系统自带的附加了一个从屏幕左边缘开始滑动可以实现pop的手势.但是,如果自定义了navigationItem的leftBarB ...

  8. Linux下部署ASP.NET服务连接oracle遇到的问题记录

    一.如何卸载MONO Q:mono是linux系统上跨平台软件,卸载它有两种方式: 1.知道mono安装路径,安装原来的路径直接覆盖安装(最为简单): 2.不知道mono安装路径,首先通过sudo f ...

  9. 【腾讯Bugly干货分享】Android动态布局入门及NinePatchChunk解密

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57c7ff5d53bbcffd68c64411 作者:黄进——QQ音乐团队 摆脱 ...

  10. GO基础(二)

    本例中梳理go语言中的协程和通道. package main import ( "fmt" "time" ) //func01.func02 为演示同步机制 f ...