编程 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 相关文章推荐

基于JQuery 滑动与动画的说明介绍

Apr 18 Javascript

js 本地预览的简单实现方法

Feb 18 Javascript

单击和双击事件的冲突处理示例代码

Apr 03 Javascript

javascript中递归函数用法注意点

Jul 30 Javascript

AngularJS应用开发思维之依赖注入3

Aug 19 Javascript

JS正则表达式修饰符中multiline(/m)用法分析

Dec 27 Javascript

bootstrap警告框使用方法解析

Jan 13 Javascript

利用CSS、JavaScript及Ajax实现图片预加载的三大方法

Jan 22 Javascript

js的继承方法小结（prototype、call、apply）（推荐）

Apr 17 Javascript

JavaScript+HTML5 canvas实现放大镜效果完整示例

May 15 Javascript

vue实现一个6个输入框的验证码输入组件功能的实例代码

Jun 29 Javascript

原生JavaScript写出Tabs标签页的实例代码

Jul 20 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

PHP JSON格式数据交互实例代码详解

2011/01/13 PHP

PHP扩展开发教程(总结)

2015/11/04 PHP

分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html

2015/12/09 PHP

PHP自定义错误用法示例

2016/09/28 PHP

php实现微信公众平台发红包功能

2018/06/14 PHP

建议大家看下JavaScript重要知识更新

2007/07/08 Javascript

jQuery提交多个表单的小例子

2013/06/30 Javascript

js实现动态改变字体大小代码

2014/01/02 Javascript

深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制

2014/06/10 Javascript

使用JavaScript 编写简单计算器

2014/11/24 Javascript

jQuery简单实现input文本框内灰色提示文本效果的方法

2015/12/02 Javascript

javascript检测移动设备横竖屏

2016/05/21 Javascript

在web中js实现类似excel的表格控件

2016/09/01 Javascript

AngularJs Forms详解及简单示例

2016/09/01 Javascript

Angular中管道操作符(|)的使用方法

2017/12/15 Javascript

Vue的事件响应式进度条组件实例详解

2018/02/04 Javascript

js canvas实现红包照片效果

2018/08/21 Javascript

@angular前端项目代码优化之构建Api Tree的方法

2018/12/24 Javascript

微信小程序的引导页实现代码

2020/06/24 Javascript

浅谈Python 对象内存占用

2016/07/15 Python

Python整型运算之布尔型、标准整型、长整型操作示例

2017/07/21 Python

Python实现二维曲线拟合的方法

2018/12/29 Python

tensorflow如何继续训练之前保存的模型实例

2020/01/21 Python

浅析Python requests 模块

2020/10/09 Python

HTML5 Web缓存和运用程序缓存(cookie,session)

2018/01/11 HTML / CSS

千禧酒店及度假村官方网站：Millennium Hotels and Resorts

2019/05/10 全球购物

英国时尚泳装品牌：Maru Swimwear

2019/10/06 全球购物

优秀中专生推荐信

2013/11/17 职场文书

大家访活动实施方案

2014/03/10 职场文书

民警个人对照检查剖析材料

2014/09/17 职场文书

六一儿童节标语

2014/10/08 职场文书

2015年教师节演讲稿范文

2015/03/19 职场文书

暑期辅导班宣传单

2015/07/14 职场文书

2019年圣诞节祝福语集锦

2019/12/25 职场文书

浅谈mysql返回Boolean类型的几种情况

2021/06/04 MySQL

浅谈MySql整型索引和字符串索引失效或隐式转换问题

2021/11/20 MySQL