Bootstrap官网的Bootstrap 3 字体图标的使用测试

Glyphicons字体图标的使用测试过程：

（1）打开Bootstrap官方网站（https://getbootstrap.com/），首页的界面如下：

（2）点击顶部导航栏的右边“v4.1” 的下拉按钮，在下拉菜单选项中选择“v3.3.7”版本。

（3）选中后页面刷新如下，点击“Components”。

（4）进去后，就能看到字体图标。

（5）使用之前，先到“Getting started”页面下载Bootstrap 3 的使用环境，这里首先下载源码文件来使用测试。下载步骤，进入“Getting started”页面，点击页面“Download Bootstrap” 进行下载。下载完毕后，把源码文件进行解压，将源码文件夹目录下的css目录中的bootstrap.min.css文件和js目录中的bootstrap.min.js文件复制到index.html的同一文件夹中进行使用。

index.html所处的文件夹目录结构如下，其中css目录下存放前面所述复制的bootstrap.min.css文件，js目录存放bootstrap.min.js文件。

（6）在index.html代码中引入bootstrap的css和js文件，引入方式如下。

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>

（7）回到“Components” 页面，往下拉取滚动条，点击Examples，就可以看到实例和显示的效果。

Examples实例的代码和展示效果如下

（8）复制实例代码到index.html，然后在浏览器查看。index.html的完整代码如下

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><link rel="stylesheet" href="css/bootstrap.min.css"><script src="js/bootstrap.min.js"></script>
</head>
<body>    <div class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span><span class="sr-only">Error:</span>Enter a valid email address</div>
</body>
</html>

在浏览器显示的效果如下，发现字体图标没显示。

（9）接着换Bootstrap CDN测试，再回到“Getting started”页面，复制CDN到index.html。

可以全部复制CDN使用，这里也可以简单复制使用。简单复制的CDN如下：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

使用CDN的完整代码如下

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>    <div class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span><span class="sr-only">Error:</span>Enter a valid email address</div>
</body>
</html>

在浏览器显示的效果如下，可以看到字体图标显示，与Bootstrap官网的实例是一样的。

补充：

字体图标的使用方法

<span class="字体图标名称"></span>

字体图标名称一般不用刻意去死记，使用时直接到官网复制名称到span标签的class中就可以。

例如，使用字体图标中的第一行第二个图标，把图标下方的名称复制进行使用。

使用代码

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

Bootstrap官网的Bootstrap 3 字体图标的使用测试相关推荐

angularjs封装bootstrap官网的时间插件datetimepicker
背景:angular与jquery类库的协作第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...
b关于bootstrap官网https://v4.bootcss.com/docs/layout/grid/关于栅格布局的学习和实践博客
一,首先,我们来认识一下什么是bootstrap 什么是Bootstrap? 工欲善其事,必先利其器,话说在前端开发中,如何快速的搭建一个网站页面呢? 在程序的世界里,最不缺的就是轮子,凡是你能想到 ...
BootStrap案例（基本组件和字体图标的使用）
目录一.书本搜索列表页面二.购物车页面三.结算窗口页面四.用户登录页面五.字体图标(Glyphicons)的使用一.书本搜索列表页面使用组件:Media object(媒体对象) 运行效 ...
bootstrap官网
这是一个java的库,能够构建响应式的应用,我的毕业设计就靠它了 https://getbootstrap.com/
teams测试性分析软件官网,基于TEAMS的双馈风力发电机测试性建模与分析
摘要: 随着新能源技术的推广与应用,风力发电技术取得了较大发展.近年来,我国风力发电机组新增装机量一直以较稳定速度逐年增长.同时,风力发电机装机容量的提升以及集成化.复杂化.自动化程度的增加,也对风力 ...
解决Bootstrap字体图标glyphicon无法显示的问题
我们在官网下载了Bootstrap3版本的文档使用时,在我们将bootstrap.min.css文件引入到自己Web项目中,使用字体图标glyphicon时,图标无法正常显示,例如: <!DOC ...
Bootstrap字体图标
Bootstrap提供了总共263种字体图标可以满足大部分的图标需求为了能够正常使用bootstrap.min.css文件的上一级目录必须要有 fonts 目录,并且里面有,不能够缺失 1.字体图 ...
Bootstrap 组件-字体图标
Bootstrap提供了总共263种字体图标可以满足大部分的图标需求为了能够正常使用bootstrap.min.css文件的上一级目录必须要有 fonts 目录,并且里面有,不能够缺失一个字体图 ...
Bootstrap组件学习笔记（一）——大纲、Glyphicons字体图标和下拉菜单
目录: 1.组件学习大纲 2.Glyphicons字体图标 3.下拉菜单 1.组件学习大纲 2. Glyphicons字体图标 bootstrap含有接近250多个字体图标( 图标表格地 ...
php矢量图图标,矢量图（字体图标）
矢量图(即放大不失真) 1.font awesome: 优点:相对比较简单,查看官网看例子基本上都会用 (http://www.bootcss.com/p/font-awesome/) 缺点:文件较大 ...

Bootstrap官网的Bootstrap 3 字体图标的使用测试

Bootstrap官网的Bootstrap 3 字体图标的使用测试相关推荐

最新文章

热门文章