Bootstrap 教程第三课：制作有图标的按钮

Bootstrap所使用的是字体图标Glyphicons，这个字体包含200个图标。使用字体图标时需要注意几点：
1、每个图标字体都是有一个基类和相对应的图标类组成，如：

    <span class="glyphicon glyphicon-search"></span>

2、字体图标不能与其他元素共同存在，只能单独使用，使用时应创建span标签，并将基类和对应的图标类应用在span上。（如上代码）
3、应用字体图标的span不能有任何文本内容，也不能有子元素。
4、如果需要使用文字，应该在图标和文字之间添加一个空格。

现在我们正式开始实例，来制作一个文字图标的按钮。自然，先要按照要求写好HTML5文档格式，引入所需要的核心文件。

1、创建一个button按钮，给这个按钮添加.btn类，这个图标叫做“确定”，代码如下：

<button class="btn">确定</button>

2、现在我们想给这个按钮添加一个对号图标，对号字体图标对应的是. glyphicon .glyphicon-ok，现在将这两个类写到SPAN上，添加到代码中：

<button class="btn"><span class="glyphicon glyphicon-ok"></span> 确定</button>

效果如下：

3、还可以给这个按钮添加上默认的样式.btn-default，或者是.btn-primary，效果如下：

上图实例中，确定使用了.btn-primary类，取消使用了.btn-default类样式，同时应用的字体图标是glyphicon-remove.

Bootstrap 教程第三课：制作有图标的按钮相关推荐

Bootstrap 教程第四课：制作一组功能图标按钮
上一节内容,我们讲到在Bootstrap中,如何使用文字图标制作带有图标的按钮( Bootstrap教程第三课:制作有图标的按钮),这节课,我们将在上一节的基础上,进行一组功能图标按钮的制作. 我们以 ...
Lance老师UI系列教程第三课-QQ登录注册界面的实现（android-2012最新版）
分类: android UI教程2012-08-06 22:37 3731人阅读评论(6) 收藏举报 uiandroidqqlayoutbutton UI系列教程第三课:腾讯登录注册界面的实现今 ...
火山PC抓取快递物流查询接口教程第三课
本源码转载自利快云https://www.lkuaiy.com/ 火山PC抓取快递物流查询接口教程第三课一.本课目标本节以网页公开快递查询网站(http://www.kuaidi.com)进行教学 ...
易语言miniblink交互教程——第三课易语言与 Miniblink 交互
今天来给大家讲解一下易语言&miniblink交互教程的第三课,也就是如何让易语言与Miniblink进行数据交互,相互传递参数. 1.用易语言调用JS 调用JS的方式很简单,只需要一句代码即 ...
html课做一个网页,菜鸟自学建站 HTML 第三课制作我的第一个网页_html/css_WEB-ITnose...
上一课我们了解了Dreamweaver的工作界面,从这节课开始,我们由浅入深的开始学习网页的制作. 首先打开Dreamweaver,制作网页首先要新建一个文档,就像我们写文稿需要一张纸一样. 只有有了 ...
React入门教程第三课--gulp编译优化
上节课中我提到了,在gulpfile中编写task编译js和sass的task. 然后在项目中使用时发现,当项目内容越写越多时,编译速度会越来越久. 看了一下编译过程.上次gulpfile中的定义是当 ...
android studio 自动生成sql语句,Android Studio Plugin 插件开发教程（三） —— 制作一个自动生成数据库代码的插件...
项目源码系列教程插件介绍本篇实战撸个自动生成安卓Sqlite数据库代码的插件,先演示下最终效果 db文件夹下的都是插件自动生成的,而MainActivity里面的代码是我提前写好的,用于实验插件 ...
学个锤子 | .Net零基础逆向教程第三课（壳与作业）
今天要讲的内容加入了"壳",在这里我推荐新手尽量使用脱壳机进行脱壳. 壳在这里读 ke,二声.晚上冒着生命危险在群里请教了一下,因原单词为 shell,所以 ke 的读法是正确的. ...
MT4/MQL4入门到精通EA教程第三课-MQL语言常用函数（三）-K线取值常用功能函数
double iOpen(); double iOpen( string symbol, // 交易品种 int timeframe, // 周期 int shift // K线柱 ); iOpen( ...

Bootstrap 教程第三课：制作有图标的按钮

Bootstrap 教程第三课：制作有图标的按钮相关推荐

最新文章

热门文章