Bootstrap实现边框表格效果

最新推荐文章于 2023-10-08 21:19:26 发布
最新推荐文章于 2023-10-08 21:19:26 发布
阅读量1.6k 收藏
点赞数
分类专栏： 前端 文章标签： Bootstrap
原文链接：https://www.mk2048.com/blog/blog.php?id=j2chc12jb&title=Bootstrap%E5%AE%9E%E7%8E%B0%E8%BE%B9%E6%A1%86%E8%A1%A8%E6%A0%BC%E6%95%88%E6%9E%9C
版权
Bootstrap实现边框表格效果

通过添加 .table-bordered class，您将看到每个元素周围都有边框，且占整个表格是圆角的，如下面的实例所示：
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.    <title>Bootstrap 实例 - 边框表格</title>  
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">  
  6.    <script src="/scripts/jquery.min.js"></script>  
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script>  
  8. </head>  
  9. <body>  
  10.   
  11. <table class="table table-bordered">  
  12.    <caption>边框表格布局</caption>  
  13.    <thead>  
  14.       <tr>  
  15.          <th>名称</th>  
  16.          <th>城市</th>  
  17.          <th>密码</th>  
  18.       </tr>  
  19.    </thead>  
  20.    <tbody>  
  21.       <tr>  
  22.          <td>Tanmay</td>  
  23.          <td>Bangalore</td>  
  24.          <td>560001</td>  
  25.       </tr>  
  26.       <tr>  
  27.          <td>Sachin</td>  
  28.          <td>Mumbai</td>  
  29.          <td>400003</td>  
  30.       </tr>  
  31.       <tr>  
  32.          <td>Uma</td>  
  33.          <td>Pune</td>  
  34.          <td>411027</td>  
  35.       </tr>  
  36.    </tbody>  
  37. </table>  
  38.   
  39. </body>  
  40. </html>  
结果如下所示：
前端爱好者。
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap table border粗细_Bootstrap的重置样式
weixin_39732991的博客
12-23 1300
Bootstrap的重置表现为，去掉本身样式，然后给元素添加其它样式，额外的样式需要通过明确的.class类来规范。。重置CSS的原因：重置浏览器默认值，使用rem作为尺寸规格单位，代替em用于指定可缩放的组件的间隔与缝隙。最大化避免使用margin-top,防止使用它造成的垂直外排版（边距）混乱所造成之意想不到结果。更重要的是，一个单一方向的margin是一个简单的构思模型。为了易于跨设备缩放，...
2. Bootstrap样式
wxhua420701325的博客
10-24 2751
一、栅格系统1.实现原理2.Bootstrap 网格的基本结构 二、使用步骤1.引入库2.读入数据总结Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备尺寸的增加，系统会自动分为最多12列。通过定义容器大小，平分为12份，再调整内外边距，最后结合媒体查询，制作出强大的响应式栅格系统。 以上代码实现效果： 其中：.container 固定宽度，并将布局居中 .row 使用“行（row）”在水平方向创建一组“列（column）” 栅格系统中
Bootstrap——表格（基本实例、表头选项、条纹状表格、带边框的表格、无边框的表格、鼠标指针悬停、紧凑表格、状态类、响应式表格）
m0_69034993的博客
11-05 9160
状态类设置的是、或元素样式，使用.table-*来设置，可选值包括success、active、primary、secondary、danger、warning、info、light、dark等，同时状态类也适用于反转色调。Bootstrap中提供了一系列表格布局样式，利用该样式可以帮助开发者快速开发出美观的表格，作用于元素的表格样式如下表所示。上表中，.table是表格的一个基类，如果想要加其他的样式，都要在.table的基础上去添加。例：表格背景颜色示例。
Bootstrap 全局CSS样式：表格类的使用
WangMin@汪末末
08-30 1293
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 基本实例 给任意 <table> 标签添加类 .table 可以给表格添加基本的样式 — 少量的内补（padding）和水平方向的分隔线。 实例： <table class="table"> <tr> <th>#</th> <th>表格标题</th> <th>表格标
Bootstrap 5-表格
m0_73839298的博客
09-16 231
特征：表格添加滚动条（当它在水平方向上太大时，达到一定数量时才会出现滚动条，35个th或35td就会出现滚动条)• table-secondary （不太重要的动作，灰色)• table-active（将悬停颜色，行/列均可以，灰色)• table-light （浅灰色表格或表格行背景)• table table-bordered（带边框的表格）• table-dark （深灰色表格或表格行背景)• table-hover（表格有悬停效果的行）• table-striped（表格条纹行）
Bootstrap-1 表格样式
梦琪96的博客
01-18 778
Bootstrap表格样式分类 基础样式.table 带背条纹表格.table-striped 带边框.table-border 悬停.table-hover 紧凑.table-condensed 行样式 .active .success .info 响应式表格 操作步骤 在桌面新建一个文件夹作为站点来存放页面，以“我的站点”为文件名。（文件名自己随意写） 使用DW软件新建站点，站点位置...
bootstrap3.0教程之多种表格效果(条纹状表格、条纹状表格、鼠标悬停等)
12-13
下面我们来看一下，Bootstrap已经为我们准备那些类型的表格呢？如下所示： 1.基本案例 2.条纹状表格 3.带边框的表格 4.鼠标悬停 5.紧缩表格 6.状态class 7.响应式表格 8.总结 基本案例 为任意标签添加.table可以为其...
Bootstrap3.0学习笔记之表格相关
09-22
本文介绍了bootstrap中的表格类型，包括条纹状表格、带边框表格、鼠标悬停、紧缩表格、响应式表格，非常的简单实用，需要的小伙伴可以参考下
Bootstrap4 表格
01-19
Bootstrap4 表格 Bootstrap4 基础表格 Bootstrap4 通过 .table 类来设置基础表格的样式，实例如下: 实例 Firstname Lastname Email John Doe [email protected] Mary Moe [email protected] July Dooley...
Bootstrap table表格简单操作
12-12
Bootstrap table表格简单实例分享给大家，供大家参考，具体内容如下 使用类 Class=”table” 既可让table美化样式  table 相关的Class 隔行换色 ： table-striped 鼠标悬停效果： table-hover 表格的边框：table-...
Bootstrap中六种表格样式
weixin_30420305的博客
12-06 385
表格 表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格，在接下来的内容中，我们会详细介绍Bootstrap的表格使用。 同样的，如果你对CSS预处理器熟悉，你可以使用Bootstrap提供的预处理版本： ☑ LESS版本，...
BootStrap table的各种样式效果
shenxiaomo1688的博客
02-28 1万+
Bootstrap 表格类样式 ☑ .table：基础表格，为任意<table>添加基本样式 (只有横向分隔线) ☑ .table-striped：斑马线表格 ☑ .table-bordered：带边框的表格 ☑ .table-hover：鼠标悬停高亮的表格 ☑ .table-condensed：紧凑型表格 ☑ .table-responsive：响应式表格...
Bootstrap 5-实用工具-边框(border)
最新发布
m0_73839298的博客
10-08 406
• border-bottom-0（底部删除边框）• border-right-0（右侧删除边框）• border-bottom（底部添加边框）• border-left-0（左侧删除边框）• border-right（右侧添加边框）• border-start（左侧添加边框）• border-top-0（顶部删除边框）• border-secondary（灰色）• border-top（顶部添加边框）• border-warning（黄色）• border-0（删除边框）• border（添加边框）
Bootstrap3基础 bg-danger/info... 辅助类样式 背景文本颜色
weixin_33991727的博客
03-17 1192
  内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor   Visual Studio Code 1.32.1     typesetting   Markdown   code <!DOCTYPE html> ...
