Tables（表格） - [ Bootstrap 4 中文开发手册 ] - 在线原生手册

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

ディレクトリ 検索

Getting started Accessibility（无障碍） Browsers and devices（浏览器和设备） Build tools（构建工具） Contents（内容） Download（下载） JavaScript Theming Bootstrap（主题Bootstrap） Webpack Components: Alerts Alerts（警报） Components: Badges Badges（徽章） Components: Breadcrumb Breadcrumb Components: Button group Button group（按钮组） Components: Buttons Buttons（按钮） Components: Cards Components: Carousel Cards（卡） Carousel（圆盘传送带） Components: Collapse Collapse（折叠） Components: Dropdowns Dropdowns（下拉菜单） Components: Forms Forms（表单） Components: Input group Input group（输入群组） Components: Input group Jumbotron（广告大屏幕） Components: List group List group（列表组） Components: Modal Modal（互动视窗） Components: Navbar Navbar（导航栏） Components: Navs Navs（导航栏） Components: Pagination Pagination（分页） Components: Popovers Popovers（弹出框） Components: Progress Progress（进度条） Components: Scrollspy Scrollspy（滚动监听） Components: Tooltips Tooltips（提示工具） Content Code（代码） Figures（图片区） Images（图片） Reboot（重置） Tables（表格） Typography（排版） Layout Grid（网格） Layout（布局） Media object（多媒体对象） Utilities for layout（排版通用类别） Migration Migrating to v4（迁移到v4） Utilities Borders（边框） Clearfix（清除浮动） Close icon（关闭图标） Colors（颜色） Display property（显示属性） Embeds（内嵌） Flex（弹性） Float（浮动） Image replacement（图像替换） Position（位置） Screenreaders（荧幕阅读器） Sizing（尺寸） Spacing（间隔） Text（文本） Vertical alignment（垂直对齐） Visibility（能见度）

テキスト

文档和示例，选择表%28的样式，考虑到它们在JavaScript插件%29中的优先使用和引导。

实例

由于在第三方小部件(如日历和日期选择器)中广泛使用表，我们已经将表设计为选择加入.只需添加基类.table给任何人，然后使用自定义样式或我们的各种包含的修饰符类进行扩展。使用最基本的表标记，下面是.table-以表为基础的表在Bootstrap中查找。所有表样式都是在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-dark...
           
          
          
           
               #  First Name  Last Name  Username  
 
   1  Mark  Otto  @mdo  
  2  Jacob  Thornton  @fat  
  3  Larry  the Bird  @twitter  
 
           
          
          
           
            表头选项
           
          
          
           
            类似于表和暗表，使用修饰符类.thead-light或.thead-dark使S看上去是浅灰色还是深灰色。
           
          
          
           
               #  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  
 
           
          
          
           
            边桌
           
          
          
           
            加.table-bordered用于表格和单元格的所有边框。
           
          
          
           
               #  First Name  Last Name  Username  
 
   1  Mark  Otto  @mdo  
  2  Mark  Otto  @TwBootstrap  
  3  Jacob  Thornton  @fat  
  4  Larry the Bird  @twitter  
 
           
          
          
           
            

           
          
          
           
               #  First Name  Last Name  Username  
 
   1  Mark  Otto  @mdo  
  2  Mark  Otto  @TwBootstrap  
  3  Jacob  Thornton  @fat  
  4  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  
 
           
          
          
           
            小桌
           
          
          
           
            加.table-sm为了使桌子更紧凑，将细胞垫切成两半。
           
          
          
           
               #  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  
 
           
          
          
           
            上下文类
           
          
          
           
            使用上下文类为表行或单个单元格着色。
           
          
          
           
            ........................... ... ... ... ... ... ... ... ... ...
           
          
          
           
            普通表背景变体在暗表中不可用，但是可以使用文本或背景实用程序以达到类似的风格。
           
          
          
           
            ............... ... ... ... ... ...
           
          
          
           
            向辅助技术传达意义
           
          
          
           
            使用颜色来增加意义只会提供一个视觉指示，不会传达给辅助技术的用户，比如屏幕阅读器。确保颜色所表示的信息从内容本身中明显可见。可见文本%29，或通过其他方法包括，例如隐藏在.sr-only上课。
           
          
          
           
            说明
           
          
          
           
            阿函数就像表的标题。它帮助屏幕阅读器的用户找到一个表格，了解它的内容，并决定是否要阅读它。
           
          
          
           
             List of users   #  First Name  Last Name  Username  
 
   1  Mark  Otto  @mdo  
  2  Jacob  Thornton  @fat  
  3  Larry  the Bird  @twitter  
 
           
          
          
           
            响应表
           
          
          
           
            响应表允许轻松地水平滚动表。通过添加.table-responsive上课.table或者，通过添加.table-responsive{-sm|-md|-lg|-xl}...
           
          
          
           
            垂直裁剪/截断
           
          
          
           
            响应表使用overflow-y: hidden，它剪辑掉超出表底部或顶部边缘的任何内容。特别是，这可以减少下拉菜单和其他第三方小部件。
           
          
          
           
            总是有反应
           
          
          
           
             ...
           
          
          
           
            断点特定
           
          
          
           
            使用.table-responsive{-sm|-md|-lg|-xl}根据需要创建响应表，直到特定的断点。从该断点开始，表将正常运行，而不是水平滚动。
           
          
          
           
             ...
 ...
 ...
 ...
           
          
          
           
            © 2011–2017 Twitter, Inc.
           
          
          
           
            © 2011–2017 The Bootstrap Authors
            

           
          
          
           
            根据MIT许可授权的代码。
           
          
          
           
            根据CreativeCommonsAttributionLicense v3.0授权的文档。

#	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

#	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	Mark	Otto	@TwBootstrap
3	Jacob	Thornton	@fat
4	Larry the Bird	@twitter

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Mark	Otto	@TwBootstrap
3	Jacob	Thornton	@fat
4	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

#	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