下拉菜单

<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. CSS--浮动（float）布局

    浮动概述:浮动,指的是元素标签使用float属性.应用float属性的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.浮动的本质是让文字围绕图片,但现在很多时候使用浮动进行布局 ...

  2. Eclipse 的SVN 的分支

    分支 概念 在版本控制过程中,使用多个分支同时推进多个不同功能开发.   不使用分支开发:人与人之间协作   使用分支开发:小组和小组之间协作 作用  多个功能开发齐头并进同时进行 任何一个分支上功能 ...

  3. 将参数传递给ASP.NET Core 2.0中的中间件

    问题 在ASP.NET Core的安装过程中,如何将参数传递给中间件? 解 在一个空的项目中添加一个POCO类来保存中间件的参数, publicclass GreetingOptions { publ ...

  4. compact framework windows mobile wm c#代码 创建快捷方式

    已经2018年了,windows mobile已经宣布不维护狠多年了,不要问我为什么还在开发windows mobile的程序,我也不想.公司有一批手持扫描枪设备依然是windows mobile的程 ...

  5. 新创建的数据库，执行db2look时，遇到package db2lkfun.bnd bind failed

    在新创建的数据库中,执行db2look的时候,存在这样的问题 db2v97i1@oc0644314035 ~]$ db2look -d sample -e -l -o db2look.ddl -- N ...

  6. css定位问题的记录

    postion:relative是子块级元素面向父级元素的相对定位,定位关键字使用left/right/top/bottom.兄弟块元素之间相对进行定位,但是position移动后,原位置依然保留.而 ...

  7. Maven项目版本继承 – 我必须指定父版本？

    问题描述 我有两个项目:父项目:A,子项目:B 在A /pom.xml中: <groupId>com.dummy.bla</groupId> <artifactId> ...

  8. Google Java 编程风格指南 —— 见微知著

    目录 前言 源文件基础 源文件结构 格式 命名约定 编程实践 Javadoc 后记 前言 这份文档是Google Java编程风格规范的完整定义.当且仅当一个Java源文件符合此文档中的规则, 我们才 ...

  9. Perl入门

    Perl 是一门开源的脚本语言,由 Larry Wall 所创造,该语言以实用,快速开发为主要目标,与当前流行的面向对象结构化编程有些格格不入,但这并不妨碍 Perl 被广泛流传和使用,世界范围内围绕 ...

  10. Jenkins 中创建项目时没有Maven项目怎么办

    如果在创建项目时候,没有“创建一个Maven 项目”的选项. 你需要安装Maven项目插件:Maven Integration plugin . 点击“可选插件”  然后在右边的过滤输入框中输入搜索关 ...