ASP.NET MVC使用Bootstrap系列（4）——使用JavaScript插件

序言

Data属性 VS 编程API

Bootstrap提供了完全通过HTML标记的方式来使用插件，这意味着，你可以不写任何JavaScript代码，事实上这也是Bootstrap推荐的使用方式。

举个栗子，若要使Alert组件支持关闭功能，你可以通过添加data-dismiss="alert"属性到按钮(Botton)或者链接（A）元素上，如下代码所示：

<div class="alert alert-danger">

<button data-dismiss="alert" class="close" type="button">x</button>

<strong>警告</strong>10秒敌人到达

</div>

当然，你也可以通过编程方式的API来实现同样的功能：

<div class="alert alert-danger" id="myalert">

<button data-dismiss="alert" class="close" type="button" onclick="$('#myalert').alert('close')">x</button>

<strong>警告</strong>10秒敌人到达

</div>

下拉菜单（dropdown.js）

使用dropdown插件（增强交互性），你可以将下拉菜单添加到绝大多数的Bootstrap组件上，比如navbar、tabs等。注：将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素中。

如下是一个地域的菜单，通过Razor引擎动态绑定菜单元素:

<div class="form-group">

@Html.LabelFor(model => model.TerritoryId, new { @class = "control-label col-md-2" })

@Html.HiddenFor(model => model.TerritoryId)

<div class="col-md-10">

<div id="territorydropdown" class="dropdown">

<button id="territorybutton" class="btn btn-sm btn-info" data-toggle="dropdown">@Model.Territory.TerritoryDescription</button>

<ul id="territories" class="dropdown-menu">

@foreach (var item in ViewBag.TerritoryId)

{

<li><a href="#" tabindex="-1" data-value="@item.Value">@item.Text</a></li>

}

</ul>

</div>

</div>

</div>

注意：通过添加data属性：data-toggle="dropdown" 到Button或者Anchor上，可以切换dropdown下拉菜单，增加了交互性。其中菜单的<a>元素设置tabindex=-1，这样做是为了防止元素成为tab次序的一部分。

模态框（modal.js）

模态框以弹出框的形式可以为用户提供信息亦或者在此之中完成表单提交功能。Bootstrap的模态框本质上有3部分组成：模态框的头、体和一组放置于底部的按钮。你可以在模态框的Body中添加任何标准的HTML标记，包括Text或者嵌入的Youtube视频。

一般来说，务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。

如下即为一个标准的模态框，包含Header、Body、Footer:

<div class="container-full">
<div id="myCarousel" class="carousel" data-ride="carousel" data-interval="10000">
<!-- 指示灯 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="@Url.Content("~/Images/slide1.jpg")" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Unto all said together great in image.</h1>
<p>Won't saw light to void brought fifth was brought god abundantly for you waters life seasons he after replenish beast. Creepeth beginning.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Read more</a></p>
</div>
</div>
</div>
<div class="item">
<img src="@Url.Content("~/Images/slide2.jpg")" alt="Second slide">
<div class="container">
<div class="carousel-caption">

<h1>Fowl, land him sixth moving.</h1>
<p>Morning wherein which. Fourth man life saying own creeping. Said sixth given.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img src="@Url.Content("~/Images/slide3.jpg")" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>Far far away, behind the word mountains.</h1>
<p>A small river named Duden flows by their place and supplies it with the necessary.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">See all</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>

View Code
展示的效果如下：

小结