Bootstrap基本樣式學(xué)習(xí)筆記之表單(3)

更新時(shí)間：2016年12月07日 11:45:44 作者：kikay

這篇文章主要介紹了Bootstrap學(xué)習(xí)筆記之表單基本樣式的相關(guān)資料,為大家分享了三種表單樣式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Bootstrap 通過一些簡單的 HTML 標(biāo)簽和擴(kuò)展的類即可創(chuàng)建出不同樣式的表單。

0x01 樣式1

一個(gè)登錄界面：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>用戶登錄</title>
</head>
<body>
<div class="container">
 <form>
  <div class="form-group">
   <label for="UserName">用戶名</label>
   <input type="text" class="form-control" id="UserName" placeholder="用戶名">
  </div>
  <div class="form-group">
   <label for="PassWord">密&nbsp;&nbsp;&nbsp;&nbsp;碼</label>
   <input type="password" class="form-control" id="PassWord" placeholder="密碼">
  </div>
  <div class="form-group">
   <label>
    <input type="checkbox">記住我嗎？
   </label>
  </div>
  <div class="form-group">
   <input type="button" class="btn btn-default" id="Submit" value="登&nbsp;&nbsp;&nbsp;&nbsp;錄">
  </div>
 </form>
</div>
</body>
</html>

效果如下：

0x02 樣式2

如果要將label與文本框在同一行顯示，修改如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>用戶登錄</title>
</head>
<body>
<div class="container">
 <div class="col-lg-3 col-md-3 col-xs-3"></div>
 <div class="col-lg-6 col-md-6 col-xs-6">
  <div class="page-header">
   <h1>用戶登錄</h1>
  </div>
  <form class="form-horizontal">
   <div class="form-group">
    <div class="col-lg-2 col-sm-2 col-xs-2">
     <label for="UserName" class="control-label">用戶名:</label>
    </div>
    <div class="col-lg-10 col-sm-10 col-xs-10">
     <input type="text" class="form-control" id="UserName" placeholder="用戶名">
    </div>
   </div>
   <div class="form-group">
    <div class="col-lg-2 col-sm-2 col-xs-2">
     <label for="PassWord" class="control-label">密&nbsp;&nbsp;&nbsp;&nbsp;碼:</label>
    </div>
    <div class="col-lg-10 col-sm-10 col-xs-10">
     <input type="password" class="form-control" id="PassWord" placeholder="密碼">
    </div>
   </div>
   <div class="form-group">
    <div class="col-lg-2 col-sm-2 col-xs-2"></div>
    <div class="col-lg-10 col-sm-10 col-xs-10">
     <div class="checkbox">
      <label>
       <input type="checkbox">記住我嗎？
      </label>
     </div>
    </div>
   </div>
   <div class="form-group">
    <div class="col-lg-2 col-sm-2 col-xs-2"></div>
    <div class="col-lg-10 col-sm-10 col-xs-10">
     <input type="button" class="btn btn-default" id="Submit" value="登&nbsp;&nbsp;&nbsp;&nbsp;錄">
    </div>
   </div>
  </form>
 </div>
 <div class="col-lg-3 col-md-3 col-xs-3"></div>
</div>
</body>
</html>

效果如下：

0x03 樣式3

如果將文本框放在同一行，修改如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>用戶登錄</title>
</head>
<body>
<div class="container">
 <form class="form-inline">
  <div class="form-group">
   <label class="control-label" for="UserName">用戶名:</label>
   <input type="text" class="form-control" id="UserName" placeholder="用戶名">
  </div>
  <div class="form-group">
   <label class="control-label" for="PassWord">密&nbsp;&nbsp;&nbsp;&nbsp;碼:</label>
   <input type="password" class="form-control" id="PassWord" placeholder="密碼">
  </div>
  <div class="form-group">
   <div class="checkbox">
    <label>
     <input type="checkbox">記住我嗎?
    </label>
   </div>
  </div>
  <div class="form-group">
   <input type="button" class="btn btn-default" id="Submit" value="登&nbsp;&nbsp;&nbsp;&nbsp;錄">
  </div>
 </form>
</div>
</body>
</html>

效果如下：