Bootstrap 提供了一套豐富 CSS 設(shè)置、HTML 元素以及高級的柵格系統(tǒng)來幫助開發(fā)人員快速布局網(wǎng)頁。所有的 CSS 樣式和 HTML 元素與移動設(shè)備優(yōu)先的流式柵格系統(tǒng)結(jié)合，能讓開發(fā)人員快速輕松的構(gòu)建直觀的界面并且不用擔心在較小的設(shè)備上響應(yīng)的具體細節(jié)。
在移動互聯(lián)網(wǎng)的今天，越來越多的網(wǎng)站被手機設(shè)備訪問，移動流量在近幾年猛增。Bootstrap 提供了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多 12 列。
Bootstrap 3 提供了一系列的預(yù)定義 class 來指定列的尺寸，如下所示：
http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter2/1.png" alt="" />
Bootstrap 柵格系統(tǒng)被分割為 12 列，當布局你的網(wǎng)頁時，記住所有列的總和應(yīng)該是 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 需要為頁面內(nèi)容和柵格系統(tǒng)包裹一個 .container 容器。
在上述代碼中，我添加了一個 class 為 container 的 div 容器，并且包含了一個子的 div 元素 row（行）。row div 元素依次有 3 列。其中 2 列包含了 col-md-3 的 class、一列包含了 col-md-6 的 class。當他們組合在一起時，他們加起來總和是 12.但這段 HTML 代碼只作用于顯示器分辨率>=992 的設(shè)備。所以為了更好的響應(yīng)低分辨率的設(shè)備，我們需要結(jié)合不同的 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 已經(jīng)為我們準備好了一大堆帶有樣式的 HTML 元素，如：
Bootstrap 為 HTML tables 提供了默認的樣式和自定義他們布局和行為的選項。為了更好的演示，我使用精典的 Northwind 示例數(shù)據(jù)庫以及如下技術(shù)：
打開 Visual Studio，創(chuàng)建一個 ASP.NET MVC 的項目，默認情況下，VS 已經(jīng)為我們添加了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 屬性創(chuàng)建了一個條件映射，如果 Product 是 discontinued，那么 Status為danger；如果 UnitPrice 大于 50，則設(shè)置 Status 屬性為 info；如果 UnitInStock 小于 20，那么設(shè)置 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 并且創(chuàng)建名為 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 接受從數(shù)據(jù)庫中返回 Products 集合然后使用 AutoMapper 映射到每一個 ProductViewModel 對象中，最后為 View 返回數(shù)據(jù)。
最后，在視圖上使用 Bootstrap HTML table 來顯示數(shù)據(jù)
<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>呈現(xiàn)的數(shù)據(jù)如下所示:
http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter2/5.png" alt="" />
Bootstrap 提供了額外的樣式來修飾 table。比如使用 table-bordered 來顯示邊框， table-striped 顯示奇偶數(shù)行間顏色不同（斑馬條紋狀），table-hover 顧名思義，當鼠標移動行時高亮，通過添加 .table-condensed 類可以讓表格更加緊湊，單元格中的內(nèi)補（padding）均會減半，修改后的代碼如下所示：
<table class="table table-bordered table-striped table-hover">
</table>顯示的效果如下：
http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter2/6.png" alt="" />
Bootstrap 提供了額外的 class 能讓我們修飾和的樣式，提供的 class 如下：
修改上述代碼，為動態(tài)添加樣式：
@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>
}更新過后的效果如下所示：
http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter2/7.png" alt="" />
Bootstrap 提供了許多各種不同顏色和大小的 buttons，為核心的 buttons 提供 6 種顏色和 4 種尺寸可以選擇，同樣通過設(shè)置 class 屬性來顯示不同的風格：
? btn btn-primary btn-xs
? btn btn-default btn-sm
? btn btn-default
? btn btn-sucess btn-lg
可以為 Button 設(shè)置顏色的 class：
? btn-default
? btn-primary
? btn-success
? btn-info
? btn-warning
? btn-danger
所以可以使用如下代碼來呈現(xiàn)效果：
<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>顯示效果如下：
http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter2/8.png" alt="" />
表單常見于大多數(shù)業(yè)務(wù)應(yīng)用程序里，因此統(tǒng)一的樣式有助于提高用戶體驗，Bootstrap 提供了許多不同的 CSS 樣式來美化表單。
使用 ASP.NET MVC 的 HTML.BeginForm 可以方便的創(chuàng)建一個表單，通過為
掃碼關(guān)注鍍金池微信號
手機訂課，優(yōu)惠多多