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>
Bootstrap常见问题汇总相关推荐
- exec不同文件l怎么汇总_ABAQUS常见问题汇总 - 2.0版.doc
您所在位置:网站首页 > 海量文档  > 计算机 > C/C++资料 ABAQUS常见问题汇总 - 2.0版.doc1 ...
- 使用maven下载依赖包及maven常见问题汇总
最近下载了SPRING3.1.4,发现只有SPRING相关的源码,没有其依赖的jar包.SPRING依赖的jar相当多,自己一个一个的下载比较费劲,就仔细阅读了SPRING下载说明,新版本的SPRIN ...
- java 遇到的问题_Java常见问题汇总(一)
原标题:Java常见问题汇总(一) 每天在写Java程序,其实里面有一些细节大家可能没怎么注意,这不,有人总结了一个我们编程中常见的问题.虽然一般没有什么大问题,但是最好别这样做.另外这里提到的很多问 ...
- 系统部署常见问题汇总
系统部署常见问题汇总 文章目录 系统部署常见问题汇总 引用文件路径问题 前端代码兼容IE问题 IE不支持Promise问题 IE浏览器GET请求缓存问题 前端代码混淆问题 npx的使用 IE兼容new ...
- 集成 jpush-react-native 常见问题汇总 ( iOS 篇)
给 iOS 应用添加推送功能是一件比较麻烦的事情,本篇文章收集了集成 jpush-react-native 的常见问题,目的是为了帮助用户更好地排查问题 1.收不到推送 确保是在真机上测试,而不是在模 ...
- fastText中常见问题汇总
fastText中常见问题汇总: 1.什么是fastText fastText是一个用于文本分类和词向量表示的库,它能够把文本转化成连续的向量然后用于后续具体的语言任务,目前教程较少! 2.为什么训练 ...
- 软考考后常见问题汇总
摘要:软考考后常见问题汇总,查询成绩.证书领取.考试复核等 一.考试分数线什么时间出?合格分数线会不会有变化? 答:合格分数线出成绩一个月左右,如2020年12月18日出成绩,2021年1月11日出合 ...
- oracle 数据库问题,ORACLE数据库常见问题汇总,oracle常见问题汇总
ORACLE数据库常见问题汇总,oracle常见问题汇总 提交事务的时候提示(数据库被一个用户锁住的解决方法) select object_id,session_id,locked_mode from ...
- tcp当主动发出syn_一文读懂TCP四次挥手工作原理及面试常见问题汇总
简述 本文主要介绍TCP四次挥手的工作原理,以及在面试中常见的问题. 字段含义 seq序号:Sequence Number,占32位,用来标识从TCP源端向目的端发送的字节流,发起方发送数据时对此进行 ...
最新文章
- js设置奇偶行数样式
- javascript学习系列(25):数组中的substr
- [转载] Java StringBuilder StringJoiner
- lsqnonlin函数_matlab非线性最小二乘函数
- php线程安全和非线程安全_安全调用线程的步骤
- java 文件分割器_Java分割器
- python基础 函数
- SilverLight4导航
- 【开源】MagicData-RAMC :180小时中文对话式语音数据集正式发布
- python中字符串输出乱码怎么解决_python字符乱码的解决小结
- 镜像神经元现象是什么,镜像神经元的作用
- CopyOnWriteArrayList
- ThinkPHP6 预防XSS攻击的一点小建议
- 深入理解虚拟/物理地址转换,页表--基于ARMV8
- 新的vue项目-qq音乐网页版
- 今日金融词汇---法定许可护城河
- ​草莓熊python绘图(春节版,圣诞倒数雪花版)附源代码
- 特别提醒:人脸识别时,一定要穿衣服,一不小心就中招了
- 同学的一个h5页面嵌入APP的需求,10分钟搞个demo
- vue-router之解决addRoutes使用遇到的坑