Bootstrap簡(jiǎn)單表單顯示學(xué)習(xí)筆記

更新時(shí)間：2016年11月15日 08:35:39 作者：帆帆帆

這篇文章主要為大家分享了Bootstrap簡(jiǎn)單表單顯示學(xué)習(xí)筆記,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

表單布局

垂直或基本表單

基本的表單結(jié)構(gòu)時(shí)BootStrap自帶的，創(chuàng)建基本表單的步驟如下：

1、向父<form>元素添加role = “form”；
2、為了獲取最佳的間距，把標(biāo)簽和控件放在一個(gè)div.form-group中,div放在父form下；
3、向所有的文本元素<input>、<textarea>和<select>添加.form-control

<!DOCTYPE html>
<html>
 <head>
 <title>Bootstrap 模板</title>
 <meta charset="utf-8">
 <!-- 引入 Bootstrap -->
 <link  rel="stylesheet">
 </head>
 <body>

 <form role="form">
 <div class="form-group">
 <label for="name">名稱</label>
 <input type="text" class="form-control" id="name" name="name-text" placeholder="請(qǐng)輸入你的名稱">
 </div>
 </form>

 <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <!-- 包括所有已編譯的插件 -->
 <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </body>
</html>

添加了form-controlClass的input會(huì)和label分為兩行，并且獲得焦點(diǎn)時(shí)會(huì)有藍(lán)色的邊框樣式。

內(nèi)聯(lián)表單

內(nèi)聯(lián)表單中所有的元素都是內(nèi)聯(lián)的，標(biāo)簽都是并排的

1、向<form>標(biāo)簽中添加classfrom-inline;
2、每個(gè)表單需要被包含在div.form-group，checkbox可以包含在div.checkbox,radio可以包含在div.radio;
3、默認(rèn)情況下，bootstrap中的input、select和textarea有100%寬度，使用內(nèi)聯(lián)表單時(shí)，可以設(shè)置表單控件的寬度來(lái)設(shè)置;
4、對(duì)標(biāo)簽描述添加sr-only可以隱藏標(biāo)簽描述。

<!DOCTYPE html>
<html>
 <head>
 <title>Bootstrap 模板</title>
 <meta charset="utf-8">
 <!-- 引入 Bootstrap -->
 <link  rel="stylesheet">
 </head>
 <body>

 <form class="form-inline" role="form">
 <div class="form-group">
 <label class = "sr-only" for="name">名稱</label>
 <input type="text" class="form-control" id="name" name="name-text" placeholder="請(qǐng)輸入你的名稱" style="width: 170px">
 </div>
 <div class="form-group">
 <input type="file" name="inputfile" style="width: 170px">
 </div>
 <label>
 <input type="checkbox" class="checkbox">請(qǐng)打勾 
 </label> 
 </form>

 <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <!-- 包括所有已編譯的插件 -->
 <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </body>
</html>

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專(zhuān)題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: