快捷導(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)文章

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