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 相关文章推荐
JavaScript Event学习第七章 事件属性
Feb 07 Javascript
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
详解JavaScript树结构
Jan 09 Javascript
Webpack 之 babel-loader文件预处理器详解
Mar 23 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
Windows上node.js的多版本管理工具用法实例分析
Nov 06 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 Javascript
JavaScript多种图形实现代码实例
Jun 28 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 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下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
Javascript UrlDecode函数代码
2010/01/09 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
JavaScript判断IE版本型号
2015/07/27 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
python轻松实现代码编码格式转换
2015/03/26 Python
Python3 操作符重载方法示例
2017/11/23 Python
Python遍历pandas数据方法总结
2018/02/09 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
北京振戎融通Java面试题
2015/09/03 面试题
求职意向书范文
2014/04/01 职场文书
技术员岗位职责
2015/02/04 职场文书
个人总结与自我评价
2015/02/14 职场文书
销售经理工作检讨书
2015/02/19 职场文书
大学生党课心得体会
2016/01/07 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
Golang中interface{}转为数组的操作
2021/04/30 Golang
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS