欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2016年11月15日 08:35:39   作者：帆帆帆  
這篇文章主要為大家分享了Bootstrap簡單表單顯示學(xué)習(xí)筆記,具有一定的參考價值，感興趣的小伙伴們可以參考一下

表單布局

垂直或基本表單

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

1、向父<form>元素添加role = “form”；
2、為了獲取最佳的間距，把標簽和控件放在一個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="請輸入你的名稱">
 </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會和label分為兩行，并且獲得焦點時會有藍色的邊框樣式。

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

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

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

<!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="請輸入你的名稱" style="width: 170px">
 </div>
 <div class="form-group">
 <input type="file" name="inputfile" style="width: 170px">
 </div>
 <label>
 <input type="checkbox" class="checkbox">請打勾 
 </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í)，可以點擊這里進行學(xué)習(xí)，再為大家附3個精彩的專題：

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

Bootstrap實戰(zhàn)教程

Bootstrap插件使用教程

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

相關(guān)文章

  • JavaScript如何實現(xiàn)元素全排列實例代碼

    JavaScript如何實現(xiàn)元素全排列實例代碼

    這篇文章主要給大家介紹了關(guān)于JavaScript如何實現(xiàn)元素全排列的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • js+Html實現(xiàn)表格可編輯操作

    js+Html實現(xiàn)表格可編輯操作

    這篇文章主要為大家詳細介紹了js+Html實現(xiàn)表格可編輯操作，能動態(tài)添加刪除行，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-04-04

    • 最新評論