bootstrap代码与表格

最新推荐文章于 2023-05-25 22:26:21 发布

#添砖JAVA#

最新推荐文章于 2023-05-25 22:26:21 发布

阅读量289

点赞数

分类专栏： java辅助文章标签：前端 bootstrap

本文链接：https://blog.youkuaiyun.com/weixin_48464106/article/details/126688488

版权

java辅助专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何使用Bootstrap框架来创建基本的表格，并探讨了如何通过应用不同的表格类来定制表格样式，包括上下文特定的表格展示。内容涵盖基本表格结构和使用Bootstrap的预定义类进行美化的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码

                 <!-- code用于单行代码 -->
		<p>cccc<code>cgy</code></p>
		<!-- pr用于多行，&lt表< &gt表> -->
		<pr>
			&lt;h1&gt cgy &lt;h1 &gt;
		</pr>
		<!-- kbd用于快捷方式的应用 -->
		<P>cgyadfd<kbd>Ctrl</kbd>+<kbd>S</kbd></P>

基本表格：

<table class="table">
  <caption>基本的表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
    </tr>
  </tbody>
</table>

表格类：

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


实例；
<table class="table table-striped">
  <caption>条纹表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody>
</table>

上下文表格：

.active：对某一特定的行或单元格应用悬停颜色
.success：表示一个成功的或积极的动作
.warning：表示一个需要注意的警告
.danger:表示一个危险的或潜在的负面动作

这些类可被应用到 <tr>、<td> 或 <th>。


实例：
<table class="table">
  <caption>上下文表格布局</caption>
  <thead>
    <tr>
      <th>产品</th>
      <th>付款日期</th>
      <th>状态</th></tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>产品1</td>
      <td>23/11/2013</td>
      <td>待发货</td></tr>
    <tr class="success">
      <td>产品2</td>
      <td>10/11/2013</td>
      <td>发货中</td></tr>
    <tr class="warning">
      <td>产品3</td>
      <td>20/10/2013</td>
      <td>待确认</td></tr>
    <tr class="danger">
      <td>产品4</td>
      <td>20/10/2013</td>
      <td>已退货</td></tr>
  </tbody>
</table>