杰晶网络

Bootstrap每天必学之表格
网络编程 2024/11/9 佚名
3 2

本文主要讲解的是表格，这个其实对于做过网站的人来说，并不陌生，而且可以说是最为常用的各种列表的展示，有时候也会因为用户或者老板的需求而感到头疼。下面我们来看一下，Bootstrap已经为我们准备那些类型的表格呢？如下所示：

1.基本案例
2.条纹状表格
3.带边框的表格
4.鼠标悬停
5.紧缩表格
6.状态class
7.响应式表格
8.总结

基本案例
 为任意<table>标签添加.table可以为其赋予基本的样式—少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将其样式独立出来。

Bootstrap每天必学之表格

一个简单的Table示例

 <div class="container">
 <table class="table"> 
 <caption>Table基本案例</caption> 
 <thead> 
 <tr> 
  <th>First Name</th> 
  <th>Last Name</th>
  <th>User Name</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
  <td>aehyok</td> 
  <td>leo</td> 
  <td>@aehyok</td> 
 </tr>
 <tr> 
  <td>lynn</td> 
  <td>thl</td> 
  <td>@lynn</td> 
 </tr>
 </tbody> 
 </table> 
 </div>

Bootstrap每天必学之表格

条纹状表格

利用.table-striped可以给<tbody>之内的每一样增加斑马条纹样式。
在上面示例的table元素上再添加一个 样式类
 <table class="table table-striped">
看现在的效果，还是有点变化的。

Bootstrap每天必学之表格

带边框的表格
利用.table-bordered为表格和其中的每个单元格增加边框。
还是将第一个示例中的table元素上再添加一个样式类
<table class="table  table-bordered">

Bootstrap每天必学之表格

鼠标悬停
利用.table-hover可以让<tbody>中的每一行响应鼠标悬停状态。
<table class="table table-hover">
将鼠标移到那一行那一行就会有效果的

Bootstrap每天必学之表格

紧缩表格
利用.table-condensed可以让表格更加紧凑，单元格中的内部（padding）均会减半。
<table class="table table-condensed">
这个效果没那么明显，主要就是单元格中内容padding减半了。

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

Bootstrap每天必学之表格

<table class="table table-condensed"> 
 <caption>Table</caption> 
 <thead> 
 <tr> 
  <th>#</th>
  <th>First Name</th> 
  <th>Last Name</th>
  <th>User Name</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr class="active"> 
  <td>1</td>
  <td>aehyok</td> 
  <td>leo</td> 
  <td>@aehyok</td> 
 </tr>
 <tr class="success"> 
  <td>2</td>
  <td>lynn</td> 
  <td>thl</td> 
  <td>@lynn</td> 
 </tr>
 <tr class="warning"> 
  <td>3</td> 
  <td>Amdy</td> 
  <td>Amy</td> 
  <td>@Amdy</td> 
 </tr>
 <tr class="danger"> 
  <td>4</td> 
  <td>Amdy</td> 
  <td>Amy</td> 
  <td>@Amdy</td> 
 </tr>
 <tr > 
  <td class="success">5</td> 
  <td class="danger">Amdy</td> 
  <td class="warning">Amy</td> 
  <td class="active">@Amdy</td> 
 </tr>
 </tbody> 
 </table>

Bootstrap每天必学之表格 

响应式表格
将任何.table包裹在.table-responsive中即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失。   

<div class="table-responsive">
 <table class="table"> 
 <caption>Table</caption> 
 <thead> 
 <tr> 
  <th>#</th>
  <th>First Name</th> 
  <th>Last Name</th>
  <th>User Name</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr class="active"> 
  <td>1</td>
  <td>aehyok</td> 
  <td>leo</td> 
  <td>@aehyok</td> 
 </tr>
 <tr class="success"> 
  <td>2</td>
  <td>lynn</td> 
  <td>thl</td> 
  <td>@lynn</td> 
 </tr>
 <tr class="warning"> 
  <td>3</td> 
  <td>Amdy</td> 
  <td>Amy</td> 
  <td>@Amdy</td> 
 </tr>
 <tr class="danger"> 
  <td>4</td> 
  <td>Amdy</td> 
  <td>Amy</td> 
  <td>@Amdy</td> 
 </tr>
 <tr > 
  <td class="success">5</td> 
  <td class="danger">Amdy</td> 
  <td class="warning">Amy</td> 
  <td class="active">@Amdy</td> 
 </tr>
 </tbody> 
 </table>
 </div>

看滚动条出现了额。

Bootstrap每天必学之表格

简简单单的几个样式类，可以将页面搞到这种程度，很不错，以后再也不用愁调样式了。

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

以上就是关于Bootstrap的表格最为常用的各种列表的展示，希望对大家的学习有所帮助。

标签：
bootstrap,表格
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“Bootstrap每天必学之表格”
暂无“Bootstrap每天必学之表格”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/9

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网