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

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

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

1.運行效果如圖所示

2.實現(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 表單控件之單選按鈕水平排列，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

bootstrap css樣式之表單
這篇文章主要為大家詳細介紹了bootstrap css樣式之表單的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01
詳解微信小程序獲取當前時間及日期的方法
這篇文章主要介紹了微信小程序獲取當前時間及日期的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
JavaScript web網(wǎng)頁入門級開發(fā)詳解
Web框架正如前文所述, 在整個項目結(jié)構中處于一個承上啟下的位置, 是整個項目的核心組件, 所以這次來聊聊Web框架的一些普適性特性和如何快速的入門
2021-10-10
Linux下使用jq友好的打印JSON技巧分享
本文主要給大家介紹通過一個叫jq的小工具，非常的實用，給大家參考下
2014-11-11
JavaScript分秒倒計時器實現(xiàn)方法
這篇文章主要介紹了JavaScript分秒倒計時器實現(xiàn)方法,可實現(xiàn)按照毫秒倒計時的效果,具有一定參考借鑒價值,需要的朋友可以參考下
2015-02-02
JavaScript鍵盤事件常見用法實例分析
這篇文章主要介紹了JavaScript鍵盤事件常見用法,簡單描述了javascript鍵盤事件的分類、功能,并結(jié)合實例形式給出了javascript響應鍵盤事件相關使用技巧,需要的朋友可以參考下
2019-01-01
JavaScript使用sort函數(shù)實現(xiàn)漢字排序
JavaScript中的sort函數(shù)是一個強大且多用途的工具,能夠?qū)?shù)組的元素進行排序,而漢字按照拼音排序又是一個常見需求,下面我們就來看看如何使用JavaScript實現(xiàn)漢字排序吧
2023-12-12
關于js對textarea換行符的處理方法淺析
這篇文章主要給大家介紹了關于js對textarea換行符的處理方法的相關資料，文中通過示例代碼介紹地方非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2018-08-08
使用JavaScript和CSS實現(xiàn)簡單的字符計數(shù)器
在本文中，你將學習如何使用?JavaScript?創(chuàng)建字符計數(shù)器。計數(shù)的數(shù)字可以在小顯示屏中看到。文中示例代碼講解詳細，感興趣的小伙伴可以了解一下
2022-08-08
JS使用ajax方法獲取指定url的head信息中指定字段值的方法
這篇文章主要介紹了JS使用ajax方法獲取指定url的head信息中指定字段值的方法,實例分析了Ajax操作URL中head信息的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-03-03