Bootstrp学习(二)
weixin_44615756的博客
03-29 149
表格 bootstrap关于表格的一些属性: class=“table” 为table表格添加一些基本属性:每一行 tr标签下添加分隔线,添加了少量的padding边距 class=“table-striped” 为table表格添加斑马状条纹 class=“table-bordered” 为table添加border边框,每个单元格都添加边框 class=“table-hover” 为tab...
Bootstrap3 带边框的表格样式
歪脖先生的博客
05-05 3903
带边框的表格 为 <table> 添加 .table-bordered 类，就可以为表格中所有的单元格添加边框，同时也为整个表格添加边框。如： <tableclass="table table-bordered"> <thead> <tr> <th>#</th> &l...
Bootstrap 表格
虚幻社区
03-09 563
Bootstrap 表格 Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素： 标签 描述 table 为表格添加基础样式。 thead 表格标题行的容器元素（tr），用来标识表格列。 tbody 表格主体中的表格行的容器元素（tr）。 tr 一组出现在单行上的表格单元格的容器元素（td 或 th）。 td 默认的表格单元格。 th 特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 thead 内使用。
Bootstrap系列之边框（Borders）
老__L的博客
05-29 4101
边框（Borders）
Bootstrap系列之表格（Tables）
热门推荐
老__L的博客
05-27 1万+
使用Bootstrap选择表样式的文档和示例(考虑到它们在JavaScript插件中普遍使用)。由于表在第三方小部件(如日历和日期选择器)上的广泛使用，我们将表设计为可选择的。只需将基类添加到任何，然后使用自定义样式或我们的各种包含的修饰类进行扩展。使用最基本的表标记，下面是Bootstrap中基于的表的样子。所有的表样式都在Bootstrap 4中继承，这意味着任何嵌套的表都将以与父表相同的方式设置样式。 效果如图：你也可以用将浅色文本在深色背景上的颜色反转。 效果如图：与表和暗表类似，使用修饰符类或使s
bootstrapvue表格组件标题的边框如何去除
02-06
你可以使用表格的 `thead-class` 属性来覆盖 BootstrapVue 默认的 `thead` 样式。 例如: ``` .my-custom-thead-class th { border: 0; } ``` 这样就可以去除表格标题的边框了。 另外，你还可以使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值