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 相关文章推荐
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
Jun 14 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 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中jpgraph类库的使用介绍
2013/08/08 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
JavaScript 学习笔记(四)
2009/12/31 Javascript
JS的反射问题
2010/04/07 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
python算法学习之基数排序实例
2013/12/18 Python
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
windows下python安装pip图文教程
2018/05/25 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
优秀学生干部个人的自我评价
2013/10/04 职场文书
岗位职责的含义
2013/11/17 职场文书
代办委托书怎样写
2014/04/08 职场文书
监考失职检讨书
2015/01/26 职场文书
力克胡哲观后感
2015/06/10 职场文书
用Python提取PDF表格的方法
2021/04/11 Python