下拉菜单

<div class="dropdown">

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

下拉菜单

<span class="caret"></span>

</button>

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

   …

   <li role="presentation" class="divider"></li>

   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

</ul>

</div>

示例

.dropdown-menu {

  position: absolute;/*设置绝对定位，相对于父元素div.dropdown*/

  top: 100%;/*让下拉菜单项在父菜单项底部，如果父元素不设置相对定位，该元素相对于body元素*/

  left: 0;

  z-index: 1000;/*让下拉菜单项不被其他元素遮盖住*/

  display: none;/*默认隐藏下拉菜单项*/

  float: left;

  min-width: 160px;

  padding: 5px 0;

  margin: 2px 0 0;

  font-size: 14px;

  list-style: none;

  background-color: #fff;

  background-clip: padding-box;

  border: 1px solid #ccc;

  border: 1px solid rgba(0, 0, 0, .15);

  border-radius: 4px;

  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);

  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);

}

//通过点击调用js添加或移除js

.open > .dropdown-menu {

  display: block;

}

源码分析

示例

下拉分割线：添加一个空的<li>，并且给这个<li>添加类名“divider”

.dropdown-menu .divider {

  height: 1px;

  margin: 9px 0;

  overflow: hidden;

  background-color: #e5e5e5;

}

源码

示例

下拉菜单标题：  class="dropdown-header"

<div class="dropdown">

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

下拉菜单

<span class="caret"></span>

</button>

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

<li role="presentation" class="dropdown-header">第一部分菜单头部</li>

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

…

<li role="presentation" class="divider"></li>

<li role="presentation" class="dropdown-header">第二部分菜单头部</li>

…

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

</ul>

</div>

.dropdown-header {

  display: block;

  padding: 3px 20px;

  font-size: 12px;

  line-height: 1.42857143;

  color: #999;

}

示例

              

下拉菜单（对齐方式）：在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名

<div class="dropdown">

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

  下拉菜单

  <span class="caret"></span>

  </button>

  <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">

   …

  </ul>

</div>

源码

.dropdown-menu.pull-right {

  right: 0;

  left: auto;

}

.dropdown-menu-right {

  right: 0;

  left: auto;

}

同时一定要为.dropdown添加float:leftcss样式。

.dropdown{

  float: left;

}

示例+源码

下拉菜单（菜单项状态）：class="active"、class="disabled"

<div class="dropdown">

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

  下拉菜单

  <span class="caret"></span>

  </button>

  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

    <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

    ….

    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

  </ul>

</div>

//源码

.dropdown-menu > .active > a,

.dropdown-menu > .active > a:hover,

.dropdown-menu > .active > a:focus {

  color: #fff;

  text-decoration: none;

  background-color: #428bca;

  outline: 0;

}

.dropdown-menu > .disabled > a,

.dropdown-menu > .disabled > a:hover,

.dropdown-menu > .disabled > a:focus {

  color: #999;

}

.dropdown-menu > .disabled > a:hover,

.dropdown-menu > .disabled > a:focus {

  text-decoration: none;

  cursor: not-allowed;

  background-color: transparent;

  background-image: none;

  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);

}

示例

按钮

按钮组  类名btn-group

<div class="btn-group">

  <button type="button" class="btn btn-default">

     <span class="glyphicon glyphicon-step-backward"></span>

  </button>

   …

  <button type="button" class="btn btn-default">

     <span class="glyphicon glyphicon-step-forward"></span>

  </button>

</div>

源码

.btn-group,

.btn-group-vertical {

  position: relative;

  display: inline-block;

  vertical-align: middle;

}

.btn-group > .btn,

.btn-group-vertical > .btn {

  position: relative;

  float: left;

}

.btn-group > .btn:hover,

.btn-group-vertical > .btn:hover,

.btn-group > .btn:focus,

.btn-group-vertical > .btn:focus,

.btn-group > .btn:active,

.btn-group-vertical > .btn:active,

.btn-group > .btn.active,

.btn-group-vertical > .btn.active {

  z-index: 2;

}

.btn-group > .btn:focus,

