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í)間軸組件,本文通過(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 開發(fā) GUI 是一種類似于微信小程序、輕應(yīng)用的模式。這篇文章給大家?guī)?lái)了逐行分析鴻蒙系統(tǒng)的 JavaScript 框架的相關(guān)知識(shí)，感興趣的朋友跟隨小編一起看看吧2020-09-09
這篇文章主要介紹了微信小程序http連接訪問(wèn)解決方案的示例，小編覺得挺不錯(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)畫是否結(jié)束的方法詳解
這篇文章主要介紹了原生JS檢測(cè)CSS3動(dòng)畫是否結(jié)束的方法,結(jié)合實(shí)例形式分析了javascript事件響應(yīng)及針對(duì)css3屬性檢測(cè)相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
在小程序開發(fā)中 經(jīng)常需要我們自定義字體樣式,下面這篇文章主要給大家介紹了關(guān)于微信小程序開發(fā)指南之字體樣式設(shè)置的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
javascript中對(duì)對(duì)層的控制...2006-12-12