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 CSS菜单功能 改进版
Dec 20 Javascript
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
详解JSON.stringify()的5个秘密特性
May 26 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 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中this,self,parent的区别详解
2013/06/08 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
php猜单词游戏
2015/09/29 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
php实现简易计算器
2020/08/28 PHP
Opacity.js
2007/01/22 Javascript
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
Python反射用法实例简析
2017/12/22 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
学生会主席事迹材料
2014/01/28 职场文书
欢迎横幅标语
2014/06/17 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
优秀班组事迹材料
2014/12/24 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
八年级语文教学反思
2016/03/03 职场文书
Python中super().__init__()测试以及理解
2021/12/06 Python
阿里云日志过滤器配置日志服务
2022/04/09 Servers