利用bootstrap框架的字体图标和下拉菜单效果，以及css3的动画效果，可以做出比较优雅的按钮式下拉菜单样式

  <style>

    .myBtnStyle .dropdown-menu span{

      margin:5px;

    }

    .myBtnStyle .dropdown-menu {

      animation: 0.5s linear fadeIn;  //css3新特性animation

    }

    @keyframes fadeIn {  //通过keyframes规则创建动画特效，原理为将一套css样式逐渐转化成另一种css样式

      0%{opacity:0;transform: translateY(-20);}

      100%{opacity: 1;transform: translateY(0);}

    }

  </style>

</head>

<body>

  <div class="container">

    <div class="dropdown myBtnStyle open">

      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">

        explotion

      </button>

      <ul class="dropdown-menu">

        <li><a href="#">

          <span class="glyphicon glyphicon-headphones"></span>   //span标签包裹的字体图标

          moving</a></li>

        <li><a href="#">

          <span class="glyphicon glyphicon-headphones"></span>

          raging</a></li>

        <li><a href="#">

          <span class="glyphicon glyphicon-headphones"></span>

          daniangmener</a></li>

        <li><a href="#">

          <span class="glyphicon glyphicon-headphones"></span>

          holy</a></li>

      </ul>

    </div>

  </div>

</body>

用bootstrap和css3制作按钮式下拉菜单的更多相关文章

  1. Bootstrap按钮式下拉菜单

    前面的话 按钮式下拉菜单仅从外观上看,和下拉菜单效果基本上是一样的.不同的是普通的下拉菜单是block元素,而按钮式下拉菜单是inline-block元素.本文将详细介绍Bootstrap按钮式下拉菜 ...

  2. 巧用CSS3 :target 伪类制作Dropdown下拉菜单（无JS）

    :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...

  3. 8.bootstrap下拉菜单、按钮组、按钮式下拉菜单

    下拉菜单 dropdown 对齐方式: .dropdown-menu-right     .dropdown-menu-left <div class="container" ...

  4. Bootstrap下拉菜单、按钮式下拉菜单

    1. 概述 下拉菜单使用频率也是比较高的,比较常见的使用场景是在导航菜单栏,某个主菜单含有下拉的子菜单. Bootstrap为下拉菜单提供了两种实现方式,即普通的下拉菜单还有按钮式的下拉菜单.我们先看 ...

  5. 巧用CSS3：target 伪类制作Dropdown下拉菜单（无JS）

    原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如 ...

  6. Bootstrap历练实例：带有下拉菜单的标签和胶囊导航

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. Bootstrap3系列：按钮式下拉菜单

    1. 基本实例 把按钮放入 .btn-group 中,加入适当的菜单标签,让按钮触发下拉菜单. 1.1 示例代码 <div class="btn-group"> < ...

  8. Bootstrap<基础十四> 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

  9. 基于CSS3金属风格下拉菜单

    基于CSS3金属风格下拉菜单,css,金属风格,下拉菜单,CSS3导航. css3按钮:http://www.huiyi8.com/css3/anniu/

随机推荐

  1. js中的函数声明置顶

    函数声明置顶是指 js引擎在读取变量与声明式函数时,会优先读取,例如如下 var a = 1: function a(){}; console.log(a); //这里得到的为1,而不是该functi ...

  2. 08Servlet

    1.Servlet概念 1.1 servlet的特点 1)sevlet是一个普通的java类,继承HttpServlet类. 2)其实实现了Servlet接口的java类,才是一个Servlet类. ...

  3. springboot+UEditor图片上传

    springboot+UEDitor百度编辑器整合图片上记录于此 1.下载ueditor插件包,解压到static/ueditor目录下 2.在你所需实现编辑器的页面引用三个JS文件 1)  uedi ...

  4. luogu2046 海拔

    题目链接[NOI2010]海拔 首先有个性质就是海拔只会有\(0\)和\(1\)两种. 证明:海拔下降和人数乘积为总消耗,确定了海拔下降总数,如果有个地方可以使得单位消耗最小,那么全部消耗不会更劣. ...

  5. AIX下绑定双网卡

    摘要 AIX下绑定双网卡,实现IP地址的高可用.为后续按照oracle11gRAC环境做准备.   收 藏 生产环境中是将不同网卡的不同网口进行绑定.比如A网卡有A1,A2网口:B网卡有B1,B2网口 ...

  6. random模块 os模块

    # random# import random# random.random() # 大于0且小于1之间的小数# random.randint() # 大于等于1且小于等于3之间的整数# random ...

  7. Windows 下搭建 SVN服务器

    目录 一 .安装Visual SVN 二.配置SVN 三.安装TortoiseSVN 四.上传项目到远程仓库 五.从远程仓库下载项目 六.检出项目 七.版本回退   参考链接 https://blog ...

  8. w = tf.Variable(<initial-value>, name=<optional-name>)

    w = tf.Variable(<initial-value>, name=<optional-name>)

  9. swan.after

    解释: swan.after可以拦截所有当前运行小程序对于API的调用,默认传入function时,只在API函数调用的返回阶段拦截.如果传入Object,则可以选择拦截的阶段(例如: 返回阶段.回调 ...

  10. [CF846A]Curriculum Vitae题解

    枚举一个点,假设它一定符合条件,据此珂以\(O(n)\)算出要删去几个点 于是就\(O(n^2)\)解决了,貌似加一个前缀和可以在\(O(n)\)的时间复杂度内解决本问题,但对于这个数据范围来说\(O ...