Bootstrap學習筆記系列3-------Bootstrap簡單表單顯示

時間  2019-11-16
標籤 bootstrap 學習 筆記 系列 簡單 表單 顯示 欄目 Bootstarp 简体版
原文   原文鏈接

表單佈局

垂直或基本表單

基本的表單結構時BootStrap自帶的，建立基本表單的步驟以下：css

  • 向父<form>元素添加role = 「form」；
  • 爲了獲取最佳的間距，把標籤和控件放在一個div.form-group中,div放在父form下；
  • 向全部的文本元素<input>、<textarea>和<select>添加.form-control
<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta charset="utf-8">
      <!-- 引入 Bootstrap -->
      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" 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分爲兩行，而且得到焦點時會有藍色的邊框樣式。html

內聯表單

內聯表單中全部的元素都是內聯的，標籤都是並排的jquery

  • 向<form>標籤中添加classfrom-inline;
  • 每一個表單須要被包含在div.form-group，checkbox能夠包含在div.checkbox,radio能夠包含在div.radio;
  • 默認狀況下，bootstrap中的input、select和textarea有100%寬度，使用內聯表單時，能夠設置表單控件的寬度來設置;
  • 對標籤描述添加sr-only能夠隱藏標籤描述。
<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta charset="utf-8">
      <!-- 引入 Bootstrap -->
      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" 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>

水平表單

  • 向父<form>添加類form-horizontal;
  • 把標籤和空間放在一個 div,form-group 的<div>中;
  • 向標籤添加class control-label.
<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta charset="utf-8">
      <!-- 引入 Bootstrap -->
      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>

      <!--父元素添加form-horizontal類-->
      <form class="form-horizontal" role="form">

         <!--標籤和控件放在一個帶有 class .form-group 的 <div> 中-->
         <div class="form-group">

            <!--向標籤添加 class .control-label。-->
            <label for="username" class="col-sm-2 control-label">名字：</label>

            <!--控制表單的寬度-->
            <div class="col-sm-3">
               <input type="text" class="form-control" id="username"  placeholder="請輸入用戶名">
            </div>
         </div>

         <div class="form-group">
            <label for="password" class="col-sm-2 control-label">密碼：</label>
            <div class="col-sm-3">
            <input type="password" class="form-control" id="password" placeholder="請輸入密碼">
            </div>
         </div>

         <div class="form-group">
         <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
               <label>
                  <input type="checkbox">請記住我
               </label>
            </div>
            </div>
         </div>

         <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
               <button type="submit" class="btn btn-default">登陸</button>
            </div>
         </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>

支持表單的控件

bootstrap支持常見的表單控件，主要是input，textarea,checkbox,radio和select。ios

輸入框（input）

Bootstrap提供了對全部原生的HTML5的input類型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、url、search、tel、color。bootstrap

文本框(Textarea)

須要進行多行的輸入時，則可使用文本框textarea。必要時改變rows屬性（較少的行 = 較少的盒子，較多的行 = 較多的盒子）。佈局

複選框（Checkbox）和單選框（Radio）

  • 建立表單時，若是想讓用戶從列表中選擇若干選項時，請使用checkbox。若是想限制用戶只能選擇一個選項，就使用radion
  • 對於一些列的複選框和單選框使用Checkbox-inline或radio-inlie，控制它們顯示在同一行上。
<label class="checkbox-inline">
         <input type="radio" name="optionsRadiosinline" id="optionsRaios1" value="option1" >選項1
         </label>
         <label class="checkbox-inline">

<!--設置checked屬性來表示默認被選中-->
         <input type="radio" name="optionsRadiosinline" id="optionsRaios2" value="option2" checked="">選項2
      </label>

選擇框（select）

想讓用戶從多個選項中進行選擇，可是默認的狀況下只能選擇一個選項時，則使用選擇框url

  • 使用<select>展現列表選項
  • 使用multiple=「multiple」容許用戶選擇多個選項

靜態控件

當在一個水平表單標籤後放置純文本時，在<p>上使用form-control-staticspa

表單控件狀態

  • :focus 狀態（即，用戶點擊 input 或使用 tab 鍵聚焦到 input 上）時，輸入框的輪廓會被移除，同時應用box-shadow。
  • 禁用輸入框input，要想禁用一個輸入框input，只須要簡單的添加disable屬性，就會禁用輸入框，還會改變輸入框的樣式和鼠標懸停的樣式。
  • 禁用字段集fieldset，對<fieldset>添加disable屬性來禁用<fieldset>內的全部控件。
  • 驗證狀態，對父元素
    簡單的添加 has-waring， has-error， has-success便可使用驗證狀態。 
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">禁用</label>
    <div class="col-sm-10">

      <!--經過對<input>標籤簡單的添加disbale屬性，就能禁止該控件-->
      <input class="form-control" id="disabledInput" type="text" placeholder="該輸入框禁止輸入..." disabled>
    </div>
  </div>

  <!--對<fieldset>添加disabled屬性禁用<fieldset>內的全部組件-->
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput" class="col-sm-2 control-label">禁用輸入（Fieldset disabled）</label>
      <div class="col-sm-10">
        <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入">
      </div>
    </div>
    <div class="form-group">
      <label for="disabledSelect" class="col-sm-2 control-label">禁用選擇菜單（Fieldset disabled）</label>
      <div class="col-sm-10">
        <select id="disabledSelect" class="form-control">
          <option>禁止選擇</option>
        </select>
      </div>
    </div>
  </fieldset>

  <!--對父元素添加has-success類用於成功消息的驗證樣式-->
  <div class="form-group has-success">
    <label class="col-sm-2 control-label" for="inputSuccess">輸入成功</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputSuccess">
    </div>
  </div>

  <!--對父元素添加has-warning類用於警告消息的驗證樣式-->
  <div class="form-group has-warning">
    <label class="col-sm-2 control-label" for="inputWarning">輸入警告</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputWarning">
    </div>
  </div>

  <!--對父元素添加has-error類用錯誤消息的驗證樣式-->
  <div class="form-group has-error">
    <label class="col-sm-2 control-label" for="inputError">輸入錯誤</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputError">
    </div>
  </div>
</form>

表單控件的大小

使用input-lg（lg能夠替換成md、sm下同）和col-lg-*來設置表單的高度和寬度。插件

表單幫助文本

表單控件能夠在輸入框上有一個塊級的幫助文本，爲了添加一個佔用整個寬度的內容快， 在input後使用help-block。code

<form role="form">
         <span>幫助文本實例</span>
         <input class="form-control" type="text">
         <p class="help-block">一個較長的文本，超過一行，須要擴展到下一行</p>
      </form>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程