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 相关文章推荐
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
vue在线动态切换主题色方案
Mar 26 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
再次研究下cache_lite
2007/02/14 PHP
浅析php单例模式
2014/11/25 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
Python脚本实现自动发带图的微博
2016/04/27 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
python判断数字是否是超级素数幂
2018/09/27 Python
Django web框架使用url path name详解
2019/04/29 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
如何执行一个shell程序
2012/11/23 面试题
基于Python 函数和方法的区别说明
2021/03/24 Python
微博营销计划书
2014/01/10 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
普通话宣传标语
2014/06/26 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
教师个人学习总结
2015/02/11 职场文书
linux中nohup和后台运行进程查看及终止
2021/06/24 Python
MySQL如何使备份得数据保持一致
2022/05/02 MySQL