我對 Bootstrap 和 ASP.Net 都有點陌生。
我正在嘗試使用 Bootstrap homesite 中的一個非常簡單的示例，我只是將其放入about.cshtml檔案中。
Bootstrap 是 ASP.Net 上的 3.4.1 版，我選擇了 Bootstrap 示例的第三個版本，但我沒有得到任何表格，只有 3 個相互堆疊的文本。是版本錯誤還是我看不到錯誤？我究竟做錯了什么？
@{
ViewBag.Title = "About";
}
<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<table id="table">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
<script>
var $table = $('#table')
$(function () {
var data = [
{
'id': 0,
'name': 'Item 0',
'price': '$0'
},
{
'id': 1,
'name': 'Item 1',
'price': '$1'
},
{
'id': 2,
'name': 'Item 2',
'price': '$2'
},
{
'id': 3,
'name': 'Item 3',
'price': '$3'
},
{
'id': 4,
'name': 'Item 4',
'price': '$4'
},
{
'id': 5,
'name': 'Item 5',
'price': '$5'
}
]
$table.bootstrapTable({ data: data })
})
</script>
我的_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
uj5u.com熱心網友回復：
您的腳本標簽需要位于該Scripts部分內。否則，您會嘗試在它們依賴的庫之前加載它們。
@{
ViewBag.Title = "About";
}
<table id="table">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
@section Scripts {
<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script>
var $table = $('#table')
$(function () {
var data = [
{
'id': 0,
'name': 'Item 0',
'price': '$0'
},
...
]
$table.bootstrapTable({ data: data })
})
</script>
}
如果您使用當前頁面檢查瀏覽器中的開發者控制臺，您將看到錯誤訊息，告訴您 jQuery 尚未加載。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/364110.html
標籤：网站 bootstrap-4 引导模式