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

Add a Picture to a Microsoft Word Document

Jun 15 Javascript

JavaScript 验证码的实例代码(附效果图)

Mar 22 Javascript

javascript使用window.open提示“已经计划系统关机”的原因

Aug 15 Javascript

两种方法基于jQuery实现IE浏览器兼容placeholder效果

Oct 14 Javascript

javascript中typeof操作符和constucor属性检测

Feb 26 Javascript

JavaScript中innerHTML，innerText，outerHTML的用法及区别

Sep 01 Javascript

浅谈JS中逗号运算符的用法

Jun 12 Javascript

很棒的Bootstrap选项卡切换效果

Jul 01 Javascript

JavaScript基础之AJAX简单的小demo

Jan 29 Javascript

9种改善AngularJS性能的方法

Nov 28 Javascript

ndm:NPM的桌面GUI应用程序

Oct 15 Javascript

javascript实现对话框功能警告（alert 消息对话框）确认（confirm 消息对话框）

May 07 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