利用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. stylus快速上手

    定义变量,比如一键切换主题色 1.创建xxx.styl文件,定义变量 $bgColor = #00bcg4 2.在其他页面的style区域里,先引入这个xxx.styl文件 <style> ...

  2. go中指针类型的用法小结

    代码 // 指针的用法 package main import ( "fmt" ) func main() { var i int = 100 // 输出i的地址 fmt.Prin ...

  3. 云中沙箱学习笔记2-ECS之初体验

    1.1 背景知识 云服务器(Elastic Compute Service, 简称ECS),是一种简单高效,处理能力可以弹性伸缩的计算服务.ECS的相关术语说明如下: --实例(Instance):是 ...

  4. 2018-2-13-win-10-UWP-标签

    title author date CreateTime categories win 10 UWP 标签 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17:2 ...

  5. 【转】SPI FLASH与NOR FLASH的区别 详解SPI FLASH与NOR FLASH的不一样

    转自:http://m.elecfans.com/article/778203.html 本文主要是关于SPI FLASH与NOR FLASH的相关介绍,并着重对SPI FLASH与NOR FLASH ...

  6. 02tensorflow非线性回归以及分类的简单实用，softmax介绍

    import tensorflow as tf import numpy as np import matplotlib.pyplot as plt # 使用numpy生成200个随机点 x_data ...

  7. bzoj 3569 DZY Loves Chinese II 随机算法 树上倍增

    题意:给你一个n个点m条边的图,有若干组询问,每次询问会选择图中的一些边删除,删除之后问此图是否联通?询问之间相互独立.此题强制在线. 思路:首先对于这张图随便求一颗生成树,对于每一条非树边,随机一个 ...

  8. mybatis返回新增对象的主键

    加这两行就可以返回这个插入对象的自增的主键<insert id="insertSeatPortraitData" parameterType="seatPortra ...

  9. 最佳实践 | 数据库迁云解决方案选型 & 流程全解析

    Oracle是非常强大的综合数据库,但同时也存在一些劣势,比如由于采用集中式架构,无法很好地实现横向扩展,并且其稳定性依赖于硬件.出于架构升级.降低成本和云化等需求,越来越多的企业需要“去Oracle ...

  10. Cenos7下nginx+mysql+php环境的搭建

    首先更新系统软件 1 $ yum update 第一步:安装nginx 1.安装nginx源 1 $ yum localinstall http://nginx.org/packages/centos ...