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" 
    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" 
    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>

时间： 2025-02-01 19:54:23

bootstrap-表单控件——单选按钮水平排列的相关文章

bootstrap -- 表单控件

若干css样式 .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; color: #555555; vertical-align: middle; background-color: #ffffff; background-image: none; border: 1px solid #cccccc; bor

Bootstrap 表单控件一（单行输入框input，下拉选择框select ，文本域textarea）

单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的. 为了让控件在各种表单风格中样式不出错,需要添加类名“form-control”,如: <form role="form"

bootstrap表单控件

禁用状态: 被禁用的 fieldset 为<fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件. <form> <fieldset disabled> <div class="form-group"> <label for="disabledTextInput">Disabled input</label> <input type

Bootstrap关于表单控件（Radio,CheckBox）

表单控件(复选框checkbox和单选择按钮radio) Bootstrap框架中checkbox和radio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkbox和radio与label标签配合使用会出现一些小问题(最头痛的是对齐问题).使用Bootstrap框架,开发人员无需考虑太多,只需要按照下面的方法使用即可. <form role="form"> <div class="checkbox"> <labe

Bootstrap关于表单控件（按扭）

按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现: ? input[type=“submit”] ? input[type=“button”] ? input[type=“reset”] ? <button> 这里先让大家看看Bootstrap的按钮长成什么样: 表单控件的大小: 前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了

Bootstrap系列 -- 14. 表单控件输入框input

每一个表单都是由表单控件组成.离开了控件,表单就失去了意义.接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识. 单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的. <fo

Bootstrap系列 -- 18. 表单控件大小

前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了两个不同的类名,用来控制表单控件的高度.这两个类名是: 1. input-sm:让控件比正常大小更小 2. input-lg:让控件比正常大小更大这两个类适用于表单中的input,textarea和select控件 <h1>案例1</h1> <form role="form"

Bootstrap_表单_表单控件

一.输入框input 单行输入框,常见的文本输入框,也就是input的type属性值为text. 在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”] (其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的. 为了让控件在各种表单风格中样式不出错,需要添加类名“.form-control”. <form role=&quo

vue.js基础知识篇(1):简介、数据绑定、指令、计算属性、表单控件绑定和过滤器

目录第一章:vue.js是什么? 代码链接: http://pan.baidu.com/s/1qXCfzRI 密码: 5j79 第一章:vue.js是什么? 1.vue.js是MVVM框架 MVVM的代表框架是Angular.js,以及vue.js. MVVM的view和model是分离的,View的变化会自动更新到ViewModel上,ViewModel的变化会自动同步到View上显示.这种自动同步依赖于ViewModel的属性实现了Observer. 2.它与angular.js的区别相同