下拉菜单

<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. Caused by: org.springframework.beans.factory.BeanCreationException: Could not autowire field: private com.******.seashell.bpc.query.query.service.FscBankPayCodeQueryService

    2019-03-19 16:22:14,945 WARN [main] (org.springframework.context.support.AbstractApplicationContext. ...

  2. SCIP | 数学规划求解器SCIP超详细的使用教程

    前言 小伙伴们大家好呀!继上次lp_solve规划求解器的推文出来以后,大家都期待着更多求解器的具体介绍和用法.小编哪敢偷懒,这不,赶在考试周之际,又在忙里偷闲中给大家送上一篇SCIP规划求解的推文教 ...

  3. 将python的代码文件打包成可执行文件

    1.使用pip install Pyinstaller  命令安装 2.使用命令 pyinstaller -F  *.py打包成exe 3.在\dist文件夹下找到exe; 一.pyinstaller ...

  4. [Re:从零开始的分布式] 0.x——分布式基础概念

    分布式的特点 1. 分布式 2. 对等性 3. 并发性 4. 缺乏全局时钟 5. 故障总是会发生 分布式环境的问题 1. 网络不可靠 2. 网络分区 3. 节点故障 CAP理论 一致性 可用性 分区容 ...

  5. server端获得到client端的IP地址的格式

    使用telnet,ping或其他client连接server端时,server端获得的client端的ip地址取决于client端使用的时ipv4还是ipv6地址. 例: client IPv4地址: ...

  6. Mac下使Iterm2开机启动不显示界面

    一.在登录项上添加Iterm2的启动项 二.打开Iterm2 1.启动后会显示Iterm2,此时点击关闭按钮,保证桌面上没有任何的控制台窗口. 2.按[Command]+[Shift]+[S],保存名 ...

  7. (转)Python 运算符

    原文:https://blog.csdn.net/liang19890820/article/details/69690954 简述 在 Python 中,运算符是执行算术或逻辑运算的特殊符号,操作的 ...

  8. 使用vue的v-model自定义 checkbox组件

    <template id='c'> <input type="checkbox" :checked="checked" v-on:change ...

  9. PHP之string之wordwrap()函数使用

    wordwrap (PHP 4 >= 4.0.2, PHP 5, PHP 7) wordwrap - Wraps a string to a given number of characters ...

  10. C#的可空类型与不可空类型

    null:为空,表示产量没有指向任何对象, 如:string = null; int a = null;//是错的 但可以这样,在类型后面加一个问号. int? a = null;//这就是正确的,是 ...