bootstrap响应式表格

最新推荐文章于 2023-09-16 23:35:54 发布
最新推荐文章于 2023-09-16 23:35:54 发布
阅读量563 收藏
点赞数
分类专栏： bootstrap 文章标签： bootstrap table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41756573/article/details/100118647
版权

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    <title>Bootstrap响应式表格</title>
    <!-- 下面包含相关属性的介绍 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- bootstrap 样式表 -->
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>

  <body>
    <div class="container">
      <h2>Bootstrap响应式表格</h2>
      <p>特点1：:在小于768px的小型设备下水平滚动。特点2：添加交替单元格的背景色。</p>      
      <div class="table-responsive">          
       <table class="table table-striped table-bordered">
         <thead>
           <tr>
             <th>序号</th>
             <th>姓名</th>
             <th>手机号码</th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <td>001</td>
             <td>张三</td>
             <td>12345678901</td>
           </tr>
           <tr>
             <td>002</td>
             <td>李四</td>
             <td>12345678902</td>
           </tr>
           <tr>
             <td>003</td>
             <td>王五</td>
             <td>12345678903</td>
           </tr>
         </tbody>
       </table>
      </div>

    <!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->
    <!-- 可选: 包含 jQuery 库 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 可选: 合并了 Bootstrap JavaScript 插件 -->
    <script src="https://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>

</html>

二：相关属性的介绍

<meta name="viewport" content="width=device-width, initial-scale=1">

viewport：手机会把一个web页面放到一个虚拟窗口viewport中

width：表示viewport的宽度，一般设置为与屏幕的宽度一致width=device-width

height：表示viewport的高度

initial-scale：页面加载时的缩放比例

maximum-scale：最大比例

minimum-scale：最小比例

user-scalable：是否允许用户进行手动缩放

shrink-to-fit=no：在iOS9中适应屏幕宽度

 

