Bootstrap 图标菜单按钮组件
---恢复内容开始---
一.小图标组件
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 图标菜单按钮组件的更多相关文章
- 第二百三十七节,Bootstrap图标菜单按钮组件
Bootstrap图标菜单按钮组件 学习要点: 1.小图标组件 2.下拉菜单组件 3.按钮组组件 4.按钮式下拉菜单 本节课我们主要学习一下 Bootstrap 的三个组件功能:小图标组件.下拉菜单组 ...
- Bootstrap(6)图标菜单按钮组件
一.小图标组件 Bootstrap 提供了免费的 263 个小图标(数了两次),具体可以参考中文官网的组件链接:http://v3.bootcss.com/components/#glyphicons ...
- 第二百零七节,jQuery EasyUI,MenuButton(菜单按钮)组件
jQuery EasyUI,MenuButton(菜单按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 MenuButton(菜单按钮)组件的使用方法 ...
- Flutter学习笔记(11)--文本组件、图标及按钮组件
如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认 ...
- Bootstrap学习-菜单-按钮-导航
1.下拉菜单(基本用法) 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“d ...
- JS组件系列——Bootstrap右键菜单解决方案:ContextMenu
前言:有段时间没发表随笔了,过个年人都变得懒了.新年刚来上班,今天正好得空,将去年遗留的两个小组件总结记录下.有朋友跟我说:你的bootstrap组件要能够形成一个可以满足一般项目需求的系列组件,才有 ...
- 详解Bootstrap按钮组件(二)
按钮下拉菜单 按钮下拉菜单仅从外观上看和下拉菜单效果基本上是一样的.它们唯一的不同是外部容器div.dropdown换成了div.btn-group <div class="btn-g ...
- BootStrap学习(2)_下拉菜单&按钮组
一.下拉菜单 1.基本下拉菜单 如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <ht ...
- bootstrap带图标的按钮与图标做连接
bootstrap通过引入bootstrap的JS与css文件,给元素添加class属性即可. 使用图标只需要加入一个span,class属性设置为对应的图标属性即可.图标对应的class属性可以参考 ...
随机推荐
- Android Studio 获取 sha1-wangfeng520@
WIN+R 打开“运行” 输入 CMD 回车 2 CD C:\Program Files\Java\jdk1.7.0_71\bin (JDK安装路径) keytool -list -v ...
- 计算几何 HDOJ 4720 Naive and Silly Muggles
题目传送门 /* 题意:给三个点求它们的外接圆,判断一个点是否在园内 计算几何:我用重心当圆心竟然AC了,数据真水:) 正解以后补充,http://www.cnblogs.com/kuangbin/a ...
- ural 1242. Werewolf
1242. Werewolf Time limit: 1.0 secondMemory limit: 64 MB Knife. Moonlit night. Rotten stump with a ...
- CSGrandeur的WebGL学习——WebGL教程
在线查看:http://csgrandeur.gitbooks.io/webgl-learn/content/ 离线mobi:http://files.cnblogs.com/files/CSGran ...
- SplendidCRM 如何添加及使用中文语言包
SplendidCRM 功能很强大,也支持多国语言,但关于中文语言安装的介绍在网上一直都找到,自已摸索了一下,成功使SplendidCRM应用中文,以下是安装方法. 版本号:SplendidCRM 7 ...
- BZOJ1770 : [Usaco2009 Nov]lights 燈
设$f[i]$表示$i$点按下开关后会影响到的点的集合,用二进制表示. 不妨设$n$为偶数,令$m=\frac{n}{2}$,对于前一半暴力$2^m$搜索所有方案,用map维护每种集合的最小代价. 对 ...
- java中特殊的String类型
Java中String是一个特殊的包装类数据有两种创建形式: String s = "abc"; String s = new String("abc"); 第 ...
- 【wikioi】1296 营业额统计
题目链接:http://www.wikioi.com/problem/1296/ 算法:Splay 这是非常经典的一道题目,用Splay树来维护营业额,每天的最小波动值就等于 min{树根-树根的前驱 ...
- c++ namespace的使用
** namespace:命名空间就是为解决C++中的变量.函数的命名冲突而服务的. ** namespace定义的格式基本格式是: namespace identifier { entitie ...
- Cobar_基于MySQL的分布式数据库服务中间件
Cobar是阿里巴巴研发的关系型数据的分布式处理系统,是提供关系型数据库(MySQL)分布式服务的中间件,该产品成功替代了原先基于Oracle的数据存储方案,它可以让传统的数据库得到良好的线性扩展,并 ...