.btn-group-vertical > .btn:focus {

  outline: none;

}

.btn-group .btn + .btn,

.btn-group .btn + .btn-group,

.btn-group .btn-group + .btn,

.btn-group .btn-group + .btn-group {

   margin-left: -1px;

}

  1、默认所有按钮都有圆角

  2、除第一个按钮和最后一个按钮（下拉按钮除外），其他的按钮都取消圆角效果

  3、第一个按钮只留左上角和左下角是圆角

  4、最后一个按钮只留右上角和右下角是圆角

对应的源码如下：

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {

  border-radius: 0;

}

.btn-group > .btn:first-child {

  margin-left: 0;

}

.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {

  border-top-right-radius: 0;

  border-bottom-right-radius: 0;

}

.btn-group > .btn:last-child:not(:first-child),

.btn-group > .dropdown-toggle:not(:first-child) {

  border-top-left-radius: 0;

  border-bottom-left-radius: 0;

}

.btn-group > .btn-group {

  float: left;

}

.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {

  border-radius: 0;

}

.btn-group > .btn-group:first-child> .btn:last-child,

.btn-group > .btn-group:first-child> .dropdown-toggle {

  border-top-right-radius: 0;

  border-bottom-right-radius: 0;

}

.btn-group > .btn-group:last-child> .btn:first-child {

  border-top-left-radius: 0;

  border-bottom-left-radius: 0;

}

示例

按钮（按钮工具栏） 类名btn-toolbar

.btn-group-lg:大按钮组   .btn-group-sm:小按钮组   .btn-group-xs:超小按钮组

<div class="btn-toolbar">

  <div class="btn-group">

    …

  </div>

  <div class="btn-group">

    …

  </div>

  <div class="btn-group">

    …

  </div>

  <div class="btn-group">

    …

  </div>

</div>

源码

.btn-toolbar {

  margin-left: -5px;

}

.btn-toolbar .btn-group,

.btn-toolbar .input-group {

  float: left;

}

.btn-toolbar > .btn,

.btn-toolbar > .btn-group,

.btn-toolbar > .input-group {

  margin-left: 5px;

}

注意在”btn-toolbar”上清除浮动。

.btn-toolbar:before,

.btn-toolbar:after｛

　display: table;

content: " ";

｝

.btn-toolbar:after{

  clear: both;

}

示例

按钮（嵌套分组）： “btn-group”和普通的按钮放在同一级。

<div class="btn-group">

<button class="btnbtn-default" type="button">首页</button>

<button class="btnbtn-default" type="button">产品展示</button>

<button class="btnbtn-default" type="button">案例分析</button>

<button class="btnbtn-default" type="button">联系我们</button>

<div class="btn-group">

   <button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>

   <ul class="dropdown-menu">

         <li><a href="##">公司简介</a></li>

         <li><a href="##">企业文化</a></li>

         <li><a href="##">组织结构</a></li>

         <li><a href="##">客服服务</a></li>

    </ul>

</div>

</div>

源码

.btn-group > .btn-group {

  float: left;

}

.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {

  border-radius: 0;

}

.btn-group > .btn-group:first-child> .btn:last-child,

.btn-group > .btn-group:first-child> .dropdown-toggle {

  border-top-right-radius: 0;

  border-bottom-right-radius: 0;

}

.btn-group > .btn-group:last-child> .btn:first-child {

  border-top-left-radius: 0;

  border-bottom-left-radius: 0;

}

.btn-group .dropdown-toggle:active,

.btn-group.open .dropdown-toggle {

  outline: 0;

}

.btn-group > .btn + .dropdown-toggle {

  padding-right: 8px;

  padding-left: 8px;

}

.btn-group > .btn-lg + .dropdown-toggle {

  padding-right: 12px;

  padding-left: 12px;

}

.btn-group.open .dropdown-toggle {

  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);

  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);

}

.btn-group.open .dropdown-toggle.btn-link {

  -webkit-box-shadow: none;

  box-shadow: none;

}

示例

按钮（垂直分组）：类名“btn-group-vertical”

<div class="btn-group-vertical">

