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原型继承的两种方法对比介绍
Mar 30 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
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
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
php中strtotime函数性能分析
2016/11/20 PHP
设定php简写功能的方法
2019/11/28 PHP
javascript OFFICE控件测试代码
2009/12/08 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
vue实现放大镜效果
2020/09/17 Javascript
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
python语言中with as的用法使用详解
2018/02/23 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
python多进程间通信代码实例
2019/09/30 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
database面试题
2013/03/28 面试题
采购经理岗位职责
2014/02/16 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
人民的好儿女观后感
2015/06/18 职场文书
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
mysql 获取相邻数据项
2022/05/11 MySQL
Mysql中mvcc各场景理解应用
2022/08/05 MySQL