Bootstrap -- 表格樣式、表單布局

本文轉載自查看原文 2018-12-08 10:06 2041 Bootstrap

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>地區</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>

View Code

頁面效果：

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>地區</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>

View Code

頁面效果：

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>

View Code

效果：

(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>
<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>

View Code

效果：

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

<!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>

View Code

效果：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 表格布局----基於bootstrap樣式布局 bootstrap表格樣式大全關於bootstrap--表格（table的各種樣式） Bootstrap內柵格布局，表格，按鈕，圖片的個人總結 bootstrap布局兩列或者多列表單 bootstrap布局兩列或者多列表單 Django 使用forms表單的bootstrap樣式 HTML表格和表單以及一些布局所需的用法關於bootstrap--表單控件（disabled表單禁用、顯示表單驗證的樣式） BootStrap基本樣式