复选框和单选按钮标签包含在<Label>标签中
<div class="checkbox">
<label><input type="checkbox" value="">选项 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">选项 2</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1"
value="option1" checked> 选项 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2"
value="option2">
选项 2 - 选择它将会取消选择选项 1
</label> 内联的复选框和单选按钮,
  • 对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class,控制它们显示在同一行上。

<div>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3
</label>
<label class="checkbox-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios3"
value="option1" checked> 选项 1
</label>
<label class="checkbox-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios4"
value="option2"> 选项 2
</label>
</div> 基架自动创建的Create 视图的代码:

如果是一个对象的成员是枚举类型,基架的 Create视图会自动生成枚举类型的下拉菜单。 @Html.EnumDropDownListFor(model => model.NotificationType, htmlAttributes: new { @class =
"form-control" })

<div class="form-group">
@Html.LabelFor(model => model.NotificationType, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EnumDropDownListFor(model => model.NotificationType, htmlAttributes: new { @class = "form-control" })

虽然下面用的是@Html.EditorFor方法,但是 MVC框架能识别它是一个boolean类型,因此,会使用checkbox来渲染视图。

<div class="form-group">
@Html.LabelFor(model => model.IsDismissed, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
@Html.EditorFor(model => model.IsDismissed)
@Html.ValidationMessageFor(model => model.IsDismissed, "", new { @class = "text-danger" })
</div>
</div>
</div>

@Html.ValidationMessageFor(model => model.NotificationType, "", new { @class = "text-danger" })
</div>
</div>

bootstrap复选框和单选按钮的更多相关文章

  1. bootstrap历练实例:复选框或单选按钮作为输入框组的前缀或后缀

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. spring mvc:常用标签库(文本框,密码框,文本域,复选框,单选按钮,下拉框隐藏于,上传文件等)

    在jsp页面需要引入:<%@taglib uri="http://www.springframework.org/tags/form" prefix="form&q ...

  3. 有关下拉列表、复选框、单选按钮、iframe等jquery处理方法

    1.jquery验证复选框互斥选项,代码如下: //验证复选框中的互斥选项 function checkData(name, val1, val2){ //获取所有checkbox值 var chec ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:复选框(Checkbox)和单选框(Radio)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. jquery 获取一组元素的选中项 - 函数、jquery获取复选框值、jquery获取单选按钮值

    做表单提交时,如果现在还在用form提交,用户体验很差,所以一般使用ajax提交. 其中需要获取每个表单输入元素的值,获取的时候像文本框这些还好说,Jquery提供了 .val() 方法,获取很方便, ...

  6. 8、单选按钮(JRadioButton)和复选框(JCheckBox)

    8.单选按钮(JRadioButton)和复选框(JCheckBox) 实现一个单选按钮(或复选框),此按钮项可被选择或取消选择,并显示其状态.JRadioButton对象与ButtonGroup对象 ...

  7. [ PyQt入门教程 ] PyQt5基本控件使用:单选按钮、复选框、下拉框

    本文主要介绍PyQt5界面最基本使用的单选按钮.复选框.下拉框三种控件的使用方法进行介绍. 1.RadioButton单选按钮/CheckBox复选框.需要知道如何判断单选按钮是否被选中. 2.Com ...

  8. Web前端之复选框选中属性

    熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好 了.博主之前用户不少方法,经常Google到一些这个不好那个 ...

  9. [SAP ABAP开发技术总结]选择屏幕——按钮、单选复选框

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

随机推荐

  1. 【收藏】实战Nginx与PHP(FastCGI)的安装、配置与优化

    拜读南非蚂蚁大牛的文章真是有所收获 http://ixdba.blog.51cto.com/2895551/806622 一.什么是 FastCGI FastCGI是一个可伸缩地.高速地在HTTP s ...

  2. RedirectAttributes

    RedirectAttributes是Spring mvc 3.1版本之后出来的一个功能,专门用于重定向之后还能带参数跳转的 他有两种带参的方式: 第一种:  attr.addAttribute(&q ...

  3. MongoDB学习day04--NodeJs操作数据库增删改查

    一.在Nodejs中使用Mongodb Nodejs需要引入的包 npm install mongodb --save -dev 或者使用镜像 cnpm install mongodb --save ...

  4. win10 笔记本猎豹WiFi无法打开

    网卡驱动太新了,先把网卡驱动卸载,重新安装一个就可以,用驱动精灵,17.15.0.5版本就可以

  5. 如何扩展ArcGIS中的元数据编辑器

    http://www.esrichina-bj.cn/old../library/arcnews16/Metadata.htm http://www.esrichina-bj.cn/old../lib ...

  6. centos 7 samba 回收站

    vim /etc/samba/smb.conf其中添加 #==================================vfs object = recyclerecycle:repositor ...

  7. [React] {svg, css module, sass} support in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr  ...

  8. 用Lazarus编写第一个程序Pascal版的hello world

    安装 Lazarus的过程不用多说,都是傻瓜式的. 打开Lazarus.Lazarus会自己主动新建一个窗体形式的应用程序. 你会看到五个窗体. 主窗体 这个窗体显示有标题栏.菜单条和工具栏. 对象视 ...

  9. ubuntu重新启动网卡

    1.关闭接口:sudo ifconfig eth0 down 2.然后打开:sudo ifconfig eth0 up

  10. nginx内存池

    一.设计原则 (1)降低内存碎片 (2)降低向操作系统申请内存的次数 (3)减少各个模块的开发效率 二.源代码结构 struct ngx_pool_s {     ngx_pool_data_t    ...