3.1Bootstrap学习组件篇之下拉菜单、图标
2016-06-13 21:21
465 查看
本文章转载于http://blog.csdn.net/a316212802/article/details/24940577
1、Glyphicons图标
包括200个来自Glyphicon Halflings的字体图标。Glyphicons Halflings
一般不允许免费使用,但是他们的作者允许Bootstrap免费使用。为了表示感谢,希望你在使用时加上Glyphicons 的链接。
好多图标~~~⊙﹏⊙b汗
那么如何使用呢?
出于性能的考虑,所有图标都需要基类和单独的图标类。把下面的代码放在任何地方都能使用。为了留下正确的内补(padding),一定要在图标和文本之间加上一个空格。
图标 class 不能和其它元素联合使用,因为这些图标被设计为独立的元素、独立使用。
[html]
view plain
copy
print?
<button type="button" class="btn btn-default btn-lg">
<span style="white-space:pre"> </span><span class="glyphicon glyphicon-star"></span> Star<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span></button>
<span style="white-space:pre"> </span><button type="button" class="btn btn-default btn-lg">
<span style="white-space:pre"> </span><span class="glyphicon glyphicon-search"></span>
<span style="white-space:pre"> </span></button>
小例子:
把它们放在按钮,工具栏的按钮组中,导航或输入栏的前面都可以。
预览:
2、下拉菜单
用于显示链接列表的可切换、有上下文的菜单
1)、案例
将下拉菜单触发器和下拉菜单都包裹在
代码段:
[html]
view plain
copy
print?
<div class="dropdown">
<button class="btn 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 href="#" role="menuitem" tabindex="-1">Action</a></li>
<li role="presentation"><a href="#" role="menuitem" tabindex="-1">Another action</a></li>
<li role="presentation"><a href="#" role="menuitem" tabindex="-1">something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a href="#" role="menuitem" tabindex="-1">separated link</a></li>
</ul>
</div>
一开始的时候没有效果,而且官网上的Button的class中添加了sr-only导致触发事件的源隐藏掉了。所以去掉sr-only。
另:必须引入bootstrap.js(或者bootstrap.min.js)和jQuery.js
预览效果:
一个Dropdown按钮和右侧有个小图标caret,当然这个小图标和按钮的文本是平级的。
首先看button按钮中有个dropdown-toggle,还有一个data-toggle属性,根据这个属性来弹出下来列表。
紧接着ul标签的dropdown-menu应该是和上面button按钮的样式类dropdown-toggle联合使用,在通过aria-labelledby绑定上面的button按钮。
第四个li标签中有个divider其实是一个分割线的样式类。
给下拉菜单
在任何下拉菜单中均可通过添加标题来标明一组动作。
给下拉菜单中的
继续修改上面的代码将Something else here行的代码进行替换
主要是在li标签中添加.disabled的样式类。
你运行之后可以查看效果,其实效果和上面的标题样式差不多,当你点击的时候会有一个禁用的图标显示。
1、Glyphicons图标
包括200个来自Glyphicon Halflings的字体图标。Glyphicons Halflings
一般不允许免费使用,但是他们的作者允许Bootstrap免费使用。为了表示感谢,希望你在使用时加上Glyphicons 的链接。
好多图标~~~⊙﹏⊙b汗
那么如何使用呢?
如何使用
出于性能的考虑,所有图标都需要基类和单独的图标类。把下面的代码放在任何地方都能使用。为了留下正确的内补(padding),一定要在图标和文本之间加上一个空格。
不要和其它组件混合使用
图标 class 不能和其它元素联合使用,因为这些图标被设计为独立的元素、独立使用。[html]
view plain
copy
print?
<button type="button" class="btn btn-default btn-lg">
<span style="white-space:pre"> </span><span class="glyphicon glyphicon-star"></span> Star<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span></button>
<span style="white-space:pre"> </span><button type="button" class="btn btn-default btn-lg">
<span style="white-space:pre"> </span><span class="glyphicon glyphicon-search"></span>
<span style="white-space:pre"> </span></button>
小例子:
把它们放在按钮,工具栏的按钮组中,导航或输入栏的前面都可以。
预览:
2、下拉菜单
用于显示链接列表的可切换、有上下文的菜单
1)、案例
将下拉菜单触发器和下拉菜单都包裹在
.dropdown里,或者另一个声明了
position: relative;的元素。然后添加组成菜单的HTML代码。
代码段:
[html]
view plain
copy
print?
<div class="dropdown">
<button class="btn 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 href="#" role="menuitem" tabindex="-1">Action</a></li>
<li role="presentation"><a href="#" role="menuitem" tabindex="-1">Another action</a></li>
<li role="presentation"><a href="#" role="menuitem" tabindex="-1">something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a href="#" role="menuitem" tabindex="-1">separated link</a></li>
</ul>
</div>
一开始的时候没有效果,而且官网上的Button的class中添加了sr-only导致触发事件的源隐藏掉了。所以去掉sr-only。
另:必须引入bootstrap.js(或者bootstrap.min.js)和jQuery.js
预览效果:
一个Dropdown按钮和右侧有个小图标caret,当然这个小图标和按钮的文本是平级的。
首先看button按钮中有个dropdown-toggle,还有一个data-toggle属性,根据这个属性来弹出下来列表。
紧接着ul标签的dropdown-menu应该是和上面button按钮的样式类dropdown-toggle联合使用,在通过aria-labelledby绑定上面的button按钮。
第四个li标签中有个divider其实是一个分割线的样式类。
对齐选项
给下拉菜单.dropdown-menu加上
.text-right使文字右对齐。
<div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div>
标题
在任何下拉菜单中均可通过添加标题来标明一组动作。<div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">Dropdown header</li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Dropdown header</li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div>
禁用的菜单项
给下拉菜单中的<li>加上
.disabled禁用链接。
继续修改上面的代码将Something else here行的代码进行替换
<li class="disabled" role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
主要是在li标签中添加.disabled的样式类。
你运行之后可以查看效果,其实效果和上面的标题样式差不多,当你点击的时候会有一个禁用的图标显示。
相关文章推荐
- GUI - Web前端开发框架
- Web布局连载——两栏固定布局(五)
- bootstrap初试进度条
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- angular 指令简述
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 如何优雅地处理前端异常?
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页