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 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
php 中序列化和json使用介绍
Jul 08 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 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使用pack处理二进制文件的方法
2014/07/03 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
js的三种继承方式详解
2017/01/21 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
安装dbus-python的简要教程
2015/05/05 Python
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
python的slice notation的特殊用法详解
2019/12/27 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
校园环保建议书
2014/05/14 职场文书
学生吸烟检讨书
2014/09/14 职场文书
考试作弊检讨书
2014/10/21 职场文书
挂职个人工作总结
2015/03/05 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python