Bootstrap 表格样式

学习Bootstrap表格的各种样式变体和响应式处理 · 难度：入门 · +15XP

Bootstrap 表格

添加 .table 类即可获得美观的表格样式。

变体类名

<table class="table">         <!-- 基础 -->
<table class="table table-striped">  <!-- 斑马纹 -->
<table class="table table-bordered"> <!-- 边框 -->
<table class="table table-hover">   <!-- 悬停高亮 -->
<table class="table table-dark">    <!-- 深色主题 -->
<table class="table table-sm">      <!-- 紧凑 -->

颜色上下文

<tr class="table-primary">  <!-- 蓝 -->
<tr class="table-success">  <!-- 绿 -->
<tr class="table-danger">   <!-- 红 -->
<tr class="table-warning">  <!-- 黄 -->
<tr class="table-active">   <!-- 灰 -->

响应式表格

<div class="table-responsive">
  <table class="table">...</table>
</div>
<!-- 可选 -sm/-md/-lg/-xl 断点 -->

💡 练习

创建商品列表表格：四列（编号/名称/价格/库存），斑马纹+悬停效果+响应式。