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>