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中面向对象技术的模拟
Sep 25 Javascript
validator验证控件使用代码
Nov 23 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
vue axios用法教程详解
Jul 23 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 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
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
js验证密码强度解析
2020/03/18 Javascript
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
html5.2 dialog简介详解
2018/02/27 HTML / CSS
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
秋季运动会加油稿200字
2014/01/11 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
商务邀请函
2015/01/30 职场文书
试用期辞职信范文
2015/03/02 职场文书
本科毕业答辩开场白
2015/05/27 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
JavaScript流程控制(分支)
2021/12/06 Javascript
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python