Bootstrap3 内联单选和多选框

通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

<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="radio-inline">
 <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
 <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
 <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

以上所述是小编给大家介绍的Bootstrap3 内联单选和多选框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Bootstrap3 input输入框插入glyphicon图标的方法

    Bootstrap3 input输入框插入glyphicon图标的方法

    bootstrap3如何在input输入框插入glyphicon图标呢?插入图标看起来比较醒目,满足用户体验价值观,此功能应用于各大网站. 怎么把图标放在输入框的开头?? <div class="form-group has-feedback"> <label class="col-md-2 control-label" for="username">用户名</label> <div class=&quo

  • Bootstrap3使用typeahead插件实现自动补全功能

    Bootstrap3使用typeahead插件实现自动补全功能

    很酷的一个自动补全插件 http://twitter.github.io/typeahead.js 在bootstrap中使用typeahead插件,完成自动补全 相关的文档:https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md 数据源: Local:数组 prefectch:json remote等方式 -----------------------------------------------

  • Bootstrap3 多选和单选框(checkbox)

    多选框(checkbox)用于选择列表中的一个或多个选项,而单选框(radio)用于从多个选项中只选择一个. 设置了 disabled 属性的单选或多选框都能被赋予合适的样式.对于和多选或单选框联合使用的 <label> 标签,如果也希望将悬停于上方的鼠标设置为"禁止点击"的样式,请将 .disabled 类赋予 .radio..radio-inline..checkbox..checkbox-inline 或 <fieldset>. 默认外观(堆叠在一起) &

  • 基于Bootstrap3表格插件和分页插件实例详解

    基于Bootstrap3表格插件和分页插件实例详解

    首先看下实现效果图,如果觉得还不错,请参考实现代码. 上面数据 下面分页 使用方法 1 导入bootstrap的css <link rel="stylesheet" href="css/v3/bootstrap.min.css"> 2 导入jquery <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>

  • Bootstrap3 内联单选和多选框

    通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框(checkbox)或单选框(radio)控件上,可以使这些控件排列在一行. <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label> <la

  • 解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题

    首先: 引入需要的css和js <link rel="stylesheet" href="${ctx}/adminthemes/version3/plugins/layui/css/layui.css" rel="external nofollow" /> <script type="text/javascript" src="${ctx}/adminthemes/version3/plugins/

  • Android实现弹出列表、单选、多选框

    本文实例为大家分享了Android实现弹出列表.单选.多选框的具体代码,供大家参考,具体内容如下 效果图如下: 需要建一个menu xml布局如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schema

  • Android开发之获取单选与复选框的值操作示例

    Android开发之获取单选与复选框的值操作示例

    本文实例讲述了Android开发之获取单选与复选框的值操作.分享给大家供大家参考,具体如下: 效果图: 布局文件: <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/root" android:layout

  • Asp.net自定义控件之单选、多选控件

    Asp.net自定义控件之单选、多选控件

    本文实例为大家分享了Asp.net单选.复选框控件的具体实现代码,供大家参考,具体内容如下 将常用的jquery插件封装成控件也是个不错的选择. 先看看效果: 1.新建类库项目,创建数据源类 [Serializable] public class Select2Item { public bool Selected { get; set; } public string Text { get; set; } public string Value { get; set; } public Sel

  • 使用AngularJS处理单选框和复选框的简单方法

    AngularJS对表单的处理相当简单.在AngularJS使用双向数据绑定方式进行表单验证的时候,实质上它在帮我们进行表单处理. 使用复选框的的例子有很多,同时我们对它们的处理方式也有很多.这篇文章中我们将看一看把复选框和单选按钮同数据变量绑定的方法和我们对它的处理办法. 创建Angular表单 在这篇文章里,我们需要两个文件:index.html和app.js.app.js用来保存所有的Angular代码(它不大),而index.html是动作运行的地方.首先我们创建AngularJS文件.

  • AngularJS 单选框及多选框的双向动态绑定

    AngularJS 单选框及多选框的双向动态绑定

    AngularJS 在 <input type="text" /> 中实现双向动态绑定十分简单,如下所示: <input type="text" ng-model="topic.title" /> 只需要用ng-model 与 $scope 中的属性对应,即实现了type="text" 的双向动态绑定.当 <input type="radio" /> 及 <inpu

  • AngularJS单选框及多选框实现双向动态绑定

    在AngularJS中提及双向数据绑定,大家肯定会想到ng-model指令. 一.ng-model ng-model指令用来将input.select.textarea或自定义表单控件同包含它们的作用域中的属性进行绑定.它将当前作用域中运算表达式的值同给定的元素进行绑定.如果属性不存在,它会隐式创建并将其添加到当前作用域中. 始终用ng-model来绑定scope上一个数据模型内的属性,而不是scope上的属性,这可以避免在作用域或后代作用域中发生属性覆盖! <input type="te

  • 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框

    先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴

  • HTML复选框和单选框 checkbox和radio事件介绍

    checkbox 和 radio的事件选择一度让我很迷惑. 开始以我对js的理解,我觉得change事件应该是最合理的,可惜啊ie下change事件是在改变后焦点离开时才触发. 后来就用click mousedown等鼠标事件代替.发现click比mousedown要更完美一些: radio注册了click事件以后,神奇的是用键盘上的上下左右选择时,居然会触发鼠标事件,滚轮也会触发,这种神奇的事情在mousedown下面是不会发生的.(webkit不能使用上下左右选择) checkbox注册cl

随机推荐