BootStrap中的Fontawesome 图标


Posted in Javascript onMay 25, 2017

终于暂时的结束了winform迎来了B/S的项目,这个需要我们自己写前端页面,要用bootstrap搭页面,本人小白,正在慢慢摸索中,主要记录遇到的问题,及解决办法。

BootStrap中的Fontawesome 图标

第一个,显示时间选择的控件。我在网上也搜了好多相关组件,但是可能跟我之前引入的js和css有冲突,所以出来的格式一直不对。后来就重新建了一个页面,专门显示datetimepicker,这次很容易就出来了。

@section CSS{
 <link href="~/Content/admin/css/bootstrap-datetimepicker.min.css" rel="external nofollow" rel="stylesheet" />
 <link href="~/Content/admin/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" />//需要引入的css,不过这里还缺一个,后面会提到。
}
<input size="16" type="text" id="datetimeStart" readonly class="form_datetime">
--
<input size="16" type="text" id="datetimeEnd" readonly class="form_datetime">
@section Scripts{
 <script src="~/Content/admin/js/jquery.min.js"></script>
 <script src="~/Content/admin/js/bootstrap.min.js"></script>
 <script src="~/Content/bootstrap-datetimepicker.min.js"></script>
 <script src="~/Content/bootstrap-datetimepicker.zh-CN.js"></script>//需要引入的js文件
}
<script type="text/javascript">
 $(function () {
  $('#datetimeStart').datetimepicker({
   format: 'yyyy-mm-dd',
   minView: 'month',
   language: 'zh-CN',
   autoclose: true,
  }).on('click', function () {
   $('#datetimeStart').datetimepicker("setEndDate", $("#datetimeEnd").val())
  });
  $("#datetimeEnd").datetimepicker({
   format: 'yyyy-mm-dd',
   minView: 'month',
   language: 'zh-CN',
   autoclose: true,
  }).on("click", function () {
   $("#datetimeEnd").datetimepicker("setStartDate", $("#datetimeStart".val()))
  });
 }); //设置datetimepicker的一些初始属性,参考链接:http://www.cnblogs.com/yttsic/p/3492834.html
</script>

控件显示到页面上之后,我就发现不对劲,因为没有左右的箭头,BootStrap中的Fontawesome 图标又捣鼓了一阵,最后找到了对应的css文件BootStrap中的Fontawesome 图标,随后百度了这个的意思,才知道用的是fontawesome图标
BootStrap中的Fontawesome 图标而不是Glyphicon字体图标。(附参考链接:https://www.huangwenchao.com.cn/2014/12/font-awesome-css.html),最后恍然大明白,原来我没有加fontawesome图标的css文件

<link href="~/Content/admin/font-awesome/css/font-awesome.css" rel="external nofollow" rel="stylesheet" />//上面说的少个就是这个

以上所述是小编给大家介绍的BootStrap中的Fontawesome 图标,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
jquery中的$(document).ready()使用小结
Feb 14 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
Node.js log4js日志管理详解
Jul 31 Javascript
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
详谈vue中router-link和传统a链接的区别
Jul 22 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 Javascript
Vue.js 中的 $watch使用方法
May 25 #Javascript
详解Javascript获取缓存和清除缓存API
May 25 #Javascript
Angularjs 实现动态添加控件功能
May 25 #Javascript
JavaScript实现自动跳转文本功能
May 25 #Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 #Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 #Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 #Javascript
You might like
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
python学生信息管理系统实现代码
2019/12/17 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
python与pycharm有何区别
2020/07/01 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
vue+django实现下载文件的示例
2021/03/24 Vue.js
工程力学专业毕业生求职信
2013/10/06 职场文书
教师实习自我鉴定
2013/12/18 职场文书
教师求职信范文分享
2013/12/27 职场文书
心理健康心得体会
2014/01/02 职场文书
预备党员思想汇报范文
2014/01/11 职场文书
努力学习保证书
2015/02/26 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
Python实现仓库管理系统
2022/05/30 Python