bootstrap之FONTAWESOME 图标
终于暂时的结束了winform迎来了B/S的项目,这个需要我们自己写前端页面,要用bootstrap搭页面,本人小白,正在慢慢摸索中,主要记录遇到的问题,及解决办法。
第一个,显示时间选择的控件。我在网上也搜了好多相关组件,但是可能跟我之前引入的js和css有冲突,所以出来的格式一直不对。后来就重新建了一个页面,专门显示datetimepicker,这次很容易就出来了。
@section CSS{
<link href="~/Content/admin/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="~/Content/admin/css/bootstrap.min.css" rel="stylesheet" />//需要引入的css,不过这里还缺一个,后面会提到。
} <input size="" type="text" id="datetimeStart" readonly class="form_datetime">
--
<input size="" 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>
控件显示到页面上之后,我就发现不对劲,因为没有左右的箭头,又捣鼓了一阵,最后找到了对应的css文件,随后百度了这个的意思,才知道用的是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="stylesheet" />//上面说的少个就是这个
加上之后就圆满了,(*^__^*) 嘻嘻……
bootstrap之FONTAWESOME 图标的更多相关文章
- .NET Core的响应式框架,基于Ace Admin框架菜单导航,Bootstrap布局,fontAwesome图标,内嵌Iframe用EasyUI做数据绑定,动态配置列表,动态配置表单
netnrf 响应式框架 用于快速开发的响应式框架 演示:https://rf2.netnr.com v3.x 前端采用 jQuery + Bootstrap + EasyUI + AceAdmin ...
- 直接在 CSS 中引用 FONTAWESOME 图标(附码表)
直接在 CSS 中引用 FONTAWESOME 图标(附码表) 因此我们如果不想用 Fontawesome 提供的类,只想在 css 里面引用图标的话,可以这样子,请自行脑补: .icon:befor ...
- 学习WPF——使用Font-Awesome图标字体
图标字体介绍 在介绍图标字体之前,不得不介绍图标格式ICON ICON是一种图标格式,我们操作系统中各种应用程序都包含一个图标 比如QQ程序的图标是一个可爱的企鹅,我的电脑是一个显示器图标 ----- ...
- BootStrap glyphicons字体图标
本章将讲解Bootstrap glyphicons字体图标,并通过一些实例了解它的使用,字体图标是在 Web 项目中使用的图标字体.字体图标在下载的Bootstrap的fonts文件夹中 本章将讲 ...
- [Qt] fontawesome图标
fontawesome图标 fontawesome是一个图标的集合,里面有好多的图标,使用起来也还是非常方便的. 图标信息可以到官网去查:http://fontawesome.io/cheatshee ...
- 第八十四节,css布局小技巧及font-awesome图标使用
css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...
- 在 Windows Forms 和 WPF 应用中使用 FontAwesome 图标
前言 FontAwesome 大家都不陌生,精美的图标,出现在各式各样的网页中. 最近在做 Windows Forms 应用程序,要求美观,就想能不能把 FontAwesome 图标用上,于是就有了本 ...
- FontAwesome 图标字体库的使用
在前端开发中,许多新手常会遇见一个问题,参考的网页上有类似下图的图标,但在资源里却找不到对应的文件,这是因为这些网页使用了图标库.这里介绍一种常见的图标库——FontAwesome的使用. 1.登录F ...
- fontawesome图标字体库组件在服务器上显示不出来图标的解决
这个组件在我所开发的网站中被大量使用,为网站增色不少.在本地测试的时候所有图标都能显示出来,可一到服务器上就显示不出来了.网上查列出了可能的原因.其一,IIS没有注册字体类型.经过检查,不存在这个问题 ...
随机推荐
- CSS----注释的坑
css 中 style 注释 需要用 /* */ 第一种方法注释,结果是不正确的,css布局会出现问题 第二种方式注释正确,布局不会出现问题
- ShadingJdbc学习
可参考:https://blog.csdn.net/jadebai/article/details/86716082 https://blog.csdn.net/jadebai/article/det ...
- js中的“==”和“===”的区别
简单来说: == 代表相同, ===代表严格相同, 为啥这么说呢, 这么理解: 当进行双等号比较时候: 先检查两个操作数数据类型,如果相同, 则进行===比较, 如果不同, 则愿意为你进行一次类型转换 ...
- Java接口自动化测试之HTTPClient学习(四)
pom.xml 文件中dependency <dependencies> <dependency> <groupId>org.testng</groupId ...
- 给servlet类添加源代码
1.按住ctrl键不放.鼠标左键点击HttpServlet. 2.打开 https://mvnrepository.com/下载所需的jar包,要下载带-sources后缀的 3.点击按钮附加源代码 ...
- pycaffe训练的完整组件示例
pycaffe训练的完整组件示例 为什么写这篇博客 1. 需要用到pycaffe 因为用到的开源代码基于Caffe:要维护的项目基于Caffe.基本上是用Caffe的Python接口. 2. 训练中想 ...
- webpack学习笔记--按需加载
为什么需要按需加载 随着互联网的发展,一个网页需要承载的功能越来越多. 对于采用单页应用作为前端架构的网站来说,会面临着一个网页需要加载的代码量很大的问题,因为许多功能都集中的做到了一个 HTML 里 ...
- CentOS6.9安装Logstash
一.下载地址 官网:https://www.elastic.co/cn/downloads/logstash 百度云盘: 二.安装 .tar.gz logstash 配置文件(配置文件放哪个目录都可以 ...
- POJ 1364 / HDU 3666 【差分约束-SPFA】
POJ 1364 题解:最短路式子:d[v]<=d[u]+w 式子1:sum[a+b+1]−sum[a]>c — sum[a]<=sum[a+b+1]−c−1 ...
- ASP.NET Web Api 2 接口API文档美化之Swagger
使用第三方提供的swgger ui 可有效提高 web api 接口列表的阅读性,并且可以在页面中测试服务接口. 但本人在查阅大量资料并进行编码测试后,发现大部分的swagger实例并不能有效运行.例 ...