利用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 企业网站源码模版 屏幕自适应 有前后台 springmvc SSM 生成静态化引擎

    前台: 支持四套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问 ...

  2. 在Eclipse-jee-neon中配置springsource-tool-suite

    今天为大家展示如何在Eclipse-jee-neon中配置spring的插件(springsource-tool-suit): 打开Eclipse,查看自己的版本. Help –> About ...

  3. nginx的RPM包制作案例

    使用nginx-1.12.2版本的源码软件,生成对应的RPM包软件,具体如下: - 软件名称为nginx - 软件版本为1.12.2 - RPM软件包可以查询描述信息 - RPM软件包可以安装及卸载 ...

  4. NOIP2017 Day2 T1 奶酪(并查集)

    题目描述 现有一块大奶酪,它的高度为 hhh ,它的长度和宽度我们可以认为是无限大的,奶酪 中间有许多 半径相同 的球形空洞.我们可以在这块奶酪中建立空间坐标系,在坐标系中, 奶酪的下表面为z=0z ...

  5. 移动端触摸、点击事件优化（fastclick源码学习）

    移动端触摸.点击事件优化(fastclick源码学习) 最近在做一些微信移动端的页面,在此记录关于移动端触摸和点击事件的学习优化过程,主要内容围绕fastclick展开.fastclick githu ...

  6. LINUX的一些基本概念和操作

    LINUX和shell的关系: linux是核,是操作系统,用于分配软硬件资源,用于支持运行环境,shell是壳,是命令解析器. linux命令: linux命令行有一个输入输出的行为,输入命令,输出 ...

  7. 项目部署到tomcat，浏览器能够访问，手机不能访问。

    问题:有这样一个问题,把项目部署到tomcat上,浏览器能够访问,但是手机不能访问. 解决:在 tomcat中找到conf文件夹,然后找到web.xml

  8. Linux内核设计与实现 总结笔记（第四章）进程调度

    进程调度 调度程序负责决定将哪个进程投入运行,何时运行以及运行多长时间. 调度程序没有太复杂的原理,最大限度地利用处理器时间的原则是,只要有可以执行的进程,那么就总会有进程正在执行. 一.多任务 多任 ...

  9. 【2019 Multi-University Training Contest 7】

    01:https://www.cnblogs.com/myx12345/p/11653845.html 02: 03: 04: 05: 06:https://www.cnblogs.com/myx12 ...

  10. 20180715-Java 数组

    double[] myList //首选方法 double myList[] //效果相同,但不是首选方法 该实例完整地展示了如何创建.初始化和操纵数组: public class TestArray ...