bootstrap框架让人兴奋,但是连个icon
都搞不出来。怎么整都不行,google之也没有办法。
是这样的,下载的压缩文件结构如下
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
自己在写程序的时候结构如下:
bootstrap/
test.html
bootstrap.min.css
jquery.js
bootstrap.min.js
就是这样。
在写<h1><i class="glyphicon glyphicon-star"></i> Hello, world!</h1>
的时候,那个icon
怎么也调不出来。
在用官网文档的这个框架之后就没有问题。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>
因为jquery
和bootstrap.min.js
是用来交互的,所以问题应该出现在css
身上。
那么我们来看css。
官方的和我的有什么区别。实在是找不到,所以看了一下未压缩版的bootstrap.css
发现原来在这里有个文件引用
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
怪不得捏,url
中使用了上级目录中的fonts文件夹,而我的bootstrap文件结构中就没有这个文件,所以图标无法加载了啊。
最后,改了一下文件结构,就发现ok了
总结一下这个错误后发现以下几点:
- 压缩文件和未压缩文件在内容上是没有区别的,这是有关空格,注释等引起了两个的不同代码量,但是未压缩文件便于读写。
- 最近看
php验证码
,老觉得有很多的技术是用二进制画图的,所以我刚开始的时候也以为这个图片不是加载的,而是用css画出来的。现在看来,才知道,原来这些图片都是加载的。所以,这些图标文件也算作是资源,因此要加载。 - 还有一点,就是这个fonts文件夹里面放的不是字体文件,而是图标文件,因为据说这里使用的是自己不熟悉的伪字体技术。
- 这里
jquery.js
和bootstrap.js
可以单独使用,是因为我看过源码,这里没有本地url链接。
说到这,还是老老实实的用官方下载的文档结构写代码吧。。。。