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

Yang_River發表於2014-04-17
boot筆記

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連結。

說到這，還是老老實實的用官方下載的文件結構寫程式碼吧。。。。

相關文章