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
Mar 09 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
动态加载jQuery的方法
Jun 16 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
Vue左滑组件slider使用详解
Aug 21 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
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
解析CodeIgniter自定义配置文件
2013/06/18 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
PHP内核探索之变量
2015/12/22 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
python write无法写入文件的解决方法
2019/01/23 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
厂长助理岗位职责
2013/12/27 职场文书
大课间活动制度
2014/01/18 职场文书
合作意向协议书范本
2014/03/31 职场文书
一年级数学下册复习计划
2015/01/17 职场文书