如何使用 ASP.NET WebForms 在 Bootstrap 中正确插入来自 jQuery、javascript

How to correctly insert references from jQuery, javascript and CSS in Bootstrap with ASP.NET WebForms

本文关键字：插入 jQuery javascript ASP 何使用 NET WebForms Bootstrap      更新时间：2023-09-26

好的，我正在做一个新的个人项目，我是Bootstrap的初学者。我两天想做的是;使用引导技术插入日期时间选择器和数字增量器。为此，我搜索了很多并尝试了许多不同的教程、示例，但没有一个对我有用。我认为问题应该是引用jquery库，javascript和CSS的方式。这是因为我试图插入一些字形，但它们似乎不会出现。所以我问如何正确插入、排列这个库。

这是我到目前为止所拥有的：

1(在我的网站.Master ASP.NET WebForms上，我在头部部分有以下参考：

<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server">
    <%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:BundleReference runat="server" Path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/Site.css" rel="stylesheet" />
<link href="Content/datepicker.css" rel="stylesheet" />
<link href="Content/prettify.css" rel="stylesheet" />
<!--
<link href="Content/slider.css" rel="stylesheet" /> 
<link href="Content/iThing.css" rel="stylesheet" />
    -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

<!-- <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> -->
<!--
 <link href="https://a0.muscache.com/airbnb/static/packages/common_o2.1-024e8f08a0bba6da7891dd4b6c39b7aa.css" media="all" rel="stylesheet" type="text/css" />
<link href="https://a0.muscache.com/airbnb/static/p1/main-pretzel-f7ebfdaf120892e36656cf39bcc3addf.css" media="screen" rel="stylesheet" type="text/css" />
<link href="https://a0.muscache.com/airbnb/static/packages/autocomplete-dd80b94ccaa2e37d6c20412621a9aeac.css" media="screen" rel="stylesheet" type="text/css" />
-->
<!--
<script src="Scripts/jquery-2.1.1.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootstrap-slider.js"></script>
    -->

2(在我的默认.aspx页面中，我尝试插入日期时间选择器和其他内容，并且此页面是带有Master的WebForm，在这种情况下，我有DateTimePicker的这一部分：

 <div class="col-md-3">
                    <div class="form-group">
                        <div class='input-group date' id='datetimepicker1'>
                            <input type='text' class="form-control" />
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(function () {
                            $('#datetimepicker1').datetimepicker();
                        });
                    </script>
                </div>

3(我得到的结果如下：

不起作用，并且不显示日历图标

在默认的末尾.aspx我还包含了以下脚本：

<script src="Scripts/jquery-2.1.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootstrap-datepicker.js"></script>

有人知道我哪里做错了什么？

由Twinkle创建的本指南可以帮助您正确设置文件： Bootstrap 3.0 with ASP.NET

至于日期选择器，我用过 http://www.eyecon.ro/bootstrap-datepicker/

这是一个jsFiddle

.HTML 

<div class="well">
  <input type="text" class="span2" value="02-16-2012" id="targetID" >
</div>

.JS

$('#targetID').datepicker({
  format: 'mm-dd-yyyy'
});
相关文章：