bootstrap 学习笔记之 文档结构不能变

2019年9月14日 163次阅读 来源: Yang_River

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链接。

说到这，还是老老实实的用官方下载的文档结构写代码吧。。。。

    原文作者：Yang_River
    原文地址: https://segmentfault.com/a/1190000000473165
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