Bootstrap 實現(xiàn)表格樣式、表單布局的實例代碼

更新時間：2018年12月09日 14:25:50 作者：在代碼的世界里游走

這篇文章主要介紹了Bootstrap 實現(xiàn)表格樣式、表單布局的實例代碼,需要的朋友可以參考下

1. 表格的一些樣式

舉例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css"> 
  <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
 <table class="table table-striped">
 <caption>這是一個測試表格</caption>
 <thead>
  <tr>
   <th>姓名</th>
   <th>年齡</th>
   <th>地區(qū)</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>小胡子</td>
   <td>26</td>
   <td>陜西</td>
  </tr>
  <tr>
   <td>大胡子</td>
   <td>26</td>
   <td>北京</td>
  </tr>
  </tbody>
</table>
</body>
</html>

頁面效果：

2. 表格行或單元格的樣式

舉例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css"> 
  <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
 <table class="table table-striped">
 <caption>這是一個測試表格</caption>
 <thead>
  <tr>
   <th>姓名</th>
   <th>年齡</th>
   <th>地區(qū)</th>
  </tr>
 </thead>
 <tbody>
  <tr class="info">
   <td>小胡子</td>
   <td>26</td>
   <td>陜西</td>
  </tr>
  <tr class="warning">
   <td>大胡子</td>
   <td>26</td>
   <td>北京</td>
  </tr>
  </tbody>
</table>
</body>
</html>

頁面效果：

3. 表單布局

(1)垂直表單：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css"> 
  <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
 <div class="form-group">
  <label for="name">姓名</label>
  <input type="text" class="form-control" id="name" placeholder="請輸入姓名">
 </div>
 <div class="form-group">
  <label for="inputfile">選擇文件</label>
  <input type="file" id="inputfile">
 </div>
 <button type="submit" class="btn btn-default">提交</button>
</form>
</body>
</html>

效果：

(2)內(nèi)聯(lián)表單：它的所有元素是內(nèi)聯(lián)的，向左對齊的，標簽是并排的

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css"> 
  <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
<form role="form" class="form-inline">
 <div class="form-group">
  <label for="name">姓名</label>
  <input type="text" class="form-control" id="name" placeholder="請輸入姓名">
 </div>
 <div class="form-group">
  <label for="inputfile">選擇文件</label>
  <input type="file" id="inputfile">
 </div>
 <button type="submit" class="btn btn-default">提交</button>
</form>
</body>
</html>

效果：

(3)水平表單：水平表單與其他表單不僅標記的數(shù)量上不同，而且表單的呈現(xiàn)形式也不同

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css"> 
  <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
<form role="form" class="form-horizontal">
 <div class="form-group">
    <label for="name" class="col-sm-2 control-label">姓名</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="name" placeholder="請輸入姓名">
    </div>
 </div>
 <div class="form-group">
    <label for="inputfile" class="col-sm-2 control-label">選擇文件</label>
    <div class="col-sm-10">
      <input type="file" id="inputfile">
    <div>
 </div>
 <div class="form-group">
   <div class="col-sm-12">
    <button type="submit" class="btn btn-default">提交</button>
   </div>
 </div>
</form>
</body>
</html>

效果：

總結(jié)

以上所述是小編給大家介紹的Bootstrap 實現(xiàn)表格樣式、表單布局的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

javascript實現(xiàn)省市區(qū)三級聯(lián)動下拉框菜單
這篇文章主要為大家詳細介紹了javascript實現(xiàn)省市區(qū)三級聯(lián)動下拉框菜單很詳細的代碼，解決了大家實現(xiàn)javascript省市區(qū)三級聯(lián)動下拉框菜單的問題，感興趣的小伙伴們可以參考一下
2015-11-11
分享JavaScript的?3?種工廠模式的用法
這篇文章主要分享JavaScript的?3?種工廠模式,工廠模式是設(shè)計模式中最常用的設(shè)計模式之一，這種類型的設(shè)計模式屬于創(chuàng)建型模式，它提供了一種創(chuàng)建對象的最佳方式，下文關(guān)于工廠模式的更多相關(guān)資料需要的小伙伴可以參考一下
2022-04-04
weakMap為什么是弱引用原理
這篇文章主要為大家介紹了weakMap為什么是弱引用原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-02-02
這篇文章主要介紹了四種js面向?qū)ο蟮某Ｒ妼懛?，還介紹了有關(guān)this的相關(guān)內(nèi)容，感興趣的小伙伴們可以參考一下
2016-02-02