Bootstrap提供了一套豐富CSS設置、HTML元素以及高級的柵格系統來幫助開發人員快速布局網頁。所有的CSS樣式和HTML元素與移動設備優先的流式柵格系統結合，能讓開發人員快速輕松的構建直觀的界面並且不用擔心在較小的設備上響應的具體細節。
Bootstrap 柵格（Grid）系統
在移動互聯網的今天，越來越多的網站被手機設備訪問，移動流量在近幾年猛增。Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。
柵格參數
Bootstrap 3提供了一系列的預定義class來指定列的尺寸，如下所示：
Bootstrap 柵格系統被分割為12列，當布局你的網頁時，記住所有列的總和應該是12。為了圖示，請看如下HTML所示：
<div class="container"> <div class="row"> <div class="col-md-3" style="background-color: green;"> <h3>green</h3> </div> <div class="col-md-6" style="background-color: red;"> <h3>red</h3> </div> <div class="col-md-3" style="background-color: blue;"> <h3>blue</h3> </div> </div> </div>
注：Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器。
在上述代碼中，我添加了一個class為container的div容器，並且包含了一個子的div元素row（行）。row div元素依次有3列。其中2列包含了col-md-3的class、一列包含了col-md-6的class。當他們組合在一起時，他們加起來總和是12.但這段HTML代碼只作用於顯示器分辨率>=992的設備。所以為了更好的響應低分辨率的設備，我們需要結合不同的CSS柵格class。故添加對平板、手機、低分辨率的PC的支持，需要加入如下class：
<div class="container"> <div class="row"> <div class="col-xs-3 col-sm-3 col-md-3" style="background-color: green;"> <h3>green</h3> </div> <div class="col-xs-6 col-sm-6 col-md-6" style="background-color: red;"> <h3>red</h3> </div> <div class="col-xs-3 col-sm-3 col-md-3" style="background-color: blue;"> <h3>blue</h3> </div> </div> </div>
Bootstrap HTML元素
Bootstrap已經為我們准備好了一大堆帶有樣式的HTML元素，如：
- Tables
- Buttons
- Forms
- Images
Bootstrap Tables（表格）
Bootstrap為HTML tables提供了默認的樣式和自定義他們布局和行為的選項。為了更好的演示，我使用精典的Northwind示例數據庫以及如下技術：
- 用ASP.NET MVC來作為Web應用應用程序
- Bootstrap前端框架
- Entity Framework來作為ORM框架
- StructureMap執行我們項目的依賴注入和控制反轉，使用Nuget來安裝
- AutoMapper自動映射Domain Model到View Model，使用Nuget來安裝
打開Visual Studio，創建一個ASP.NET MVC的項目，默認情況下，VS已經為我們添加了Bootstrap的文件。為了查看效果，按照如下的步驟去實施：
- 在ASP.NET MVC項目中的Models文件下添加一個ProductViewModel
public class ProductViewModel { public int ProductId { get; set; } public string ProductName { get; set; } public decimal? UnitPrice { get; set; } public int? UnitsInStock { get; set; } public bool Discontinued { get; set; } public string Status { get; set; } }
- 在APP_Data文件夾中添加AutoMapperConfig類，通過AutoMapper，為ProductViewModel的Status屬性創建了一個條件映射，如果Product是discontinued，那么Status為danger；如果UnitPrice大於50，則設置Status屬性為info；如果UnitInStock小於20，那么設置Status為warning。代碼的邏輯如下:
Mapper.CreateMap<Product, ProductViewModel>() .ForMember(dest => dest.Status, opt => opt.MapFrom (src => src.Discontinued ? "danger" : src.UnitPrice > 50 ? "info" : src.UnitsInStock < 20 ? "warning" : ""));
- 添加一個ProductController並且創建名為Index的Action
public class ProductController : Controller { // // GET: /Product/ private readonly ApplicationDbContext _context; public ProductController(ApplicationDbContext context) { this._context = context; } public ActionResult Index() { var products = _context.Products.Project().To<ProductViewModel>().ToArray(); return View(products); } }
- 上述代碼使用依賴注入獲取Entity Framework DbContext對象，Index Action接受從數據庫中返回Products 集合然后使用AutoMapper映射到每一個ProductViewModel對象中，最后為View返回數據。
- 在視圖上使用Bootstrap HTML table來顯示數據
<div class="container"> <h3>Products</h3> <table class="table"> <thead> <tr> <th> Product Name </th> <th> Unit Price </th> <th> Units In Stock </th> <th> Discontinued </th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.ProductName) </td> <td> @Html.DisplayFor(modelItem => item.UnitPrice) </td> <td> @Html.DisplayFor(modelItem => item.UnitsInStock) </td> <td> @Html.DisplayFor(modelItem => item.Discontinued) </td> </tr> } </tbody> </table> </div>
呈現的數據如下所示:
Bootstrap Tables 其余樣式
Bootstrap提供了額外的樣式來修飾table。比如使用table-bordered來顯示邊框，table-striped顯示奇偶數行間顏色不同（斑馬條紋狀），table-hover顧名思義，當鼠標移動行時高亮，通過添加 .table-condensed 類可以讓表格更加緊湊，單元格中的內補（padding）均會減半，修改后的代碼如下所示：
<table class="table table-bordered table-striped table-hover"> </table>
顯示的效果如下：
Bootstrap上下文Table 樣式
Bootstrap提供了額外的class能讓我們修飾<td>和<tr>的樣式，提供的class如下：
- Active
- Success
- Info
- Warning
- Danger
修改上述代碼，為<tr>動態添加樣式：
@foreach (var item in Model) { <tr class="@item.Status"> <td> @Html.DisplayFor(modelItem => item.ProductName) </td> <td> @Html.DisplayFor(modelItem => item.UnitPrice) </td> <td> @Html.DisplayFor(modelItem => item.UnitsInStock) </td> <td> @Html.DisplayFor(modelItem => item.Discontinued) </td> </tr> }
更新過后的效果如下所示：
Bootstrap Buttons
Bootstrap提供了許多各種不同顏色和大小的buttons，為核心的buttons提供6種顏色和4種尺寸可以選擇，同樣通過設置class屬性來顯示不同的風格：
• btn btn-primary btn-xs
• btn btn-default btn-sm
• btn btn-default
• btn btn-sucess btn-lg
可以為Button設置顏色的class：
• btn-default
• btn-primary
• btn-success
• btn-info
• btn-warning
• btn-danger
所以可以使用如下代碼來呈現效果：
<div class="row"> <!-- default按鈕 --> <button type="button" class="btn btn-default btn-xs"> Default & Size=Mini </button> <button type="button" class="btn btn-default btn-sm"> Default & Size=Small </button> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-default btn-lg"> Default & Size=Large </button> </div>
顯示效果如下：
Bootstrap Form（表單）
表單常見於大多數業務應用程序里，因此統一的樣式有助於提高用戶體驗，Bootstrap提供了許多不同的CSS樣式來美化表單。
- 水平表單
使用ASP.NET MVC的HTML.BeginForm可以方便的創建一個表單，通過為<form>添加名為form-horizontal的class來創建一個Bootstrap 水平顯示表單。
@using (Html.BeginForm("Login", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" })) { <div class="form-group"> @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" }) <div class="col-md-10"> @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" }) @Html.ValidationMessageFor(m => m.UserName) </div> </div> <div class="form-group"> @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" }) <div class="col-md-10"> @Html.PasswordFor(m => m.Password, new { @class = "form-control" }) @Html.ValidationMessageFor(m => m.Password) </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="Log in" class="btn btn-default" /> </div> </div> }
上述代碼中，使用class為form-group的<div>元素包裹了2個Html方法（Html.LabelFor、Html.TextboxFor），這能讓Bootstrap 驗證樣式應用在form 元素上，當然你也可以使用Bootstrap 柵格col-* class來指定form 中元素的寬度，效果如下顯示：
- 垂直表單
Bootstrap基礎表單默認情況下是垂直顯示內容，在Html.BeginForm幫助方法里移除class為form-horizontal和class col-*后，顯示的效果如下：
- 內聯表單
內聯表單表示所有的form 元素一個接着一個水平排列，只適用於視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單折疊）。
記得一定要添加 label 標簽，如果你沒有為每個輸入控件設置 label 標簽，屏幕閱讀器將無法正確識別。對於這些內聯表單，你可以通過為label 設置 .sr-only 類將其隱藏。詳細代碼如下：
@using (Html.BeginForm("Login", "Account", FormMethod.Post, new { @class = "form-inline", role = "form" })) { <div class="form-group"> @Html.LabelFor(m => m.UserName, new { @class = "sr-only" }) @Html.TextBoxFor(m => m.UserName, new { @class = "form-control", placeholder = "Enter your username" }) @Html.ValidationMessageFor(m => m.UserName) </div> <div class="form-group"> @Html.LabelFor(m => m.Password, new { @class = "sr-only" }) @Html.PasswordFor(m => m.Password, new { @class = "form-control", placeholder = "Enter your username" }) @Html.ValidationMessageFor(m => m.Password) </div> <div class="form-group"> <input type="submit" value="Log in" class="btn btn-default" /> </div> }
顯示效果如下：
Bootstrap Image
在 Bootstrap 3.0中，通過為圖片添加 .img-responsive 類可以讓圖片支持響應式布局。其實質是為圖片設置了 max-width: 100%;、 height: auto; 和 display: block; 屬性，從而讓圖片在其父元素中更好的縮放。
通過為 <img> 元素添加以下相應的類，可以讓圖片呈現不同的形狀。
-
img-rounded
-
img-circle
-
img-thumbnail
請看如下代碼：
<div class="row"> <h3>Our Team</h3> @foreach (var item in Model) { <div class="col-md-4"> <img src="@Url.Content("~/Images/employees/" + item.EmployeeID + ".png")" alt="@item.FirstName@item.LastName" class="img-circle img-responsive"> <h3> @item.FirstName @item.LastName <small>@item.Title</small> </h3> <p>@item.Notes</p> </div> } </div>
Bootstrap 驗證樣式
默認情況下ASP.NET MVC項目模板支持unobtrusive 驗證並且會自動添加需要的JavaScript庫到項目里。然而默認的驗證不使用Bootstrap指定的CSS。當一個input元素驗證失敗，JQuery validation插件會為元素添加input-validation-error class（存在Site.css中）。那怎樣不修改JQuery Validation插件而且使用Bootstrap內置的錯誤樣式呢？
Bootstrap提供了class為has-error中的樣式（label字體變為紅色，input元素加上紅色邊框）來顯示錯誤:
<div class="form-group has-error"> @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" }) <div class="col-md-10"> @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" }) </div> </div>
所以，我需要動態來為<div class=' from-group'>元素動態綁定/移除has-error。為了不修改JQuery.validation插件，我在Scripts文件夾中添加jquery.validate.bootstrap文件:
$.validator.setDefaults({ highlight: function (element) { $(element).closest('.form-group').addClass('has-error'); }, unhighlight: function (element) { $(element).closest('.form-group').removeClass('has-error'); }, });
這段腳本的通過調用setDefaults方法來修改默認的JQuery validation 插件設置。看以看到我使用highlight和unhighlight方法來動態添加/移除has-error class。
最后將它添加到打包文件中
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.validate.js", "~/Scripts/jquery.validate.unobtrusive.js", "~/Scripts/jquery.validate.bootstrap.js"));
注：默認情況下，ASP.NET MVC使用通配符*來將jquery.validate*文件打包到jqueryval文件中，如下所示：
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
但是jquery.validate.bootstrap.js必須在jquery validate 插件后加載，所以我們只能顯式的指定文件順序來打包，因為默認情況下打包加載文件的順序是按通配符代表的字母順序排列的。
ASP.NET MVC創建包含Bootstrap樣式編輯模板
- 基元類型
編輯模板（Editor Template）指的是在ASP.NET MVC應用程序中，基於對象屬性的數據類型通過Razor視圖渲染后，自動產生表單Input元素。ASP.NET MVC包含了若干的編輯模板，當然我們也可以實現擴展。編輯模板類似於局部視圖，不同的是，局部視圖通過name來渲染，而編輯模板通過類型來渲染。
舉個栗子，@Html.EditorFor(model => model.Property)，如果Property類型為string，那么@Html.Editor 會創建一個Type=Text的Input元素；如果Property類型為Password，那么會創建一個Type=Password的Input元素。所以EditorFor helper是基於model 屬性的數據類型來渲染生成HTML。
不過美中不足的是，默認產生的HTML如下所示：
可以看到class=”text-box single-line”，但先前提到過，Bootstrap Form元素class必須是 form-control。
所以，為了讓Editor helper生成class為form-control的表單元素，我們需要創建一個自定義的編輯模板來重寫舊的模板。你需要如下操作：
- 在Shared文件夾中創建名為EditorTemplates（注意要一樣的名稱）的文件夾
- 添加名為string.cshtml（注意要一樣的名稱）文件，並添加如下代碼：
@model string @Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class = "form-control" })
在上述代碼中，我們調用 @Html.TextBox方法，並且傳遞了一個空的字符串作為textbox的name。這將會讓model的屬性名作為生成的textbox的name，並且textbox顯示的內容是model的值，最后追加了名為class的attribute，而且其值為”form-control”。
重新生成項目，發現新生成的input元素它的class已經改為”form-control“了。如下所示：
- 非基元類型
ASP.NET MVC能讓開發者創建根據自定義DataType的編輯模板，比如自動生成多行文本框並且規定行數為3行，也是同樣的操作：
- 添加MultilineText. Cshtml（注意名稱相同）文件到EditorTemplates中
- 添加如下代碼：
@model string @Html.TextArea("", ViewData.TemplateInfo.FormattedModelValue. ToString(), new { @class = "form-control", rows = 3 })
- 為了讓我們的Model的屬性在渲染時采用MultilineText.cshtml編輯模板，我們需要為屬性指定DataType attribute為MultilineText:
[DataType(DataType.MultilineText)] public string Description { get; set; }
最終顯示如下所示：
小結
這篇文章為大家介紹了Bootstrap的響應式布局（grid），並且簡單介紹了Bootstrap中的HTML元素，包括Table、Button、Form、Image…。然后修改了JQuery validate插件默認的的設置，使其友好支持Bootstrap中的錯誤提示樣式。最后探索了ASP.NET MVC中的編輯模板，能讓產生的input元素自動包含form-control樣式。
Bootstrap樣式上更多的內容，參考Bootstrap官網全局CSS這一章節內容（http://v3.bootcss.com/css/），謝謝大家支持。