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实现的可以编辑选择的下拉框的代码
Nov 19 Javascript
JavaScript?Apple设备检测示例代码
Nov 15 Javascript
js动态创建标签示例代码
Jun 09 Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
vue路由守卫+登录态管理实例分析
May 21 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 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学习资料汇总与网址
2007/03/16 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
php文件包含的几种方式总结
2019/09/19 PHP
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
Python 字符串与数字输出方法
2018/07/16 Python
python命令行参数用法实例分析
2019/06/25 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
自荐信需注意事项
2014/01/25 职场文书
士力架广告词
2014/03/20 职场文书
法制教育演讲稿
2014/09/10 职场文书
2014年派出所工作总结
2014/11/21 职场文书
实用求职信模板范文
2019/05/13 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书