邢台县建设局网站,.net做网站的方式,个人博客网页设计html模板,品牌建设过程中的正确名利观阅读目录 Bootstrap 栅格#xff08;Grid#xff09;系统Bootstrap HTML元素Bootstrap 验证样式ASP.NET MVC创建包含Bootstrap样式编辑模板小结Bootstrap提供了一套丰富CSS设置、HTML元素以及高级的栅格系统来帮助开发人员快速布局网页。所有的CSS样式和HTML元素与移动设备优… 阅读目录 Bootstrap 栅格Grid系统Bootstrap HTML元素Bootstrap 验证样式ASP.NET MVC创建包含Bootstrap样式编辑模板小结 Bootstrap提供了一套丰富CSS设置、HTML元素以及高级的栅格系统来帮助开发人员快速布局网页。所有的CSS样式和HTML元素与移动设备优先的流式栅格系统结合能让开发人员快速轻松的构建直观的界面并且不用担心在较小的设备上响应的具体细节。 回到顶部 Bootstrap 栅格Grid系统 在移动互联网的今天越来越多的网站被手机设备访问移动流量在近几年猛增。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统随着屏幕或视口viewport尺寸的增加系统会自动分为最多12列。 栅格参数 Bootstrap 3提供了一系列的预定义class来指定列的尺寸如下所示 Bootstrap 栅格系统被分割为12列当布局你的网页时记住所有列的总和应该是12。为了图示请看如下HTML所示 div classcontainerdiv classrowdiv classcol-md-3 stylebackground-color: green;h3green/h3/divdiv classcol-md-6 stylebackground-color: red;h3red/h3/divdiv classcol-md-3 stylebackground-color: blue;h3blue/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 classcontainerdiv classrowdiv classcol-xs-3 col-sm-3 col-md-3 stylebackground-color: green;h3green/h3/divdiv classcol-xs-6 col-sm-6 col-md-6 stylebackground-color: red;h3red/h3/divdiv classcol-xs-3 col-sm-3 col-md-3 stylebackground-color: blue;h3blue/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.CreateMapProduct, 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().ToProductViewModel().ToArray();return View(products);}} 上述代码使用依赖注入获取Entity Framework DbContext对象Index Action接受从数据库中返回Products 集合然后使用AutoMapper映射到每一个ProductViewModel对象中最后为View返回数据。 在视图上使用Bootstrap HTML table来显示数据 div classcontainerh3Products/h3table classtabletheadtrthProduct Name/ththUnit Price/ththUnits In Stock/ththDiscontinued/th/tr/theadtbodyforeach (var item in Model){trtdHtml.DisplayFor(modelItem item.ProductName)/tdtdHtml.DisplayFor(modelItem item.UnitPrice)/tdtdHtml.DisplayFor(modelItem item.UnitsInStock)/tdtdHtml.DisplayFor(modelItem item.Discontinued)/td/tr}/tbody/table/div View Code 呈现的数据如下所示: Bootstrap Tables 其余样式 Bootstrap提供了额外的样式来修饰table。比如使用table-bordered来显示边框table-striped显示奇偶数行间颜色不同斑马条纹状table-hover顾名思义当鼠标移动行时高亮通过添加 .table-condensed 类可以让表格更加紧凑单元格中的内补padding均会减半修改后的代码如下所示 table classtable table-bordered table-striped table-hover
/table 显示的效果如下 Bootstrap上下文Table 样式 Bootstrap提供了额外的class能让我们修饰td和tr的样式提供的class如下 Active Success InfoWarningDanger修改上述代码为tr动态添加样式 foreach (var item in Model)
{tr classitem.StatustdHtml.DisplayFor(modelItem item.ProductName)/tdtdHtml.DisplayFor(modelItem item.UnitPrice)/tdtdHtml.DisplayFor(modelItem item.UnitsInStock)/tdtdHtml.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 classrow!-- default按钮 --button typebutton classbtn btn-default btn-xsDefault SizeMini/buttonbutton typebutton classbtn btn-default btn-smDefault SizeSmall/buttonbutton typebutton classbtn btn-defaultDefault/buttonbutton typebutton classbtn btn-default btn-lgDefault SizeLarge/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 classform-groupHtml.LabelFor(m m.UserName, new { class col-md-2 control-label })div classcol-md-10Html.TextBoxFor(m m.UserName, new { class form-control })Html.ValidationMessageFor(m m.UserName)/div/divdiv classform-groupHtml.LabelFor(m m.Password, new { class col-md-2 control-label })div classcol-md-10Html.PasswordFor(m m.Password, new { class form-control })Html.ValidationMessageFor(m m.Password)/div/divdiv classform-groupdiv classcol-md-offset-2 col-md-10input typesubmit valueLog in classbtn btn-default //div/div
} View Code 上述代码中使用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 classform-groupHtml.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)/divdiv classform-groupHtml.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)/divdiv classform-groupinput typesubmit valueLog in classbtn btn-default //div
} View Code 显示效果如下 Bootstrap Image 在 Bootstrap 3.0中通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性从而让图片在其父元素中更好的缩放。 通过为 img 元素添加以下相应的类可以让图片呈现不同的形状。 img-rounded img-circle img-thumbnail 请看如下代码 div classrowh3Our Team/h3foreach (var item in Model){div classcol-md-4img srcUrl.Content(~/Images/employees/ item.EmployeeID .png) altitem.FirstNameitem.LastName classimg-circle img-responsiveh3item.FirstName item.LastName smallitem.Title/small/h3pitem.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 classform-group has-errorHtml.LabelFor(m m.UserName, new { class col-md-2 control-label })div classcol-md-10Html.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 会创建一个TypeText的Input元素如果Property类型为Password那么会创建一个TypePassword的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/谢谢大家支持。 本博客为木宛城主原创基于Creative Commons Attribution 2.5 China Mainland License发布欢迎转载演绎或用于商业目的但是必须保留本文的署名木宛城主包含链接。如您有任何疑问或者授权方面的协商请给我留言。 本文转自木宛城主博客园博客原文链接http://www.cnblogs.com/OceanEyes/p/bootstrap-html-elements.html如需转载请自行联系原作者
