快捷導(dǎo)航

BootStrap 表單控件之單選按鈕水平排列

更新時(shí)間：2017年05月23日 11:06:11 作者：素顏豬

這篇文章主要介紹了BootStrap 表單控件之單選按鈕水平排列的實(shí)現(xiàn)代碼，需要的朋友可以參考下

1.運(yùn)行效果如圖所示

2.實(shí)現(xiàn)代碼如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>表單控件——單選按鈕水平排列</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" 
   rel="external nofollow" 
  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
  crossorigin="anonymous">
  <!-- 可選的 Bootstrap 主題文件（一般不用引入） -->
  <link rel="stylesheet" 
   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 表單控件之單選按鈕水平排列，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

基于Javascript實(shí)現(xiàn)彈出頁面效果
彈出層效果是一個(gè)很實(shí)用的功能，很多網(wǎng)站都采用了這種方式實(shí)現(xiàn)登錄和注冊(cè)，下面小編通過本文給大家分享具體實(shí)現(xiàn)代碼，對(duì)js彈出頁面效果相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2016-01-01
javascript中Array()數(shù)組函數(shù)詳解
在JavaScript中數(shù)組也是比較常用的對(duì)象之一，數(shù)組是值的有序集合，本篇文章給大家分享Javascript中Array()數(shù)組函數(shù)詳解，需要的朋友可以參考下
2015-08-08
支持ie與FireFox的剪切板操作代碼
支持ie與FireFox的剪切板代碼，包括讀取與寫入剪切板的實(shí)現(xiàn)代碼。
2009-09-09
Javascript調(diào)用函數(shù)方法的幾種方式介紹
這篇文章主要介紹了Javascript調(diào)用函數(shù)方法的幾種方式介紹,本文講解了func()、(function(arg){})(window)、func.bind(sth)()、func.call()、func.apply()等5種方式,需要的朋友可以參考下
2015-03-03
在百度搜索結(jié)果中去除掉一些網(wǎng)站的資料(通過js控制不讓顯示)
這篇文章主要介紹了在百度搜索結(jié)果中去除掉一些網(wǎng)站的資料(通過js控制不讓顯示),需要的朋友可以參考下
2017-05-05
JS中如何使用 filter() 方法過濾數(shù)組元素
filter()方法是JavaScript中用于過濾數(shù)組元素的常用方法,它接受一個(gè)回調(diào)函數(shù)作為參數(shù),返回一個(gè)新數(shù)組,本文總結(jié)了使用filter()方法的最佳實(shí)踐,感興趣的朋友一起看看吧
2025-01-01
JavaScript獲取URL參數(shù)的四種方法總結(jié)
在前端開發(fā)過程中難免會(huì)遇到處理url參數(shù)的問題,這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript獲取URL參數(shù)的四種方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-01-01
微信小程序搜索框組件代碼實(shí)例
這篇文章主要介紹了微信小程序搜索框組件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
js如何對(duì)元素可視區(qū)域進(jìn)行判定
在前端開發(fā)中，有時(shí)候我們需要判斷一個(gè)元素是否在可視區(qū)域內(nèi)，本文主要介紹了js如何對(duì)元素可視區(qū)域進(jìn)行判定，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
Js類的靜態(tài)方法與實(shí)例方法區(qū)分及jQuery拓展的兩種方法
這篇文章主要介紹了Js類的靜態(tài)方法與實(shí)例方法區(qū)分及jQuery拓展的兩種方法的相關(guān)資料,對(duì)靜態(tài)方法(Static)和實(shí)例方法(非Static)不太理解的朋友可以一起學(xué)習(xí)下
2016-06-06