Bootstrap常見問題彙總

bootstrap 圖示glyphicons圖示符號不正常顯示解決辦法

分享供各位參考：

1、在ff/http:的位址列中輸入“about:config”，即進入配置介面。

2、進入後，搜尋“security.fileuri.strict_origin_policy”，這是該值應該是true。

3、雙擊該項，其值自動變為false，即可。

4、修改後，再重新整理遇到問題的頁面，即可看到正常顯示的圖示了。

探究問題原因：

1、由於ff/http:一個安全策略導致的。該策略限制了HTML檔案訪問不在根目錄下的資料夾中的web fonts。

2、這種限制只在本地開發環境下，同時web fonts並未從遠端獲取時出現。
3、後來看了下前面提到的那個沒有出現問題的bootstrap專案。

4、果然，其fonts資料夾被放置在了專案的根目錄下。

5、這樣即使不去改變上述安全策略，也是可以正常顯示的。

6、@font-face地址：

@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');
}

bootstrap中<li role="presentation">表示真實含義是什麼？

最近在學習bootstrap3.3.5，遇到一個問題搞不清楚<li role="presentation">到底什麼含義？

網上到處查國內資料很少，沒有表達最貼切含義，在GitHub 查到了相關資料結合“圖靈計算機詞彙”

在圖靈計算機詞彙裡也可以查詢其含義：

presentation
n. 【Web】表現層；【計】簡報，列表單；【通用軟體】演示（來源：圖靈計算機詞彙表）；

n. 贈與，贈送，描述，簡述，介紹，陳述，表達；[醫] 先露，表象(心理)；[經] 提示, 交單；

由此可以推斷：presentation在bootstrap<li role="presentation">中意為：【列表單】最為恰當合適。
無序 HTML 列表：

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

注：<ul> 標籤定義無序列表，li標籤定義無序列表單/項。
同：<li role="presentation">與<a role="menuitem" ></a>中role扮演角色是大同小異，即選單列表單/項。

以下列舉【案例】:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
    選擇你喜歡的品種
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="dropdown-header">選擇你喜歡的水果</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">蘋果</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">菠蘿</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="dropdown-header">選擇你喜歡的樹木</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">松樹</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">白楊</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">柳樹</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="dropdown-header">選擇你喜歡的蔬菜</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">芹菜</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">蘿蔔</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">白菜</a></li>
    <li role="presentation" class="divider"></li>
  </ul>
</div>

---

Bootstrap框架class=”thumbnail”是什麼意思？

在Bootstrap框架中查閱圖靈計算機大詞典：
thumbnail

adj. 極小的, 極短的；
n. 大拇指的指甲, 極小之物；
n. 拇指甲(草圖);adj.簡略的，縮略的(拇指甲大小的,小型的)；
n. 極小的圖片, 小的代表大的更多細節的圖片 (計算機用語)；

thumbnail 在Bootstrap框架中真實含義：

n.【計】縮圖。

thumbnail在美工用來具體表現佈局方式表達：
大致相當亦為效果圖及縮圖，很小（大約為3×4英寸），縮略了細節比較粗糙，是最基本的東西。
直線或水波紋表示正文的位置，方框表示圖形的位置。然後，中選的小樣再進一步發展。

以下舉個案例：
a元素超連結thumbnail呈縮圖構成 <div class="col-xs-6 col-md-3"> </div>：

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="../image/HAIAN.jpg" alt="180x100%" style="height: 180px;width: 100%;display: block;">
            </a>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="../image/HAIAN.jpg" alt="180x100%" style="height: 180px;width: 100%;display: block;">
            </a>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="../image/HAIAN.jpg" alt="180x100%" style="height: 180px;width: 100%;display: block;">
            </a>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="../image/HAIAN.jpg" alt="180x100%" style="height: 180px;width: 100%;display: block;">
            </a>
        </div>
    </div>
</div>