kino的编程笔记
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap响应式表格实例详解
08-30
主要为大家详细介绍了bootstrap响应式表格的实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于html+css+jquery+bootstrap响应式网页制作模板——红色中国文化主题：大美中国
qq_524614081的博客
12-28 366
网页作品编辑作品下载后可使用任意HTML编辑软件（如：`DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页） 网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。
Bootstrap 表格
书香水墨
07-23 883
一、Bootstrap 表格 基于Bootstrap4 == 1.1 表格元素== Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素 元素 描述 <table> 为表格添加基础样式。 <thead> 表格标题行的容器元素（<tr>），用来标识表格列。 <tbody> 表...
基于bootstrap，个人简历网页模板，响应式布局
mazai5080的博客
07-20 1691
源码编码：20236，需要的朋友可以下载学习
根据自己的个性化设计完成响应式简历的设计与实现HTML+CSS+BootStrap
weixin_45800181的博客
05-13 394
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
Bootstrap5 表格
m0_67391121的博客
07-31 296
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。联合使用.table-dark和.table-striped类。...
Bootstrap响应式框架表格表单
zzzwyZYzzy的博客
02-07 659
Bootstrap响应式框架表格表单
Bootstrap3基础 bg-danger/info... 辅助类样式 背景文本颜色
weixin_33991727的博客
03-17 1194
  内容 参数   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> ...
基于Bootstrap3制作响应式布局网站（二）
成长之路
05-22 5872
在上一篇文章中中主要讲到Bootstrap的栅格布局系统，虽然之前说要更新如何写导航栏，但是想了下还是先介绍下如何做CSS的媒体查询和响应式表格，这样才能为以后的的编码打下基础。 原创文章，欢迎转载，请保留出处。 有任何错误、疑问或者建议，欢迎指出。 我的邮箱:[email protected]
vue+bootstrap响应式布局_响应式布局进阶篇 响应式表格
weixin_39801475的博客
12-04 549
作者 | Brilliant Open Web团队编辑 | Brilliant Open Web团队本文继续在响应式布局上深入讨论，主要通过多个实际例子，探讨表格在不同设备下的响应式布局方式，以提供良好的用户体验。当我们有大量结构化数据需要在页面上展现时，通常会使用表格。但如果表格的列超过一定数量，它们很有可能会溢出视口。在视口较窄的设备上，较宽的表格可能会强迫用户通过水平滚动才能浏览全...
Bootstrap响应式表格详解
08-30
主要为大家详细介绍了Bootstrap响应式表格的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap响应式后台管理系统模板.rar
02-22
Bootstrap响应式后台管理系统模板 demo预览地址：http://124.223.118.176/matAdminDemo/ 模板简介：后台管理系统模板是一款漂亮的响应式Bootstrap后台管理系统模板，美观、漂亮的样式，含图表统计、表单、表格、各种...
Bootstrap3 响应式表格
歪脖先生的博客
05-06 2502
响应式表格 将任何.table元素包裹在.table-responsive容器中，即可创建响应式表格，它在屏幕宽度小于768px的设备上会出现水平滚动条。当屏幕宽度大于 768px 时，水平滚动条消失。如： <divclass="table-responsive"> <tableclass="table table-bordered"> &...
使用BootStrap Table编写响应式表格
热门推荐
丶Melody
04-28 1万+
使用BootStrap Table编写响应式表格
html怎么做响应式表格,纯CSS实现响应式表格
weixin_29098367的博客
07-12 1269
自从转岗至腾讯云后，项目中接触到大量的数据表格。多列数据表格在空间有限的手机屏幕下，难以完美呈现，需要做响应式处理。本文介绍一种使用纯CSS实现响应式表格的方法。通常表格中的一行代表一条项目，每列代表项目的一个属性方面(即字段)。在屏幕空间充足的情况下，我们可以将表格的每列都完全显式在屏幕上，但在手机下，每列内容会拥挤不堪，甚至出现横向滚动条，用户快速了解每条项目基本情况的效率会大打折扣。一种优化...
Bootstrap 5-表格
m0_73839298的博客
09-16 246
特征：表格添加滚动条（当它在水平方向上太大时，达到一定数量时才会出现滚动条，35个th或35td就会出现滚动条)• table-secondary （不太重要的动作，灰色)• table-active（将悬停颜色，行/列均可以，灰色)• table-light （浅灰色表格或表格行背景)• table table-bordered（带边框的表格）• table-dark （深灰色表格或表格行背景)• table-hover（表格有悬停效果的行）• table-striped（表格条纹行）
使用CSS来写一个响应式表格
weixin_64965154的博客
05-15 501
可以选择你想选择的目标，比如我们要选择第一个，那么就是nth：child-first，最后一个是last。并集我想大家都知道，那么我们就来讲nth：child选择器，这个是CSS3新推出的一个选择器。也可以根据我们意愿来选择，如果你想选择第5个，那么就写五，既可以写数字也可以写字母。但是字母必须是n，也可以根据不同的用法来写详细请看W3c的文章。座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。然后我们设置顶部的架构，这边我们是使用表单来写。接下俩我们设置表单主体。
常见的响应式表格
石竹的专栏
02-24 1967
常见的响应式表格主要有两种，一种是根据宽度显示横向滚条，另一种是进行行-列翻转，后一种更适合手机屏幕显示，但是对于行数较多的表格，前者更流行，对于列较多行很少的表格，可采用翻转式。
前18大旋转修整器企业占据全球87%的市场份额.docx
最新发布
05-06
前18大旋转修整器企业占据全球87%的市场份额
bootstrap响应式后台管理系统模板-adminox
08-11
adminox是一个基于bootstrap框架开发的响应式后台管理系统模板。它提供了丰富的页面布局和组件，方便用户快速构建适应不同设备的管理系统。 adminox采用了响应式设计，可以智能地根据用户所使用的设备的屏幕大小来...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值