ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件

Bootstrap为我们提供了十几种的可复用组件，包括字体图标、下拉菜单、导航、警告框、弹出框、输入框组等。在你的Web Application中使用这些组件，将为用户提供一致和简单易用的用户体验。

Bootstrap组件本质上是结合了各种现有Bootstrap元素以及添加了一些独特Class来实现。Bootstrap元素我在上一篇文章中涉及到，具体可以参考《get='_blank'>ASP.NET MVC使用Bootstrap系列（2）——使用Bootstrap CSS和HTML元素》。

在这篇博客中，我将继续探索Bootstrap丰富的组件以及将它结合到ASP.NET MVC项目中。

Bootstrap 导航条

Bootstrap导航条作为"明星组件"之一，被使用在大多数基于Bootstrap Framework的网站上。为了更好的展示Bootstrap导航条，我在ASP.NET MVC的_Layout.cshtml布局页创建一个fixed-top导航条，当然它是响应式的——在小尺寸、低分辨率的设备上打开时，它将会只展示一个按钮并带有3个子菜单，当点击按钮时垂直展示他们。在网页上显示如下：

在移动设备上显示如下：

在ASP.NET MVC默认的_Layouts.cshtml布局页中已经帮我们实现了上述功能，打开它对其稍作修改，如下代码片段所示：

<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("Northwind Traders", "Index", "Home", null, new { @class = "navbar-brand" })    </div>    <div class="navbar-collapse collapse">      @Html.Partial("_BackendMenuPartial")      @Html.Partial("_LoginPartial")    </div>  </div></div>

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件

关键词：ASP.NET