编程 Javascript

BootStrap 表单控件之单选按钮水平排列

Posted in Javascript onMay 23, 2017

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 表单控件之单选按钮水平排列，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

BootStrap 表单控件之单选按钮水平排列

- Author -

素颜猪

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript nextSibling 与 getNextElement(node) 使用介绍

Oct 13 Javascript

使用js解决由border属性引起的div宽度问题

Nov 26 Javascript

JS实现清除指定cookies的方法

Sep 20 Javascript

js操作滚动条事件实例

Jan 29 Javascript

RequireJS多页面应用实例分析

Jun 29 Javascript

详解Angular.js数据绑定时自动转义html标签及内容

Mar 30 Javascript

JS实现数组去重方法总结(六种方法)

Jul 14 Javascript

移动端吸顶fixbar的解决方案详解

Jul 17 Javascript

浅谈vuex的基本用法和mapaction传值问题

Nov 08 Javascript

Vue 实现显示/隐藏层的思路（加全局点击事件）

Dec 31 Javascript

javascript设计模式 ? 建造者模式原理与应用实例分析

Apr 10 Javascript

JS字符串补全方法padStart()和padEnd()

May 27 Javascript

vue实现app页面切换动画效果实例

May 23 #Javascript

BootStrap表单控件之复选框checkbox和单选择按钮radio

May 23 #Javascript

JavaScript设置名字输入不合法的实现方法

May 23 #Javascript

node.js中express中间件body-parser的介绍与用法详解

May 23 #Javascript

微信小程序request出现400的问题解决办法

May 23 #Javascript

Bootstrap响应式表格详解

May 23 #Javascript

Node.js 实现简单的接口服务器的实例代码

May 23 #Javascript

You might like

老机欣赏｜中国60年代精品收音机

2021/03/02 无线电

检测png图片是否完整的php代码

2010/09/06 PHP

php设置允许大文件上传示例代码

2014/03/10 PHP

PHP对接微信公众平台消息接口开发流程教程

2014/03/25 PHP

PHP+Ajax实时自动检测是否联网的方法

2015/07/01 PHP

thinkPHP查询方式小结

2016/01/09 PHP

浅析PHP7新功能及语法变化总结

2016/06/17 PHP

获取Javscript执行函数名称的方法

2006/12/22 Javascript

javascript简单事件处理和with用法介绍

2013/09/16 Javascript

php析构函数的具体用法小结

2014/03/11 Javascript

Jquery ui datepicker设置日期范围，如只能隔3天【实现代码】

2016/05/04 Javascript

原生js实现吸顶效果

2017/03/13 Javascript

使用ef6创建oracle数据库的实体模型遇到的问题及解决方案

2017/11/09 Javascript

Vue 2.5.2下axios + express 本地请求404的解决方法

2018/02/21 Javascript

微信小程序收藏功能的实现代码

2018/06/12 Javascript

python 换位密码算法的实例详解

2017/07/19 Python

Python分析学校四六级过关情况

2017/11/22 Python

python面向对象多线程爬虫爬取搜狐页面的实例代码

2018/05/31 Python

Python使用pickle模块储存对象操作示例

2018/08/15 Python

Python 共享变量加锁、释放详解

2019/08/28 Python

python 和c++实现旋转矩阵到欧拉角的变换方式

2019/12/04 Python

python全局变量引用与修改过程解析

2020/01/07 Python

Python selenium如何打包静态网页并下载

2020/08/12 Python

python3中数组逆序输出方法

2020/12/01 Python

英国精品买手店：Browns Fashion

2016/09/29 全球购物

欧洲领先的火车票和大巴票预订平台：Trainline

2018/12/26 全球购物

澳洲网红粉泥面膜：Sand & Sky

2019/08/13 全球购物

会计主管岗位职责范文

2013/11/08 职场文书

校园安全广播稿

2014/02/08 职场文书

领导干部作风整顿剖析材料

2014/10/11 职场文书

储备店长岗位职责

2015/04/14 职场文书

2015年仓库管理员工作总结

2015/04/21 职场文书

拾金不昧通报表扬范文

2015/05/05 职场文书

实习报告范文

2019/07/30 职场文书

python机器学习创建基于规则聊天机器人过程示例详解

2021/11/02 Python

十大最强岩石系宝可梦，怪颚龙实力最强，第七破坏力很强

2022/03/18 日漫