---恢复内容开始---

一.小图标组件

Bootstrap 提供了免费的 263 个小图标(数了两次),具体可以参考中文官网的组件

链接:http://v3.bootcss.com/components/#glyphicons。部分图标如下:

可以使用<i>或<span>标签来配合使用,具体如下:

//复制图标下的两个class使用小图标

<i class="glyphicon glyphicon-star"></i>
<span class="glyphicon glyphicon-star"></span>

//也可以结合按钮

<button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span>
</button>

//从大到小

    <button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span>
</button>
<button class="btn btn-default btn">
<span class="glyphicon glyphicon-star"></span>
</button>
<button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star"></span>
</button>
<button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star"></span>
</button>

二.下拉菜单组件 下拉菜单,就是点击一个元素或按钮,触发隐藏的列表显示出来。

//基本格式

 
<div class=" container dropdown">
<button class="btn btn-success" type="button" data-toggle="dropdown"> 下拉菜单 <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>

按钮和菜单需要包裹在.dropdown 的容器里,而作为被点击的元素按钮需要设置 data-toggle="dropdown"才能有效。
对于菜单部分,设置 class="dropdown-menu"才能 自动隐藏并添加固定样式。设置 class="caret"表示箭头,可上可下。

//设置向上触发

<div class="dropup">

//菜单项居右对齐,默认值是 dropdown-menu-left

<div class=" container dropdown">
<button class="btn btn-success" type="button" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>

//设置菜单的标题,不要加超链接

<div class=" container dropdown">
<button class="btn btn-success" type="button" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">网站导航</li>
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>

//设置菜单的分割线

<div class=" container dropdown">
<button class="btn btn-success" type="button" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">网站导航</li>
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li class="divider"><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>

//设置菜单的禁用项

<div class=" container dropdown">
<button class="btn btn-success" type="button" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">网站导航</li>
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li class="disabled"><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>

//让菜单默认显示

<div class="dropdown open">
<button class="btn btn-success" type="button" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">网站导航</li>
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li class="disabled"><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>

三.按钮组组件

按钮组就是多个按钮集成在一个容器里形成独有的效果。

//基本格式

<div class="btn-group">
<button type="button" class="btn btn-default">左</button>
<button type="button" class="btn btn-default">中</button>
<button type="button" class="btn btn-default">右</button>
</div>

//将多个按钮组整合起来便于管理

  <div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">左</button>
<button type="button" class="btn btn-default">中</button>
<button type="button" class="btn btn-default">右</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
</div>

//设置按钮组大小

<div class="btn-group btn-group-lg"></div>
<div class="btn-group btn-group-sm"></div>
<div class="btn-group btn-group-xs"> </div>

//嵌套一个分组,比如下拉菜单

<div class="btn-group">
<button type="button" class="btn btn-default">左</button>
<button type="button" class="btn btn-default">中</button>
<button type="button" class="btn btn-default">右</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜单 <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>

注意:这里<div>中并没有实现 class="dropdown",通过源码分析知道嵌套本身已经 有定位就不需要再设置。
而右边的圆角只要多加一个 class="dropdown-toggle"即可。

//设置按钮组垂直排列

<div class="btn-group-vertical">
<button type="button" class="btn btn-default">左</button>
<button type="button" class="btn btn-default">中</button>
<button type="button" class="btn btn-default">右</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜单 <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>

//设置两端对齐按钮组,使用<a>标签

<div class="btn-group-justified">
<a type="button" class="btn btn-default">左</a>
<a type="button" class="btn btn-default">中</a>
<a type="button" class="btn btn-default">右</a>
</div>

//如果需要使用<button>标签,则需要对每个按钮进行群组

<div class="btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default">左</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">中</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">右</button>
</div>
</div>

四.按钮式下拉菜单

//群组按钮下拉菜单

<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜单 <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 class="btn-group">
<button type="button" class="btn btn-default">下拉菜单</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <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 class="btn-group dropup">

Bootstrap 图标菜单按钮组件的更多相关文章

  1. 第二百三十七节,Bootstrap图标菜单按钮组件

    Bootstrap图标菜单按钮组件 学习要点: 1.小图标组件 2.下拉菜单组件 3.按钮组组件 4.按钮式下拉菜单 本节课我们主要学习一下 Bootstrap 的三个组件功能:小图标组件.下拉菜单组 ...

  2. Bootstrap(6)图标菜单按钮组件

    一.小图标组件 Bootstrap 提供了免费的 263 个小图标(数了两次),具体可以参考中文官网的组件链接:http://v3.bootcss.com/components/#glyphicons ...

  3. 第二百零七节,jQuery EasyUI,MenuButton(菜单按钮)组件

    jQuery EasyUI,MenuButton(菜单按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 MenuButton(菜单按钮)组件的使用方法 ...

  4. Flutter学习笔记(11)--文本组件、图标及按钮组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认 ...

  5. Bootstrap学习-菜单-按钮-导航

    1.下拉菜单(基本用法) 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“d ...

  6. JS组件系列——Bootstrap右键菜单解决方案:ContextMenu

    前言:有段时间没发表随笔了,过个年人都变得懒了.新年刚来上班,今天正好得空,将去年遗留的两个小组件总结记录下.有朋友跟我说:你的bootstrap组件要能够形成一个可以满足一般项目需求的系列组件,才有 ...

  7. 详解Bootstrap按钮组件(二)

    按钮下拉菜单 按钮下拉菜单仅从外观上看和下拉菜单效果基本上是一样的.它们唯一的不同是外部容器div.dropdown换成了div.btn-group <div class="btn-g ...

  8. BootStrap学习(2)_下拉菜单&按钮组

    一.下拉菜单 1.基本下拉菜单 如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <ht ...

  9. bootstrap带图标的按钮与图标做连接

    bootstrap通过引入bootstrap的JS与css文件,给元素添加class属性即可. 使用图标只需要加入一个span,class属性设置为对应的图标属性即可.图标对应的class属性可以参考 ...

随机推荐

  1. LoadRunner中取Request、Response

    LoadRunner中取Request.Response LoadRunner两个“内置变量”: 1.REQUEST,用于提取完整的请求头信息. 2.RESPONSE,用于提取完整的响应头信息. 响应 ...

  2. 状态压缩 + 暴力 HDOJ 4770 Lights Against Dudely

    题目传送门 题意:有n*m的房间,'.'表示可以被点亮,'#'表示不能被点亮,每点亮一个房间会使旁边的房间也点亮,有意盏特别的灯可以选择周围不同方向的房间点亮.问最少需要多少灯使得所有房间点亮 分析: ...

  3. 枚举 POJ 1753 Flip Game

    题目地址:http://poj.org/problem?id=1753 /* 这题几乎和POJ 2965一样,DFS函数都不用修改 只要修改一下change规则... 注意:是否初始已经ok了要先判断 ...

  4. Oracle 使用小计(2)

    1.时间转换 1.1 字符串转时间 今天需要写SQL语句更新数据库的时间,按照SQL Server的习惯写成 UPDATE TABLE A ’ WHERE ORDER_ID = ‘A12345678’ ...

  5. bzoj1016 [JSOI2008]最小生成树计数

    1016: [JSOI2008]最小生成树计数 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 3517  Solved: 1396[Submit][St ...

  6. How far away[HDU2586]

    How far away ? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  7. silverlight 跨域访问 wcf

    先介绍一下我的测试项目,我用flash和silverlight一同来调用一个webservice,一个flash客户端,一个silverlight客户端,一个web项目来host flash和silv ...

  8. TYVJ P1045 &&洛谷 1388 最大的算式 Label:dp

    描述 题目很简单,给出N个数字,不改变它们的相对位置,在中间加入K个乘号和N-K-1个加号,(括号随便加)使最终结果尽量大.因为乘号和加号一共就是N-1个了,所以恰好每两个相邻数字之间都有一个符号.例 ...

  9. TYVJ P1093 验证数独 Label:none

    背景 XX学校风靡一款智力游戏,也就是数独(九宫格),先给你一个数独,并需要你验证是否符合规则. 描述 具体规则如下:每一行都用到1,2,3,4,5,6,7,8,9,位置不限,每一列都用到1,2,3, ...

  10. Linux压力测试工具

    1 http_load:http://www.oschina.net/p/http_load 命令行输入man http_load 或者 http_load -h可以看到工具的使用方式: 参数说明: ...