终于暂时的结束了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 图标的更多相关文章

  1. .NET Core的响应式框架,基于Ace Admin框架菜单导航,Bootstrap布局,fontAwesome图标,内嵌Iframe用EasyUI做数据绑定,动态配置列表,动态配置表单

    netnrf 响应式框架 用于快速开发的响应式框架 演示:https://rf2.netnr.com v3.x 前端采用 jQuery + Bootstrap + EasyUI + AceAdmin ...

  2. 直接在 CSS 中引用 FONTAWESOME 图标(附码表)

    直接在 CSS 中引用 FONTAWESOME 图标(附码表) 因此我们如果不想用 Fontawesome 提供的类,只想在 css 里面引用图标的话,可以这样子,请自行脑补: .icon:befor ...

  3. 学习WPF——使用Font-Awesome图标字体

    图标字体介绍 在介绍图标字体之前,不得不介绍图标格式ICON ICON是一种图标格式,我们操作系统中各种应用程序都包含一个图标 比如QQ程序的图标是一个可爱的企鹅,我的电脑是一个显示器图标 ----- ...

  4. BootStrap glyphicons字体图标

    本章将讲解Bootstrap glyphicons字体图标,并通过一些实例了解它的使用,字体图标是在 Web 项目中使用的图标字体.字体图标在下载的Bootstrap的fonts文件夹中   本章将讲 ...

  5. [Qt] fontawesome图标

    fontawesome图标 fontawesome是一个图标的集合,里面有好多的图标,使用起来也还是非常方便的. 图标信息可以到官网去查:http://fontawesome.io/cheatshee ...

  6. 第八十四节,css布局小技巧及font-awesome图标使用

    css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...

  7. 在 Windows Forms 和 WPF 应用中使用 FontAwesome 图标

    前言 FontAwesome 大家都不陌生,精美的图标,出现在各式各样的网页中. 最近在做 Windows Forms 应用程序,要求美观,就想能不能把 FontAwesome 图标用上,于是就有了本 ...

  8. FontAwesome 图标字体库的使用

    在前端开发中,许多新手常会遇见一个问题,参考的网页上有类似下图的图标,但在资源里却找不到对应的文件,这是因为这些网页使用了图标库.这里介绍一种常见的图标库——FontAwesome的使用. 1.登录F ...

  9. fontawesome图标字体库组件在服务器上显示不出来图标的解决

    这个组件在我所开发的网站中被大量使用,为网站增色不少.在本地测试的时候所有图标都能显示出来,可一到服务器上就显示不出来了.网上查列出了可能的原因.其一,IIS没有注册字体类型.经过检查,不存在这个问题 ...

随机推荐

  1. CSS----注释的坑

    css 中 style 注释 需要用  /*   */ 第一种方法注释,结果是不正确的,css布局会出现问题 第二种方式注释正确,布局不会出现问题

  2. ShadingJdbc学习

    可参考:https://blog.csdn.net/jadebai/article/details/86716082 https://blog.csdn.net/jadebai/article/det ...

  3. js中的“==”和“===”的区别

    简单来说: == 代表相同, ===代表严格相同, 为啥这么说呢, 这么理解: 当进行双等号比较时候: 先检查两个操作数数据类型,如果相同, 则进行===比较, 如果不同, 则愿意为你进行一次类型转换 ...

  4. Java接口自动化测试之HTTPClient学习(四)

    pom.xml  文件中dependency <dependencies> <dependency> <groupId>org.testng</groupId ...

  5. 给servlet类添加源代码

    1.按住ctrl键不放.鼠标左键点击HttpServlet. 2.打开 https://mvnrepository.com/下载所需的jar包,要下载带-sources后缀的 3.点击按钮附加源代码 ...

  6. pycaffe训练的完整组件示例

    pycaffe训练的完整组件示例 为什么写这篇博客 1. 需要用到pycaffe 因为用到的开源代码基于Caffe:要维护的项目基于Caffe.基本上是用Caffe的Python接口. 2. 训练中想 ...

  7. webpack学习笔记--按需加载

    为什么需要按需加载 随着互联网的发展,一个网页需要承载的功能越来越多. 对于采用单页应用作为前端架构的网站来说,会面临着一个网页需要加载的代码量很大的问题,因为许多功能都集中的做到了一个 HTML 里 ...

  8. CentOS6.9安装Logstash

    一.下载地址 官网:https://www.elastic.co/cn/downloads/logstash 百度云盘: 二.安装 .tar.gz logstash 配置文件(配置文件放哪个目录都可以 ...

  9. 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  ...

  10. ASP.NET Web Api 2 接口API文档美化之Swagger

    使用第三方提供的swgger ui 可有效提高 web api 接口列表的阅读性,并且可以在页面中测试服务接口. 但本人在查阅大量资料并进行编码测试后,发现大部分的swagger实例并不能有效运行.例 ...