Bootstrap 学习之(三) ------ 表格和按钮

最新推荐文章于 2022-07-04 14:30:50 发布

俊刚、

最新推荐文章于 2022-07-04 14:30:50 发布

阅读量565

点赞数

分类专栏： # Bootstrap 文章标签： bootstrap 表格按钮

本文链接：https://blog.csdn.net/csdn9_14/article/details/52981638

版权

Bootstrap 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

表格：

Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：

标签	描述
<table>	为表格添加基础样式。
<thead>	表格标题行的容器元素（<tr>），用来标识表格列。
<tbody>	表格主体中的表格行的容器元素（<tr>）。
<tr>	一组出现在单行上的表格单元格的容器元素（<td>或 <th>）。
<td>	默认的表格单元格。
<th>	特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead>内使用。
<caption>	关于表格存储内容的描述或总结。

表格类：

类	描述
.table	为任意 <table>添加基本样式 (只有横向分隔线)
.table-striped	在 <tbody>内添加斑马线形式的条纹 ( IE8不支持)
.table-bordered	为所有表格的单元格添加边框
.table-hover	在 <tbody>内的任一行启用鼠标悬停状态
.table-condensed	让表格更加紧凑

<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
    <title>BootstrapTest</title>
   <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<h2>表格</h2>
	<p>联合使用所有表格类:</p>                                          
	<table class="table table-striped table-bordered table-hover table-condensed">
		<thead>
			<tr>
				<th>#</th>
				<th>Firstname</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>Anna</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Debbie</td>
			</tr>
			<tr>
				<td>3</td>
				<td>John</td>
			</tr>
		</tbody>
	</table>
</div>

</body>
</html>
</span>

<tr>,<th> 和 <td> 类

下表的类可用于表格的行或者单元格：

类	描述
.active	将悬停的颜色应用在行或者单元格上
.success	表示成功的操作
.info	表示信息变化的操作
.warning	表示一个警告的操作
.danger	表示一个危险的操作

<span style="font-size:18px;"><!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr></span>

响应式表格

通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。

<span style="font-size:18px;"><div class="table-responsive">
  <table class="table">
    <caption>响应式表格布局</caption>
    <thead>
      <tr>
        <th>产品</th>
        <th>付款日期</th>
        <th>状态</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>产品1</td>
        <td>23/11/2013</td>
        <td>待发货</td></tr>
      <tr>
        <td>产品2</td>
        <td>10/11/2013</td>
        <td>发货中</td></tr>
      <tr>
        <td>产品3</td>
        <td>20/10/2013</td>
        <td>待确认</td></tr>
      <tr>
        <td>产品4</td>
        <td>20/10/2013</td>
        <td>已退货</td></tr>
    </tbody>
  </table>
</div></span>

按钮

如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式 , 以下样式可用于<a>, <button>, 或<input> 元素上：

.btn 为按钮添加基本样式

.btn default 默认标准按钮

.btn-primary 原始按钮样式

.btn-success 表示成功的动作

.btn-info 该样式可用于要弹出信息的按钮

.btn-warning 表示需要谨慎操作的按钮

.btn-danger 表示一个危险动作的按钮

.btn-link 让按钮看起来像个链接（但仍然保留按钮行为）

.btn-lg 制造一个大按钮

.btn-sm 制造一个小按钮

.btn-xs 制造一个超小按钮

.btn-block 块级按钮（拉伸至父级元素100%宽度）

.active 按钮被点击

.disabled 禁用按钮

<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
    <title>BootstrapTest</title>
   <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>   
    <!-- 标准的按钮 -->
    <button type="button" class="btn btn-default">默认按钮</button>
    <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
    <button type="button" class="btn btn-primary">原始按钮</button>
    <!-- 表示一个成功的或积极的动作 -->
    <button type="button" class="btn btn-success">成功按钮</button>
    <!-- 信息警告消息的上下文按钮 -->
    <button type="button" class="btn btn-info">信息按钮</button>
    <!-- 表示应谨慎采取的动作 -->
    <button type="button" class="btn btn-warning">警告按钮</button>
    <!-- 表示一个危险的或潜在的负面动作 -->
    <button type="button" class="btn btn-danger">危险按钮</button>
    <!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
    <button type="button" class="btn btn-link">链接按钮</button>
    
    <p>
      <button type="button" class="btn btn-primary btn-lg">大的原始按钮</button>
      <button type="button" class="btn btn-default btn-lg">大的按钮</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary">默认大小的原始按钮</button>
      <button type="button" class="btn btn-default">默认大小的按钮</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary btn-sm">小的原始按钮</button>
      <button type="button" class="btn btn-default btn-sm">小的按钮</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary btn-xs">特别小的原始按钮</button>
      <button type="button" class="btn btn-default btn-xs">特别小的按钮</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary btn-lg btn-block">块级的原始按钮</button>
      <button type="button" class="btn btn-default btn-lg btn-block">块级的按钮</button>
    </p>
    
    <p>
      <button type="button" class="btn btn-default btn-lg ">默认按钮</button>
      <button type="button" class="btn btn-default btn-lg active">激活按钮</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary btn-lg ">原始按钮</button>
      <button type="button" class="btn btn-primary btn-lg active">激活的原始按钮</button>
    </p>
    
    <p>
      <button type="button" class="btn btn-default btn-lg">默认按钮</button>
      <button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按钮</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary btn-lg ">原始按钮</button>
      <button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按钮</button>
    </p>
    <p>
      <a href="#" class="btn btn-default btn-lg" role="button">链接</a>
      <a href="#" class="btn btn-default btn-lg disabled" role="button">禁用链接</a>
    </p>
    <p>
      <a href="#" class="btn btn-primary btn-lg" role="button">原始链接</a>
      <a href="#" class="btn btn-primary btn-lg disabled" role="button">禁用的原始链接</a>
    </p>
</body>
</html></span>

效果图：