脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap 表单控件单选按钮

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

 更新时间：2017年05月23日 11:06:11   作者：素颜猪  
这篇文章主要介绍了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 表单控件之单选按钮水平排列，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 基于Javascript实现弹出页面效果

    基于Javascript实现弹出页面效果

    弹出层效果是一个很实用的功能，很多网站都采用了这种方式实现登录和注册，下面小编通过本文给大家分享具体实现代码，对js弹出页面效果相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • javascript中Array()数组函数详解

    javascript中Array()数组函数详解

    在JavaScript中数组也是比较常用的对象之一，数组是值的有序集合，本篇文章给大家分享Javascript中Array()数组函数详解，需要的朋友可以参考下
    2015-08-08
  • 支持ie与FireFox的剪切板操作代码

    支持ie与FireFox的剪切板操作代码

    支持ie与FireFox的剪切板代码，包括读取与写入剪切板的实现代码。
    2009-09-09
  • Javascript调用函数方法的几种方式介绍

    Javascript调用函数方法的几种方式介绍

    这篇文章主要介绍了Javascript调用函数方法的几种方式介绍,本文讲解了func()、(function(arg){})(window)、func.bind(sth)()、func.call()、func.apply()等5种方式,需要的朋友可以参考下
    2015-03-03
  • 在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)

    在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)

    这篇文章主要介绍了在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示),需要的朋友可以参考下
    2017-05-05
  • JS中如何使用 filter() 方法过滤数组元素

    JS中如何使用 filter() 方法过滤数组元素

    filter()方法是JavaScript中用于过滤数组元素的常用方法,它接受一个回调函数作为参数,返回一个新数组,本文总结了使用filter()方法的最佳实践,感兴趣的朋友一起看看吧
    2025-01-01
  • JavaScript获取URL参数的四种方法总结

    JavaScript获取URL参数的四种方法总结

    在前端开发过程中难免会遇到处理url参数的问题,这篇文章主要给大家总结介绍了关于JavaScript获取URL参数的四种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • 微信小程序 搜索框组件代码实例

    微信小程序 搜索框组件代码实例

    这篇文章主要介绍了微信小程序 搜索框组件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • js如何对元素可视区域进行判定

    js如何对元素可视区域进行判定

    在前端开发中，有时候我们需要判断一个元素是否在可视区域内，本文主要介绍了js如何对元素可视区域进行判定，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • Js类的静态方法与实例方法区分及jQuery拓展的两种方法

    Js类的静态方法与实例方法区分及jQuery拓展的两种方法

    这篇文章主要介绍了Js类的静态方法与实例方法区分及jQuery拓展的两种方法 的相关资料,对静态方法(Static)和实例方法(非Static)不太理解的朋友可以一起学习下
    2016-06-06

最新评论