关于Bootstrap 表格样式及表单布局的设置

简介: 讲解bootstrap、表格样式、表单布局、Bootstrap 实现表格样式、表单布局等。

表格的一些样式

image.png

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

界面效果

image.png

表格行或单元格的样式

image.png

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

界面效果

image.png

表单布局

垂直表单

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

image.png

内联表单:它的所有元素是内联的,向左对齐的,标签是并排的

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

image.png

水平表单:水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同

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

image.png

相关文章
Bootstrap5 表格5
使用 `.table-dark` 类可以为表格添加黑色背景,使表格在页面中更加突出。
Bootstrap5 表格7
通过结合使用 `.table-dark` 和 `.table-hover` 类,可以创建一个具有鼠标悬停效果的黑色背景表格。示例表格包含姓名和电子邮件信息,当鼠标悬停在行上时,行会高亮显示。
Bootstrap5 表格6
通过结合使用 `.table-dark` 和 `.table-striped` 类,可以创建一个具有黑色背景和条纹效果的表格。示例表格包含三列:名字、姓氏和电子邮件,并展示了三位用户的信息。
Bootstrap5 表格3
使用 `.table-bordered` 类可为表格添加边框,使表格结构更清晰。示例中,表格包含三列:名字、姓氏和邮箱,展示了三位用户的信息。
|
3天前
|
NoSQL
Bootstrap5 表格12
使用 .table-responsive 类可以创建响应式表格。当屏幕宽度小于 992px 时,表格会出现水平滚动条;当屏幕宽度大于 992px 时,表格正常显示,没有滚动条。示例代码展示了如何实现这一效果。
Bootstrap5 表格11
使用 `.table-sm` 类可以创建一个内边距较小的紧凑型表格。
Bootstrap5 表格10
可以通过添加 `.table-dark` 或 `.table-light` 类来设置表格表头的背景颜色。`.table-dark` 使表头背景变为黑色,而 `.table-light` 则使其变为灰色。示例代码展示了这两种效果的应用。
Bootstrap5 表格9
通过指定意义的颜色类(如 `table-primary`、`table-success` 等),可以为表格的行或单元格设置不同的背景颜色,以突出显示特定信息。示例中展示了多种颜色类的应用效果。
Bootstrap5 表格8
使用 `.table-borderless` 类可以创建一个无边框的表格。
Bootstrap5 表格4
使用 `.table-hover` 类可以为表格的每一行添加鼠标悬停效果,当鼠标移至行上时,背景会变为灰色。