利用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. 使用jQuery实现Socket客户端

    摘于抄书web前端开发 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  2. 20191202IIS

    IIS和.netfw4.0安装顺序是从前到后,如果不小心颠倒了,无所谓. 打开程序-运行-cmd:输入一下命令重新注册IIS C:\WINDOWS\Microsoft.NET\Framework\v4 ...

  3. 解决GitHub push项目——Push failed: Unable to access 'https://********.git/': Failed to connect to 127.0.0.1 port 1080: Connection refused

    解决方法: 第一步:在git中设置http代理 git config --global http.proxy 第二步:在git中取消http代理 git config --global --unset ...

  4. 在MySQL登录时出现Access denied for user 'root'@'localhost' (using password: YES) 拒绝访问，并可修改MySQL密码

    这两天装了一个mysql 5.7数据库,但是在本地dos登陆不上去,报错Access denied for user 'root'@'localhost'(using password:YES): 也 ...

  5. 1.Linux安装redis

    Linux安装redis 操作系统是Centos7 1.下载压缩包 2.解压 3.编译 4.启动redis 5.设置redis.conf和防火墙端口开放,外网可以访问 1.下载压缩包 下载地址:htt ...

  6. UI自动化前置代码

    一.前置代码: #导入包selenium from selenium import webdriverimport time#创键一个火狐对象driver=webdriver.Firefox()#防问 ...

  7. 微信小程序-没有找到 node_modules 目录的解决办法

    初次在微信开发者工具构建npm 没有找到 node_modules 目录的解决办法 第一步:设置-->项目设置-->使用npm模块 第二步:右键目录下miniprogram-->终端 ...

  8. C++指针的指针和指针的引用

    https://www.cnblogs.com/li-peng/p/4116349.html

  9. redis学习一 String数据类型

    一:概述 字符串类型是Redis中最为基础的数据存储类型,它在Redis中是二进制安全的,这便意味着该类型可以接受任何格式的数据,如JPEG图像数据或Json对象描述信息等.在Redis中字符串类型的 ...

  10. codeforces_D. Treasure Hunting_[DP+Binary Search]

    http://codeforces.com/contest/1201/problem/D 题意:n行m列的矩阵中,有k个targets,从[1, 1]出发,每次只能向上下左右四个方向移动一步,且只有在 ...