BootStrap 表单控件之单选按钮水平排列
1.运行效果如图所示
2.实现代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>表单控件——单选按钮水平排列</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet"
href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="external nofollow"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
</head>
<body>
<form role="form">
<div class="form-group">
<label class="radio-inline">
<input type="radio" value="option1" name="sex">男性
</label>
<label class="radio-inline">
<input type="radio" value="option2" name="sex">女性
</label>
<label class="radio-inline">
<input type="radio" value="option3" name="sex">中性
</label>
</div>
</form>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</body>
</html>
以上所述是小编给大家介绍的BootStrap 表单控件之单选按钮水平排列，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
-
问题内容： 为什么没有用于Twitter引导程序的精美文件元素上载按钮？如果为上传按钮实现了蓝色的主按钮，那就太好了。甚至可以使用CSS精细化上传按钮吗？（似乎是无法操纵的本机浏览器元素） 问题答案： 这是Bootstrap 3和Bootstrap 4的解决方案。 要制作看起来像按钮的功能文件输入控件，您只需要HTML： 的HTML 这适用于所有现代浏览器，包括IE9 +。如果您还需要对旧IE的支
-
本文向大家介绍Bootstrap复选框和单选按钮美化插件(推荐)，包括了Bootstrap复选框和单选按钮美化插件(推荐)的使用技巧和注意事项，需要的朋友参考一下 官网地址 需要引入awesome-bootstrap-checkbox.css、font-awesome.css以及font awesome对应的字体font文件，可在上面的网站上下载。 checkboxs的样式 radio的样式 ra
-
主要内容：实例,分割的按钮下拉菜单,实例,按钮下拉菜单的大小,实例,按钮上拉菜单,实例本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单，只需要简单地在一个 .btn-group 容器中放置按钮和下拉菜单即可。您也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单。 下面的实例演示了一个基本的简单的按钮下拉菜单： 实例 <div class="btn-group"> <button type="but
-
主要内容：创建单选按钮,单选按钮组,单选按钮事件,单选按钮焦点单选按钮通常组合在一起，以便用户进行单选，即用户只能在单选按钮列表中选择一个项目。 例如，当选择鞋子尺寸时，我们通常从列表中选择一个尺寸。 单选按钮只能执行：选择或取消选择。 以下代码显示，当放置在中时，只能选择一个。 上面的代码生成以下结果。 创建单选按钮 包中的类有两个构造函数。 要为其标签创建一个带有空字符串的单选按钮，然后再设置标签。 要创建具有指定标签的单选按钮。 方法带有参数可以显式选
-
主要内容：硬编码的单选按钮,单选按钮内项,由地图生成的单选按钮以下部分显示如何使用JSF中的创建单选按钮。 标签呈现一组类型为“”的HTML输入元素，并使用HTML表格和标签标签进行格式化。 以下JSF代码 - 被渲染生成以下HTML代码 - 硬编码的单选按钮 以下是文件： 中的代码。 以下是文件： 中的代码 - 以下是文件： 中的代码 - 单选按钮内项 以下是文件： 中的代码。 以下是文件： 中的代码。 以下是文件： 中的代码。 由地图生成的单选按钮 以下
-
问题内容： 我知道在某些Google线程中已经提到了这一点，但是我仍然找不到将无线电输入绑定到模型的正确解决方案（以简洁的方式）， 目前，我有HTML： 在控制器中： 这不起作用（与复选框相同）… 关于如何在不丢失数据绑定的情况下在第一个单选按钮上设置默认值的任何想法？ 谢谢！ 问题答案： 我认为您应该在这两个单选按钮中使用具有不同值的相同变量。 然后，您应该根据用户输入设置“ Rma”或“ De
-
import { Radio } from 'feui'; components: { [Radio.name]: Radio }, data() { return { radio001: ["安徽", "北京"], radio001Value: "安徽", radio002Value: "北京", radio003: [ {
-
import { Checkicon } from 'feui'; components: { [Checkicon.name]: Checkicon } data () { return { demo1: false, demo2: true, demo3: false, demo4: true } } 代码演示 左对齐 <f