<div> @Bootstrap.Radio("aa", "bb", "cc", "dd", null, true, false, null) </div> <div> @Bootstrap.Radio("fd", "cc", "cc", "法国", "radio-inline", true, false, null) @Bootstrap.Radio("dfer", "cc", "cc", "英国", "radio-inline", true, false, null) @Bootstrap.Radio("erer", "cc", "cc", "意大利", "radio-inline", true, false, null) </div> <div> @Bootstrap.CheckBox("fd", "cc2", "cc", "法国", "checkbox-inline", true, false, null) @Bootstrap.CheckBox("dfer", "cc2", "cc", "英国", "checkbox-inline", true, false, null) @Bootstrap.CheckBox("erer", "cc2", "cc", "意大利", "checkbox-inline", true, false, null) </div>
得到的结果：
四、ButtonExtensions
关于bootstrap的按钮样式，bootstrap官网上面也有详细的说明。比如常见的按钮类型由普通按钮、提交按钮、重置按钮；常见的按钮样式主要有如下几种：
另外，按钮的大小也有分类：
基于此，我们将bootstrap类型的按钮做了如下封装
ButtonExtensions.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace BootstrapExtensions { public static class ButtonExtensions { /// <summary> /// 通过使用指定的 HTML 帮助器和窗体字段的名称，返回文本 Bootstrap Button 元素。 /// </summary> /// <param>此方法扩展的 HTML 帮助器实例。</param> /// <param>显示在按钮上的文本。</param> /// <param>图标的css类。</param> /// <returns>一个 Bootstrap Button元素。</returns> public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon) { return Button(html, text, icon, null); } /// <summary> /// 通过使用指定的 HTML 帮助器和窗体字段的名称，返回文本 Bootstrap Button 元素。 /// </summary> /// <param>此方法扩展的 HTML 帮助器实例。</param> /// <param>显示在按钮上的文本。</param> /// <param>图标的css类。</param> /// <param>按钮类型。</param> /// <returns>一个 Bootstrap Button元素。</returns> public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, ButtonType type) { return Button(html, text, icon, type, null); } /// <summary> /// 通过使用指定的 HTML 帮助器和窗体字段的名称，返回文本 Bootstrap Button 元素。 /// </summary> /// <param>此方法扩展的 HTML 帮助器实例。</param> /// <param>显示在按钮上的文本。</param> /// <param>图标的css类。</param> /// <param>一个对象，其中包含要为该元素设置的 HTML 特性。</param> /// <returns>一个 Bootstrap Button元素。</returns> public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, object htmlAttributes) { return Button(html, text, icon, ButtonType.Button, htmlAttributes); } /// <summary> /// 通过使用指定的 HTML 帮助器和窗体字段的名称，返回文本 Bootstrap Button 元素。 /// </summary> /// <param>此方法扩展的 HTML 帮助器实例。</param> /// <param>显示在按钮上的文本。</param> /// <param>图标的css类。</param> /// <param>按钮类型。</param> /// <param>一个对象，其中包含要为该元素设置的 HTML 特性。</param> /// <returns>一个 Bootstrap Button元素。</returns> public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, ButtonType type, object htmlAttributes) { return Button(html, text, icon, type, ButtonClass.Default, null); } /// <summary> /// 通过使用指定的 HTML 帮助器和窗体字段的名称，返回文本 Bootstrap Button 元素。 /// </summary> /// <param>此方法扩展的 HTML 帮助器实例。</param> /// <param>显示在按钮上的文本。</param> /// <param>图标的css类。</param> /// <param>按钮样式。</param> /// <returns>一个 Bootstrap Button元素。</returns> public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, ButtonClass cssClass) { return Button(html, text, icon, cssClass, null); } /// <summary> /// 通过使用指定的 HTML 帮助器和窗体字段的名称，返回文本 Bootstrap Button 元素。 /// </summary> /// <param>此方法扩展的 HTML 帮助器实例。</param> /// <param>显示在按钮上的文本。</param> /// <param>图标的css类。</param> /// <param>按钮样式。</param> /// <param>一个对象，其中包含要为该元素设置的 HTML 特性。</param> /// <returns>一个 Bootstrap Button元素。</returns> public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, ButtonClass cssClass, object htmlAttributes) { return Button(html, text, icon, ButtonType.Button, cssClass, null); } /// <summary> /// 通过使用指定的 HTML 帮助器和窗体字段的名称，返回文本 Bootstrap Button 元素。 /// </summary> /// <param>此方法扩展的 HTML 帮助器实例。</param> /// <param>显示在按钮上的文本。</param> /// <param>图标的css类。</param> /// <param>按钮类型。</param> /// <param>按钮样式。</param> /// <returns>一个 Bootstrap Button元素。</returns> public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, ButtonType type, ButtonClass cssClass) { return Button(html, text, icon, type, cssClass, null); } /// <summary> /// 通过使用指定的 HTML 帮助器和窗体字段的名称，返回文本 Bootstrap Button 元素。 /// </summary> /// <param>扩展方法实例。</param> /// <param>显示在按钮上的文本。</param> /// <param>图标的css类。</param> /// <param>按钮类型。</param> /// <param>按钮样式。</param> /// <param>一个对象，其中包含要为该元素设置的 HTML 特性。</param> /// <returns>一个 Bootstrap Button元素。</returns> public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, ButtonType type, ButtonClass cssClass, object htmlAttributes, ButtonSize size = ButtonSize.nm) { TagBuilder tag = new TagBuilder("button"); IDictionary<string, object> attributes = BootstrapHelper.AnonymousObjectToHtmlAttributes(htmlAttributes); attributes.Add("type", type.ToString().ToLower()); tag.AddCssClass("btn btn-" + cssClass.ToString().ToLower()); tag.MergeAttributes(attributes); TagBuilder span = new TagBuilder("span"); span.AddCssClass(icon.Substring(0, icon.IndexOf('-')) + " " + icon); if (size != ButtonSize.nm) { tag.AddCssClass("btn-" + size.ToString()); } span.Attributes.Add("aria-hidden", "true"); tag.InnerHtml = span.ToString() + text; return MvcHtmlString.Create(tag.ToString()); } } /// <summary> /// bootstrap按钮样式 /// </summary> public enum ButtonClass { /// <summary> /// /// </summary> Default, /// <summary> /// /// </summary> Primary, /// <summary> /// /// </summary> Success, /// <summary> /// /// </summary> Info, /// <summary> /// /// </summary> Warning, /// <summary> /// /// </summary> Danger, /// <summary> /// /// </summary> Link } /// <summary> /// bootstrap按钮类型 /// </summary> public enum ButtonType { /// <summary> /// 普通按钮 /// </summary> Button, /// <summary> /// 提交按钮 /// </summary> Submit, /// <summary> /// 重置按钮 /// </summary> Reset } public enum ButtonSize { lg, nm, sm, xs } }
1、将按钮的类型、样式、大小定义成了枚举类型，这样使用起来更加方便；
2、生成按钮必须的参数有text和icon，保证按钮的基本构成。
3、使用