实例讲解Bootstrap中各种图标的使用技巧

2022-10-18 12:20:59 发布:网友投稿 来源：网友投稿
热度:29

Bootstrap是一款非常实用的前端框架之一，也是目前主流的前端框架。学习难度低，开发效率高，因此得到IT行业的广泛使用。现在，我们以实际例子出发，看看Bootstrap中图标如何使用吧。

操作方法

  • 01

    将Bootstrap前端框架的文件夹引入站点我们首先要在网上下载Bootstrap前端框架文件夹，解压之后然后将该文件夹引入到站点中，如下图所示：

  • 02

    新建文档双击桌面上的Dreamweaver图标，打开软件。在文件菜单栏中点击【文件】----【新建】----【HTML】，新建一张HTML类型的文档。

  • 03

    保存文件使用快捷键【ctrl+S】保存文件，会弹出文件保存位置，输入文件名和文件类型，文件名要做到见名知意，文件类型默认为all Document类型。然后点击【保存】按钮即可。

  • 04

    引入文件在head头部引入Bootstrap框架中的4个js文件，文件如下所示：<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/><script type="text/javascript" src="easyui/jquery.min.js"></script><script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

  • 05

    编写图标代码Bootstrap前端框架提供了很多的图标，我们随意引用如下几个图标，代码如下所示：<span class="glyphicon glyphicon-home"></span><br /><span class="glyphicon glyphicon-cog"></span><br /><span class="glyphicon glyphicon-apple"></span><br /><span class="glyphicon glyphicon-trash"></span>

  • 06

    启动wampserver服务器预览效果之前一定要先启动【wampserver服务器】，当桌面右下角的图标变成绿色即表示启动完成。

  • 07

    预防方法点击Dreamweaver软件中的【地球图标】，在弹出的下拉菜单中选择【预览在360se中】即表示在360浏览器中预览。

  • 08

    显示效果在360浏览器中可以看到显示Bootstrap前端框架的图标。以后都是按照这样的方法引用Bootstrap框架提供的图标。

特别提示

（1）前端框架的学习所用的工具一般采用Dreamweaver软件；<br/>（2）在使用Bootstrap前端框架之前一定要先引入3个js文件；<br/>（3）本文详细介绍了Bootstrap前端框架中提供的图标的使用方法，以后当需要用到图标时都是按照这样的方式引用。

下一篇：Word里怎么从第三页插入页码
上一篇：Java软件开发工具