Bootstrap供给了一套丰富CSS设置、HTML元素以及高级的栅格系统来辅佐开发人员快速构造网页。所有的CSS样式和HTML元素与移动设备优先的流式栅格系统结合，能让开发人员快速轻松的构建直不雅观的界面并且不用担忧在较小的设备上响应的具体细节。

Bootstrap 栅格（Grid）系统

在移动互联网的今天，越来越多的网站被手机设备访谒，移动流量在近几年猛增。Bootstrap 供给了一套响应式、移动设备优先的流式栅格系统，跟着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

栅格参数

Bootstrap 3供给了一系列的预界说class来指定列的尺寸

如下所示：

Bootstrap 栅格系统被支解为12列

当构造你的网页时，记住所有列的总和应该是12。为了图示，请看如下HTML所示：

<divbackground-color: #00ff00;">container"> <divbackground-color: #00ff00;">row"> <divbackground-color: #00ff00;">md-3" style=""> <h3>green</h3> </div> <div> <h3>red</h3> </div> <div> <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> <div> <divfont-size: 18px;">col-xs-3 col-sm-3 col-md-3"> <h3>green</h3> </div> <divfont-size: 18px;">col-xs-6 col-sm-6 col-md-6"> <h3>red</h3> </div> <divfont-size: 18px;">col-xs-3 col-sm-3 col-md-3"> <h3>blue</h3> </div> </div> </div>

Bootstrap HTML元素

Bootstrap已经为我们筹备好了一大堆带有样式的HTML元素，如：

Tables

Buttons

Forms

Images

1、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。代码的逻辑如下:

我的理解：数据实体模型EntitiesModel 【Product】对应于数据库 ，， 视图模型ViewModel [ ProductViewModel ]对应于视图显示，两个模型数据素质来说是不一样的。