bootstrap学习笔记(菜单.按钮)

下拉菜单

<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学习笔记(菜单.按钮)的更多相关文章

bootstrap学习笔记细化(按钮)
button:btn 圆角灰色按钮 button:btn btn-default 圆角灰色边框按钮 button:btn btn-success 绿色 button:btn btn-primary 蓝 ...
Bootstrap 学习笔记11 按钮和折叠插件
复选框: <div class="btn-group" data-toggle="buttons"> <label for="se ...
bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态加入导航条标题在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
Bootstrap学习笔记-布局
Bootstrap学习笔记-布局默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...
Bootstrap学习笔记（5）--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单
实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...
Bootstrap学习笔记博客
本片博客用于记录之后要用到Bootstrap的学习笔记概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...

随机推荐

浅析Postgres中的并发控制(Concurrency Control)与事务特性(下)
上文我们讨论了PostgreSQL的MVCC相关的基础知识以及实现机制.关于PostgreSQL中的MVCC,我们只讲了元组可见性的问题,还剩下两个问题没讲.一个是"Lost Update& ...
js及Java中对于两个时间日期的判断脚本
JS脚本: function checkDateIsEdited(createDate) { var compareDate = createDate.replace("-",&q ...
L06-Ubuntu系统中部署Vagrant和VirtualBox
一.前言 1.Vagrant是一个搭建完整的虚拟开发环境的工具~~~更多关于Vagrant理论可查看这篇博文https://www.cnblogs.com/davenkin/p/vagrant-vir ...
request.getSession(true/false)的区别
javax.servlet.http.HttpServletRequest接口有两个方法:getSession(boolean)和getSession(). 具体什么区别,跟踪源码分析下,先摆出结论: ...
Hexo博客系列(二)-在多台机器上利用Hexo发布博客
[原文链接]:https://www.tecchen.xyz/blog-hexo-env-02.html 我的个人博客:https://www.tecchen.xyz,博文同步发布到博客园. 由于精力 ...
session_destroy()和session_unset()的理解
session_destroy 是注销所有的session变量,并且结束session会话目前是删除当前用户对应的session文件以及释放session id值 ,但是但是内存中的$_SESSIO ...
MySQL3534
1.mysqld install 2.mysqld --initialize-insecure自动生成无密码的root用户 3.mysql -uroot即可登录
"Visual Studio Code is unable to watch for file changes in this large workspace"
https://code.visualstudio.com/docs/setup/linux#_visual-studio-code-is-unable-to-watch-for-file-chang ...
错误：‘lock_guard’ 在此作用域中尚未声明
解决:修改报错文件,加入#include <boost/thread/lock_guard.hpp>
SQL 常用脚本，非常适用
一.基础 1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- ...

bootstrap学习笔记(菜单.按钮)

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

随机推荐

热门专题