bootstrap 學習筆記之文檔結構不能變

時間 2019-11-11

原文原文鏈接

bootstrap框架讓人興奮，可是連個icon都搞不出來。怎麼整都不行，google之也沒有辦法。php

是這樣的，下載的壓縮文件結構以下css

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

本身在寫程序的時候結構以下：html

bootstrap/
test.html
bootstrap.min.css
jquery.js
bootstrap.min.js

就是這樣。html5

在寫<h1><i class="glyphicon glyphicon-star"></i> Hello, world!</h1>的時候，那個icon怎麼也調不出來。
在用官網文檔的這個框架以後就沒有問題。jquery

<!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身上。bootstrap

那麼咱們來看css。
官方的和個人有什麼區別。實在是找不到，因此看了一下未壓縮版的bootstrap.css框架

發現原來在這裏有個文件引用svg

@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了字體

總結一下這個錯誤後發現如下幾點：google

壓縮文件和未壓縮文件在內容上是沒有區別的，這是有關空格，註釋等引發了兩個的不一樣代碼量，可是未壓縮文件便於讀寫。
最近看php驗證碼，老以爲有不少的技術是用二進制畫圖的，因此我剛開始的時候也覺得這個圖片不是加載的，而是用css畫出來的。如今看來，才知道，原來這些圖片都是加載的。因此，這些圖標文件也算做是資源，所以要加載。
還有一點，就是這個fonts文件夾裏面放的不是字體文件，而是圖標文件，由於聽說這裏使用的是本身不熟悉的僞字體技術。
這裏jquery.js和bootstrap.js能夠單獨使用，是由於我看過源碼，這裏沒有本地url連接。

說到這，仍是老老實實的用官方下載的文檔結構寫代碼吧。。。。