<button class="btnbtn-default" type="button">首页</button>

<button class="btnbtn-default" type="button">产品展示</button>

<button class="btnbtn-default" type="button">案例分析</button>

<button class="btnbtn-default" type="button">联系我们</button>

<div class="btn-group">

   <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>

   <ul class="dropdown-menu">

      <li><a href="##">公司简介</a></li>

      <li><a href="##">企业文化</a></li>

      <li><a href="##">组织结构</a></li>

      <li><a href="##">客服服务</a></li>

</ul>

</div>

</div>

源码

.btn-group-vertical > .btn,

.btn-group-vertical > .btn-group,

.btn-group-vertical > .btn-group > .btn {

  display: block;

  float: none;

  width: 100%;

  max-width: 100%;

}

.btn-group-vertical > .btn-group > .btn {

  float: none;

}

.btn-group-vertical > .btn + .btn,

.btn-group-vertical > .btn + .btn-group,

.btn-group-vertical > .btn-group + .btn,

.btn-group-vertical > .btn-group + .btn-group {

  margin-top: -1px;

  margin-left: 0;

}

.btn-group-vertical > .btn:not(:first-child):not(:last-child) {

  border-radius: 0;

}

.btn-group-vertical > .btn:first-child:not(:last-child) {

  border-top-right-radius: 4px;

  border-bottom-right-radius: 0;

  border-bottom-left-radius: 0;

}

.btn-group-vertical > .btn:last-child:not(:first-child) {

  border-top-left-radius: 0;

  border-top-right-radius: 0;

  border-bottom-left-radius: 4px;

}

.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {

  border-radius: 0;

}

.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,

.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {

  border-bottom-right-radius: 0;

  border-bottom-left-radius: 0;

}

.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {

  border-top-left-radius: 0;

  border-top-right-radius: 0;

示例

                    

按钮（等分按钮） “btn-group-justified”类名

特别声明：在制作等分按钮组时，请尽量使用<a>标签元素来制作按钮，因为使用<button>标签元素时，使用display:table在部分浏览器下支持并不友好。

<div class="btn-wrap">

<div class="btn-group btn-group-justified">

  <a class="btnbtn-default" href="#">首页</a>

  <a class="btnbtn-default" href="#">产品展示</a>

  <a class="btnbtn-default" href="#">案例分析</a>

  <a class="btnbtn-default" href="#">联系我们</a>

</div>

</div>

源码

.btn-group-justified {

  display: table;

  width: 100%;

  table-layout: fixed;

  border-collapse: separate;

}

.btn-group-justified > .btn,

.btn-group-justified > .btn-group {

  display: table-cell;

  float: none;

  width: 1%;

}

.btn-group-justified > .btn-group .btn {

  width: 100%;

}

示例

按钮下拉菜单

按钮下拉菜单从外观上看和下拉菜单效果基本上是一样的；简单点说就是点击一个按钮，会显示隐藏的下拉菜单

<div class="btn-group">

      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>

      <ul class="dropdown-menu">

          <li><a href="##">按钮下拉菜单项</a></li>

          <li><a href="##">按钮下拉菜单项</a></li>

          <li><a href="##">按钮下拉菜单项</a></li>

          <li><a href="##">按钮下拉菜单项</a></li>

      </ul>

</div>

源码：

.btn-group .dropdown-toggle:active,

.btn-group.open .dropdown-toggle {

  outline: 0;

}

.btn-group > .btn + .dropdown-toggle {

  padding-right: 8px;

  padding-left: 8px;

}

.btn-group > .btn-lg + .dropdown-toggle {

  padding-right: 12px;

  padding-left: 12px;

}

.btn-group.open .dropdown-toggle {

  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);

          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);

}

.btn-group.open .dropdown-toggle.btn-link {

  -webkit-box-shadow: none;

          box-shadow: none;

}

示例

按钮的向下向上三角形   类名.dropup向上

<div class="btn-group dropup">

  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>

  <ul class="dropdown-menu">

        <li><a href="##">按钮下拉菜单项</a></li>

        <li><a href="##">按钮下拉菜单项</a></li>

        <li><a href="##">按钮下拉菜单项</a></li>

        <li><a href="##">按钮下拉菜单项</a></li>

  </ul>

