Bootstarp入门教程（6）表格

来源：互联网发布：tp5框架隐藏index.php 编辑：程序博客网时间：2024/05/21 21:44

基本案例：为任意<table>标签添加.table可以为其赋予基本的样式—少量的内补（padding）和水平方向的分隔线。

<!DOCTYPE html><html><head><title>Demo</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--><link rel="stylesheet" href="css/bootstrap.min.css"><!-- 可选的Bootstrap主题文件（一般不用引入） --><!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">--><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="js/bootstrap.min.js"></script></head><body><!--容器  --><div class="container"><div class="row"><table class="table"><thead><tr><th>第一列</th><th>第二列</th><th>第三列</th><th>第四列</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr></tbody></table></div></div></body></html>

条纹状表格：利用.table-striped可以给<tbody>之内的每一样增加斑马条纹样式。

<body><!--容器  --><div class="container"><div class="row"><table class="table table-striped"><thead><tr><th>第一列</th><th>第二列</th><th>第三列</th><th>第四列</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr></tbody></table></div></div></body>

带边框的表格：利用.table-bordered为表格和其中的每个单元格增加边框。

<body><!--容器  --><div class="container"><div class="row"><table class="table table-striped table-bordered"><thead><tr><th>第一列</th><th>第二列</th><th>第三列</th><th>第四列</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr></tbody></table></div></div></body>

鼠标悬停：利用.table-hover可以让<tbody>中的每一行响应鼠标悬停状态。

<body><!--容器  --><div class="container"><div class="row"><table class="table table-striped table-bordered table-hover"><thead><tr><th>第一列</th><th>第二列</th><th>第三列</th><th>第四列</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr></tbody></table></div></div></body>

紧缩表格：利用.table-condensed可以让表格更加紧凑，单元格中的内部（padding）均会减半。

<body><!--容器  --><div class="container"><div class="row"><table class="table table-striped table-bordered table-hover table-condensed"><thead><tr><th>第一列</th><th>第二列</th><th>第三列</th><th>第四列</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr></tbody></table></div></div></body>

状态class：通过这些状态class可以为行货单元格设置颜色。

<body><!--容器  --><div class="container"><div class="row"><table class="table table-striped table-bordered table-hover table-condensed"><thead><tr><th>第一列</th><th>第二列</th><th>第三列</th><th>第四列</th></tr></thead><tbody><tr><td class="active">1</td><td class="success">2</td><td class="warning">3</td><td class="danger">4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr></tbody></table></div></div></body

0 0

Bootstarp入门教程（6） 表格

Bootstarp入门教程（6）表格