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

TypeScript利用TS封裝Axios實(shí)戰(zhàn)
這篇文章主要介紹了TypeScript利用TS封裝Axios實(shí)戰(zhàn)，TypeScript封裝一遍Axios，能進(jìn)一步鞏固TypeScript的基礎(chǔ)知識(shí)，需要的小伙伴可以參考一下
2022-06-06
微信小程序時(shí)間軸組件的示例代碼
這篇文章主要介紹了微信小程序時(shí)間軸組件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-05-05
JavaScript代碼因逗號(hào)不規(guī)范導(dǎo)致IE不兼容的問(wèn)題
這篇文章主要介紹了JavaScript代碼因逗號(hào)不規(guī)范導(dǎo)致IE不兼容的問(wèn)題的相關(guān)資料,需要的朋友可以參考下
2016-02-02
Typescript 中的 interface 和 type 到底有什么區(qū)別詳解
這篇文章主要介紹了Typescript 中的 interface 和 type 到底有什么區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
逐行分析鴻蒙系統(tǒng)的 JavaScript 框架(推薦)
鴻蒙系統(tǒng)使用 JavaScript 開(kāi)發(fā) GUI 是一種類似于微信小程序、輕應(yīng)用的模式。這篇文章給大家?guī)?lái)了逐行分析鴻蒙系統(tǒng)的 JavaScript 框架的相關(guān)知識(shí)，感興趣的朋友跟隨小編一起看看吧
2020-09-09
微信小程序http連接訪問(wèn)解決方案的示例
這篇文章主要介紹了微信小程序http連接訪問(wèn)解決方案的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-11-11
JavaScript在for循環(huán)中綁定事件解決事件參數(shù)不同的情況
響應(yīng)一堆相似的事件，但是每個(gè)事件的參數(shù)都不同，在這種情況下就可以使用JavaScript 在for循環(huán)中綁定事件，下面有個(gè)不錯(cuò)的示例，大家可以參考下
2014-01-01
原生JS檢測(cè)CSS3動(dòng)畫(huà)是否結(jié)束的方法詳解
這篇文章主要介紹了原生JS檢測(cè)CSS3動(dòng)畫(huà)是否結(jié)束的方法,結(jié)合實(shí)例形式分析了javascript事件響應(yīng)及針對(duì)css3屬性檢測(cè)相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01
微信小程序開(kāi)發(fā)指南之字體樣式設(shè)置
在小程序開(kāi)發(fā)中經(jīng)常需要我們自定義字體樣式,下面這篇文章主要給大家介紹了關(guān)于微信小程序開(kāi)發(fā)指南之字體樣式設(shè)置的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-03-03
javascript中對(duì)對(duì)層的控制
javascript中對(duì)對(duì)層的控制...
2006-12-12