From e8c2e17bc901ab139377e759f5ef931f8649b8c1 Mon Sep 17 00:00:00 2001 From: Mario Date: Mon, 15 Feb 2021 18:41:44 +0000 Subject: compser update twbs/bootstrap --- .../twbs/bootstrap/site/docs/4.5/content/tables.md | 831 --------------------- 1 file changed, 831 deletions(-) delete mode 100644 vendor/twbs/bootstrap/site/docs/4.5/content/tables.md (limited to 'vendor/twbs/bootstrap/site/docs/4.5/content/tables.md') diff --git a/vendor/twbs/bootstrap/site/docs/4.5/content/tables.md b/vendor/twbs/bootstrap/site/docs/4.5/content/tables.md deleted file mode 100644 index 8799d47f2..000000000 --- a/vendor/twbs/bootstrap/site/docs/4.5/content/tables.md +++ /dev/null @@ -1,831 +0,0 @@ ---- -layout: docs -title: Tables -description: Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap. -group: content -toc: true ---- - -## Examples - -Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any ``, then extend with custom styles or our various included modifier classes. - -Using the most basic table markup, here's how `.table`-based tables look in Bootstrap. **All table styles are inherited in Bootstrap 4**, meaning any nested tables will be styled in the same manner as the parent. - -{% capture example %} -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-{% endcapture %} -{% include example.html content=example %} - -You can also invert the colors—with light text on dark backgrounds—with `.table-dark`. - -{% capture example %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-{% endcapture %} -{% include example.html content=example %} - -## Table head options - -Similar to tables and dark tables, use the modifier classes `.thead-light` or `.thead-dark` to make ``s appear light or dark gray. - -{% capture example %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-{% endcapture %} -{% include example.html content=example %} - -## Striped rows - -Use `.table-striped` to add zebra-striping to any table row within the ``. - -{% capture example %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-{% endcapture %} -{% include example.html content=example %} - -{% capture example %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-{% endcapture %} -{% include example.html content=example %} - -## Bordered table - -Add `.table-bordered` for borders on all sides of the table and cells. - -{% capture example %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-{% endcapture %} -{% include example.html content=example %} - -{% capture example %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-{% endcapture %} -{% include example.html content=example %} - -## Borderless table - -Add `.table-borderless` for a table without borders. - -{% capture example %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-{% endcapture %} -{% include example.html content=example %} - -`.table-borderless` can also be used on dark tables. - -{% capture example %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-{% endcapture %} -{% include example.html content=example %} - -## Hoverable rows - -Add `.table-hover` to enable a hover state on table rows within a ``. - -{% capture example %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-{% endcapture %} -{% include example.html content=example %} - -{% capture example %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-{% endcapture %} -{% include example.html content=example %} - -## Small table - -Add `.table-sm` to make tables more compact by cutting cell padding in half. - -{% capture example %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-{% endcapture %} -{% include example.html content=example %} - -{% capture example %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-{% endcapture %} -{% include example.html content=example %} - -## Contextual classes - -Use contextual classes to color table rows or individual cells. - -
- - - - - - - - - - - - - - - - - - - - - {% for color in site.data.theme-colors %} - - - - - {% endfor %} - -
ClassHeadingHeading
ActiveCellCell
DefaultCellCell
{{ color.name | capitalize }}CellCell
-
- -{% highlight html %} - -... -{% for color in site.data.theme-colors %} -...{% endfor %} - - - - ... - {% for color in site.data.theme-colors %} - ...{% endfor %} - -{% endhighlight %} - -Regular table background variants are not available with the dark table, however, you may use [text or background utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) to achieve similar styles. - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#HeadingHeading
1CellCell
2CellCell
3CellCell
4CellCell
5CellCell
6CellCell
7CellCell
8CellCell
9CellCell
-
- -{% highlight html %} - -... -... -... -... -... - - - - ... - ... - ... - ... - ... - -{% endhighlight %} - -{% include callout-warning-color-assistive-technologies.md %} - -Create responsive tables by wrapping any `.table` with `.table-responsive{-sm|-md|-lg|-xl}`, making the table scroll horizontally at each `max-width` breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively. - -{% include callout-info-mediaqueries-breakpoints.md %} - -## Captions - -A `` 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. - -{% capture example %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
List of users
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-{% endcapture %} -{% include example.html content=example %} - -## Responsive tables - -Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl}`. - -{% capture callout %} -##### Vertical clipping/truncation - -Responsive tables make use of `overflow-y: hidden`, 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. -{% endcapture %} -{% include callout.html content=callout type="warning" %} - -### Always responsive - -Across every breakpoint, use `.table-responsive` for horizontally scrolling tables. - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCellCell
-
-
- -{% highlight html %} -
- - ... -
-
-{% endhighlight %} - -### Breakpoint specific - -Use `.table-responsive{-sm|-md|-lg|-xl}` 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. - -**These tables may appear broken until their responsive styles apply at specific viewport widths.** - -{% for bp in site.data.breakpoints %}{% unless bp.breakpoint == "xs" %} -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
-
-
-{% highlight html %} -
- - ... -
-
-{% endhighlight %} -{% endunless %}{% endfor %} -- cgit v1.2.3