</div>

解析

按钮的向下三角形，我们是通过在<button>标签中添加一个“<span>”标签元素，并且命名为“caret”:

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>

源码：

.caret {                     //生成三角形

  display: inline-block;

  width: 0;

  height: 0;

  margin-left: 2px;

  vertical-align: middle;

  border-top: 4px solid;

  border-right: 4px solid transparent;

  border-left: 4px solid transparent;

}

在按钮中的三角形“caret”做了一定的样式处理：

.btn .caret {

  margin-left: 0;

}

.btn-lg .caret {

  border-width: 5px 5px 0;

  border-bottom-width: 0;

}

.dropup .btn-lg .caret {

  border-width: 0 5px 5px;

}

向上三角与向下三角的区别：其实就是改变了一个border-bottom的值。

.dropup .caret,

.navbar-fixed-bottom .dropdown .caret {

  content: "";

  border-top: 0;

  border-bottom: 4px solid;

}

示例

bootstrap学习笔记(菜单.按钮)的更多相关文章

  1. bootstrap学习笔记细化(按钮)

    button:btn 圆角灰色按钮 button:btn btn-default 圆角灰色边框按钮 button:btn btn-success 绿色 button:btn btn-primary 蓝 ...

  2. Bootstrap 学习笔记11 按钮和折叠插件

     复选框: <div class="btn-group" data-toggle="buttons"> <label for="se ...

  3. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  4. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  5. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  6. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  7. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  8. Bootstrap学习笔记（5）--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

    实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...

  9. Bootstrap学习笔记博客

    本片博客用于记录之后要用到Bootstrap的学习笔记   概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...

随机推荐

  1. 考试题 T2

    题意分析 首先 要求起点终点不连通 再结合数据范围 就是最小割了 首先我们可以建一个图出来 如果\(x\)可以到\(y\)的话 那么我们就从\(x\)向\(y\)连一条代价为\(h[x]-h[y]+1 ...

  2. [redis]复制机制，调优，故障排查

    在redis的安装目录下首先启动一个redis服务,使用默认的配置文件,作为主服务 ubuntu@slave1:~/redis2$ ./redis-server ./redis.conf & ...

  3. leetcode-292-Nim Game（搬石子）

    题目描述: You are playing the following Nim Game with your friend: There is a heap of stones on the tabl ...

  4. ObjectMapper 动态用法

    class DymicObject {     private Object o; public DymicObject(Object o) {         this.o = o;     } p ...

  5. Exponentiation POJ-1001

    http://poj.org/problem?id=1001 //10000000 100000 #include<iostream> #include<cstring> us ...

  6. 踩方格 OpenJ_Bailian - 4103

    有一个方格矩阵,矩阵边界在无穷远处.我们做如下假设:a.    每走一步时,只能从当前方格移动一格,走到某个相邻的方格上:b.    走过的格子立即塌陷无法再走第二次:c.    只能向北.东.西三个 ...

  7. python常用工具

    创建规范目录 import os BASE_PATH = os.path.dirname(__file__) li = ['bin', 'conf', 'core', 'db','interface ...

  8. 牛客OI周赛8-提高组A-用水填坑

    牛客OI周赛8-提高组A-用水填坑 题目 链接: https://ac.nowcoder.com/acm/contest/403/A 来源:牛客网 时间限制:C/C++ 2秒,其他语言4秒 空间限制: ...

  9. VS2010一调试就卡死的问题解决方案 (转)

    前几天我的vs2010突然不能调试了.后来找了很多的解决方案都不能解决问题. 1. 删除所有的bin, debug 2. 重建工程. 3. 重新安装Silverlight的开发包. 还是不行. 最后是 ...

  10. javascript中prototype与__proto__

    1.prototype:构造函数独有的属性: __proto__:每个对象都有一个名为__proto__的属性: 注意:每个构造函数(自带与自创)都有一个prototype的属性,构造函数的proto ...