Bootstrap 4 表格 |
您所在的位置：网站首页 › bootstrap动态表格模板 › Bootstrap 4 表格 |
|
表格
使用Bootstrap使用表格的文档和示例（表格样式及响应式优先于BootStrap全局的其它JavaScript事件）。 示例在第三方部件例如日历和日期选择器中广泛使用表格，我们设计了视情况需要加入的表格类。只需要向某个添加一个基类.table，然后通过自定义样式或系统提供的class来起作用。 使用最基本的表格标记，下面是Bootstrap中 .table表格的样式（基本样式）， Bootstrap 4继承了所有的表格样式，这意味着任何嵌套表格都将以与父类型相同的方式进行样式化。 # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter你可使用.table-darkclass选择器来产生颜色反转对比效果，即深色背景和浅色文本。 # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter Head表头处理与预设的反转样式相似，使用.thead-light 或.thead-dark 中的一个样式，就能使 区显示出浅黑或深灰。 # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter 条纹状表格使用 .table-striped 样式定义 ，可以产生逐行颜色强烈对比的表格样式（以及增加反转）。 # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter 表格边框处理添加 .table-bordered 类可以产生表格边框与间隙系统。 # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter 无边框添加.table-borderless无边界表格 # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter.table-borderless 也可以用在黑色表格上. # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter 行悬停效果将 .table-hover 定义到 上，可以产生行悬停效果（鼠标移到行上会出现状态提示）。 # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter 紧缩表格添加 .table-sm 可以将表格的padding值缩减一半，使表格更加紧凑。 # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter 语义状态化使用语义状态样式对表格逐行或单个单元格进行着色表达。 Type Column heading Column heading Column heading Active Column content Column content Column content Default Column content Column content Column content Primary Column content Column content Column content Secondary Column content Column content Column content Success Column content Column content Column content Danger Column content Column content Column content Warning Column content Column content Column content Info Column content Column content Column content Light Column content Column content Column content Dark Column content Column content Column content ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...深色表格上没有固定的背景，你可以使用 文字或背景通用样式 获得类似的样式： # Column heading Column heading Column heading 1 Column content Column content Column content 2 Column content Column content Column content 3 Column content Column content Column content 4 Column content Column content Column content 5 Column content Column content Column content 6 Column content Column content Column content 7 Column content Column content Column content 8 Column content Column content Column content 9 Column content Column content Column content ... ... ... ... ... ... ... ... ... ... 向使用辅助技术的用户传达用意使用颜色添加意义只提供一个视觉指示，这不会传达给辅助技术的用户，如屏幕阅读器。确保由颜色表示的信息从内容本身（例如可见文本）中显而易见，或者通过替代方法包括，例如隐藏在.sr-only该类中的附加文本。 通过包装任何响应创建表.table用.table-responsive{-sm|-md|-lg|-xl}，使表滚动水平在每一个max-width的断点分别高达576px，768px，992px和1120px，（但不包括）。 请注意，由于浏览器目前不支持范围方面的查询，我们解决的局限性min-和max-前缀和视口带小数的宽度（可下的高DPI设备一定的条件下发生，例如）通过使用值与这些比较高的精度。 Captions表格辅助标题标签如同一个表格的标题，它默认是隐藏的，可以协助屏幕阅读器用户找到表格、了解表格内容，且决定是否需要阅读它。 List of users # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter List of users # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter 响应式表格当表格想要始终呈现水平滚动，可在.table上加入.table-responsive获得响应式表现，从而支持任何viewport窗口。也可以在.table上，加 .table-responsive{-sm|-md|-lg|-xl}属性来定义多屏幕尺寸响应支持。 垂直剪裁/缩减当响应式表格超过表格底部或顶部边缘，会通过 overflow-y: hidden属性将内容隐藏，总的说这会隐藏掉下拉列表或第三方的插件展现。 总是响应为兼容各个屏幕规格断点，添加 .table-responsive 选择器使表格支持水平响应。 # Heading Heading Heading Heading Heading Heading Heading Heading Heading 1 Cell Cell Cell Cell Cell Cell Cell Cell Cell 2 Cell Cell Cell Cell Cell Cell Cell Cell Cell 3 Cell Cell Cell Cell Cell Cell Cell Cell Cell ... 多屏幕断点设定使用 .table-responsive{-sm|-md|-lg|-xl}可以根据需要对不同屏幕尺寸断点表格进行响应式设计，在中断点之上该表格会正常显示，而不是水平滚动（没有水平条）。 在响应样式应用于特定视口宽度之前，这些表可能会断开. # Heading Heading Heading Heading Heading Heading Heading Heading 1 Cell Cell Cell Cell Cell Cell Cell Cell 2 Cell Cell Cell Cell Cell Cell Cell Cell 3 Cell Cell Cell Cell Cell Cell Cell Cell ... # Heading Heading Heading Heading Heading Heading Heading Heading 1 Cell Cell Cell Cell Cell Cell Cell Cell 2 Cell Cell Cell Cell Cell Cell Cell Cell 3 Cell Cell Cell Cell Cell Cell Cell Cell ... # Heading Heading Heading Heading Heading Heading Heading Heading 1 Cell Cell Cell Cell Cell Cell Cell Cell 2 Cell Cell Cell Cell Cell Cell Cell Cell 3 Cell Cell Cell Cell Cell Cell Cell Cell ... # Heading Heading Heading Heading Heading Heading Heading Heading 1 Cell Cell Cell Cell Cell Cell Cell Cell 2 Cell Cell Cell Cell Cell Cell Cell Cell 3 Cell Cell Cell Cell Cell Cell Cell Cell ... |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |