利用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. Java第二阶段之常用类

    包装类缓存-128到127之间的数字(系统初始的时候就创建了,当我们调用ValueOf时,首先检查是否在范围内,在则直接取用)integer in1 ＝ integer.valueOf(-128):i ...

  2. centos启动提示unexpected inconsistency RUN fsck MANUALLY

    今天一台虚拟机背后的物理机故障了,主机迁移后变成了 read only filesystem.上面部署了很多长连接服务,没有关掉就直接reboot,报错: unexpected inconsisten ...

  3. 对promise的研究1

    通过看阮一峰老师的文章写出来的特此注明 1.Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大.它由社区最早提出和实现,ES6 将其 ...

  4. Dump文件的生成

    一.Windows系统的任务管理器里抓dump 启动任务管理器,选中某个进程,右键,弹出菜单"创建转储文件" 注意事项: 当你在64位Windows系统上抓32位进程的dmup文件 ...

  5. PHP中什么是数组

    PHP 中的数组实际上是一个有序映射.映射是一种把 values 关联到 keys 的类型. 此类型在很多方面做了优化,因此可以把它当成真正的数组,或列表(向量),散列表(是映射的一种实现),字典,集 ...

  6. Fckeditor实现WORD粘贴图片自动上传

    在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...

  7. string 、char* 、 char []的转换

    1.string->char* (1)data string s = "goodbye"; const char* p=str.data(); (2)c_str() stri ...

  8. Oracle 中 not exists (select 'X' ...) 的含义

    select a.col1,a.col2 from temp1 a where not exists (select 'X' from temp2 b where b.col2 = a.col1);s ...

  9. [CSP-S模拟测试]:降雷皇（DP+树状数组）

    题目描述 降雷皇哈蒙很喜欢雷电,他想找到神奇的电光.哈蒙有$n$条导线排成一排,每条导线有一个电阻值,神奇的电光只能从一根导线传到电阻比它大的上面,而且必须从左边向右传导,当然导线不必是连续的.哈蒙想 ...

  10. 浅析java中的string

    在学习java36讲的时候看到评论区有人提出的一个问题: String s1 = new String("do"); s1.intern(); String s2 = " ...