快捷導(dǎo)航

BootStrap表單控件之復(fù)選框checkbox和單選擇按鈕radio

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

這篇文章主要介紹了BootStrap表單控件之復(fù)選框checkbox和單選擇按鈕radio的相關(guā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>表單控件——復(fù)選框checkbox和單選擇按鈕radio</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">
  <h3>示例</h3>
  <div class="checkbox">
   <label for="">
    <input type="checkbox">記住密碼
   </label>
  </div>
  <div class="radio">
   <label for="">
    <input type="radio" name="optionsRadios" id="optionsRadios1" 
    value="love" checked>喜歡
   </label>
  </div>
  <div class="radio">
   <label for="">
    <input type="radio" name="optionsRadios" id="optionsRadios2" 
    value="hate">不喜歡
   </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表單控件之復(fù)選框checkbox和單選擇按鈕radio，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

網(wǎng)頁(yè)和瀏覽器兼容性問(wèn)題匯總(draft1)
由于IE擴(kuò)展了許多私有的DOM、CSS等導(dǎo)致許多網(wǎng)頁(yè)的開發(fā)者都根據(jù)IE開發(fā)，才導(dǎo)致許多網(wǎng)頁(yè)的不規(guī)范，從而導(dǎo)致現(xiàn)在的瀏覽器瀏覽相同網(wǎng)頁(yè)效果不盡相同。
2009-06-06
淺析javascript中的Event事件
本文主要對(duì)javascript中的（Event）事件進(jìn)行介紹，文章篇尾舉了幾個(gè)案例：方塊隨著鼠標(biāo)移動(dòng)；輸入框文字提示；仿select控件；留言本；自定義右鍵菜單；鍵盤控制div運(yùn)動(dòng)。需要的朋友可以看下
2016-12-12
微信小程序開發(fā)之你可能沒(méi)有踩過(guò)的神坑總結(jié)
最近在做一個(gè)小程序的項(xiàng)目,所以記錄下開發(fā)過(guò)程中遇到的坑,這篇文章主要給大家介紹了關(guān)于微信小程序開發(fā)之你可能沒(méi)有踩過(guò)的神坑,需要的朋友可以參考下
2021-09-09
javascript 命名空間以提高代碼重用性
為你封裝的javascript庫(kù)加上命名空間以提高代碼重用性
2008-11-11
JS選中checkbox后獲取table內(nèi)一行TD所有數(shù)據(jù)的方法
這篇文章主要介紹了JS選中checkbox后獲取table內(nèi)一行TD所有數(shù)據(jù)的方法,涉及javascript針對(duì)table元素遍歷與獲取的技巧,需要的朋友可以參考下
2015-07-07
JavaScript輸入分鐘、秒倒計(jì)時(shí)技巧總結(jié)（附代碼）
這篇文章主要介紹了JavaScript輸入分鐘、秒倒計(jì)時(shí)的代碼實(shí)現(xiàn)，通過(guò)css和js代碼展示了邏輯過(guò)程，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。
2017-08-08
妙用緩存調(diào)用鏈實(shí)現(xiàn)JS方法的重載
方法重載是指在一個(gè)類中定義多個(gè)同名的方法，但要求每個(gè)方法具有不同的參數(shù)的類型或參數(shù)的個(gè)數(shù)。簡(jiǎn)而言之就是：方法重載就是方法名稱重復(fù)，加載參數(shù)不同
2018-04-04
JavaScript console的使用方法實(shí)例分析
這篇文章主要介紹了JavaScript console的使用方法,結(jié)合實(shí)例形式分析了JavaScript console的使用方法與操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04
JavaScript中判斷網(wǎng)絡(luò)狀態(tài)的幾種方法
這篇文章主要介紹了如何使用JavaScript的`navigator.onLine`屬性和`ononline`、`onoffline`事件來(lái)檢測(cè)瀏覽器的在線狀態(tài),并提供了兼容性代碼示例,需要的朋友可以參考下
2025-02-02
懶就要懶到底——鼠標(biāo)自動(dòng)點(diǎn)擊（含時(shí)間判斷）
懶就要懶到底——鼠標(biāo)自動(dòng)點(diǎn)擊（含時(shí)間判斷）...
2007-02-02