mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-31 00:59:51 +02:00
Code Issues Releases Wiki Activity

Add v4.5.1 docs (#31409)

Browse Source
This commit is contained in:
XhmikosR
2020-08-04 19:36:55 +03:00
committed by GitHub
parent 3f76a6fcd2
commit 891f87bb54
118 changed files with 2674 additions and 2372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
docs/4.5/content/tables/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v4.0.1">
<meta name="generator" content="Jekyll v4.1.1">
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="4.5">
@@ -15,7 +15,7 @@
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/content/tables/">
<!-- Bootstrap core CSS -->
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
@@ -62,9 +62,10 @@
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
<div class="skippy overflow-hidden">
<div class="container-xl">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
@@ -488,15 +489,18 @@
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Tables</h1>
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/content/tables.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<h1 class="bd-title" id="content">Tables</h1>
</div>
<p class="bd-lead">Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.</p>
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="examples">Examples</h2>
<p>Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be <strong>opt-in</strong>. Just add the base class <code class="highlighter-rouge">.table</code> to any <code class="highlighter-rouge">&lt;table&gt;</code>, then extend with custom styles or our various included modifier classes.</p>
<p>Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be <strong>opt-in</strong>. Just add the base class <code class="language-plaintext highlighter-rouge">.table</code> to any <code class="language-plaintext highlighter-rouge">&lt;table&gt;</code>, then extend with custom styles or our various included modifier classes.</p>
<p>Using the most basic table markup, here’s how <code class="highlighter-rouge">.table</code>-based tables look in Bootstrap. <strong>All table styles are inherited in Bootstrap 4</strong>, meaning any nested tables will be styled in the same manner as the parent.</p>
<p>Using the most basic table markup, here’s how <code class="language-plaintext highlighter-rouge">.table</code>-based tables look in Bootstrap. <strong>All table styles are inherited in Bootstrap 4</strong>, meaning any nested tables will be styled in the same manner as the parent.</p>
<div class="bd-example">
<table class="table">
@@ -561,7 +565,7 @@
<span class="nt">&lt;/tbody&gt;</span>
<span class="nt">&lt;/table&gt;</span></code></pre></figure>
<p>You can also invert the colors—with light text on dark backgrounds—with <code class="highlighter-rouge">.table-dark</code>.</p>
<p>You can also invert the colors—with light text on dark backgrounds—with <code class="language-plaintext highlighter-rouge">.table-dark</code>.</p>
<div class="bd-example">
<table class="table table-dark">
@@ -628,7 +632,7 @@
<h2 id="table-head-options">Table head options</h2>
<p>Similar to tables and dark tables, use the modifier classes <code class="highlighter-rouge">.thead-light</code> or <code class="highlighter-rouge">.thead-dark</code> to make <code class="highlighter-rouge">&lt;thead&gt;</code>s appear light or dark gray.</p>
<p>Similar to tables and dark tables, use the modifier classes <code class="language-plaintext highlighter-rouge">.thead-light</code> or <code class="language-plaintext highlighter-rouge">.thead-dark</code> to make <code class="language-plaintext highlighter-rouge">&lt;thead&gt;</code>s appear light or dark gray.</p>
<div class="bd-example">
<table class="table">
@@ -757,7 +761,7 @@
<h2 id="striped-rows">Striped rows</h2>
<p>Use <code class="highlighter-rouge">.table-striped</code> to add zebra-striping to any table row within the <code class="highlighter-rouge">&lt;tbody&gt;</code>.</p>
<p>Use <code class="language-plaintext highlighter-rouge">.table-striped</code> to add zebra-striping to any table row within the <code class="language-plaintext highlighter-rouge">&lt;tbody&gt;</code>.</p>
<div class="bd-example">
<table class="table table-striped">
@@ -887,7 +891,7 @@
<h2 id="bordered-table">Bordered table</h2>
<p>Add <code class="highlighter-rouge">.table-bordered</code> for borders on all sides of the table and cells.</p>
<p>Add <code class="language-plaintext highlighter-rouge">.table-bordered</code> for borders on all sides of the table and cells.</p>
<div class="bd-example">
<table class="table table-bordered">
@@ -1013,7 +1017,7 @@
<h2 id="borderless-table">Borderless table</h2>
<p>Add <code class="highlighter-rouge">.table-borderless</code> for a table without borders.</p>
<p>Add <code class="language-plaintext highlighter-rouge">.table-borderless</code> for a table without borders.</p>
<div class="bd-example">
<table class="table table-borderless">
@@ -1076,7 +1080,7 @@
<span class="nt">&lt;/tbody&gt;</span>
<span class="nt">&lt;/table&gt;</span></code></pre></figure>
<p><code class="highlighter-rouge">.table-borderless</code> can also be used on dark tables.</p>
<p><code class="language-plaintext highlighter-rouge">.table-borderless</code> can also be used on dark tables.</p>
<div class="bd-example">
<table class="table table-borderless table-dark">
@@ -1141,7 +1145,7 @@
<h2 id="hoverable-rows">Hoverable rows</h2>
<p>Add <code class="highlighter-rouge">.table-hover</code> to enable a hover state on table rows within a <code class="highlighter-rouge">&lt;tbody&gt;</code>.</p>
<p>Add <code class="language-plaintext highlighter-rouge">.table-hover</code> to enable a hover state on table rows within a <code class="language-plaintext highlighter-rouge">&lt;tbody&gt;</code>.</p>
<div class="bd-example">
<table class="table table-hover">
@@ -1267,7 +1271,7 @@
<h2 id="small-table">Small table</h2>
<p>Add <code class="highlighter-rouge">.table-sm</code> to make tables more compact by cutting cell padding in half.</p>
<p>Add <code class="language-plaintext highlighter-rouge">.table-sm</code> to make tables more compact by cutting cell padding in half.</p>
<div class="bd-example">
<table class="table table-sm">
@@ -1567,18 +1571,18 @@
<div class="bd-callout bd-callout-warning">
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="language-plaintext highlighter-rouge">.sr-only</code> class.</p>
</div>
<p>Create responsive tables by wrapping any <code class="highlighter-rouge">.table</code> with <code class="highlighter-rouge">.table-responsive{-sm|-md|-lg|-xl}</code>, making the table scroll horizontally at each <code class="highlighter-rouge">max-width</code> breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.</p>
<p>Create responsive tables by wrapping any <code class="language-plaintext highlighter-rouge">.table</code> with <code class="language-plaintext highlighter-rouge">.table-responsive{-sm|-md|-lg|-xl}</code>, making the table scroll horizontally at each <code class="language-plaintext highlighter-rouge">max-width</code> breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.</p>
<div class="bd-callout bd-callout-info">
<p>Note that since browsers do not currently support <a href="https://www.w3.org/TR/mediaqueries-4/#range-context">range context queries</a>, we work around the limitations of <a href="https://www.w3.org/TR/mediaqueries-4/#mq-min-max"><code class="highlighter-rouge">min-</code> and <code class="highlighter-rouge">max-</code> prefixes</a> and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.</p>
<p>Note that since browsers do not currently support <a href="https://www.w3.org/TR/mediaqueries-4/#range-context">range context queries</a>, we work around the limitations of <a href="https://www.w3.org/TR/mediaqueries-4/#mq-min-max"><code class="language-plaintext highlighter-rouge">min-</code> and <code class="language-plaintext highlighter-rouge">max-</code> prefixes</a> and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.</p>
</div>
<h2 id="captions">Captions</h2>
<p>A <code class="highlighter-rouge">&lt;caption&gt;</code> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.</p>
<p>A <code class="language-plaintext highlighter-rouge">&lt;caption&gt;</code> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.</p>
<div class="bd-example">
<table class="table">
@@ -1647,17 +1651,17 @@
<h2 id="responsive-tables">Responsive tables</h2>
<p>Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a <code class="highlighter-rouge">.table</code> with <code class="highlighter-rouge">.table-responsive</code>. Or, pick a maximum breakpoint with which to have a responsive table up to by using <code class="highlighter-rouge">.table-responsive{-sm|-md|-lg|-xl}</code>.</p>
<p>Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a <code class="language-plaintext highlighter-rouge">.table</code> with <code class="language-plaintext highlighter-rouge">.table-responsive</code>. Or, pick a maximum breakpoint with which to have a responsive table up to by using <code class="language-plaintext highlighter-rouge">.table-responsive{-sm|-md|-lg|-xl}</code>.</p>
<div class="bd-callout bd-callout-warning">
<h5 id="vertical-clippingtruncation">Vertical clipping/truncation</h5>
<p>Responsive tables make use of <code class="highlighter-rouge">overflow-y: hidden</code>, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.</p>
<p>Responsive tables make use of <code class="language-plaintext highlighter-rouge">overflow-y: hidden</code>, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.</p>
</div>
<h3 id="always-responsive">Always responsive</h3>
<p>Across every breakpoint, use <code class="highlighter-rouge">.table-responsive</code> for horizontally scrolling tables.</p>
<p>Across every breakpoint, use <code class="language-plaintext highlighter-rouge">.table-responsive</code> for horizontally scrolling tables.</p>
<div class="bd-example">
<div class="table-responsive">
@@ -1726,7 +1730,7 @@
<h3 id="breakpoint-specific">Breakpoint specific</h3>
<p>Use <code class="highlighter-rouge">.table-responsive{-sm|-md|-lg|-xl}</code> as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.</p>
<p>Use <code class="language-plaintext highlighter-rouge">.table-responsive{-sm|-md|-lg|-xl}</code> as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.</p>
<p><strong>These tables may appear broken until their responsive styles apply at specific viewport widths.</strong></p>
@@ -1980,6 +1984,6 @@
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
</body>
</html>