mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-14 18:42:30 +03:00
Bump version to 5.0.0-alpha1 (#29925)
Also add v4.5.0 in versions and keep README.md pointing to v4.5.0 so that there are no broken stuff.
This commit is contained in:
XhmikosR
@@ -0,0 +1,26 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Figures
|
||||
description: Documentation and examples for displaying related images and text with the figure component in Bootstrap.
|
||||
group: content
|
||||
---
|
||||
|
||||
Anytime you need to display a piece of content—like an image with an optional caption, consider using a `<figure>`.
|
||||
|
||||
Use the included `.figure`, `.figure-img` and `.figure-caption` classes to provide some baseline styles for the HTML5 `<figure>` and `<figcaption>` elements. Images in figures have no explicit size, so be sure to add the `.img-fluid` class to your `<img>` to make it responsive.
|
||||
|
||||
{{< example >}}
|
||||
<figure class="figure">
|
||||
{{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}}
|
||||
<figcaption class="figure-caption">A caption for the above image.</figcaption>
|
||||
</figure>
|
||||
{{< /example >}}
|
||||
|
||||
Aligning the figure's caption is easy with our [text utilities]({{< docsref "/utilities/text#text-alignment" >}}).
|
||||
|
||||
{{< example >}}
|
||||
<figure class="figure">
|
||||
{{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}}
|
||||
<figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
|
||||
</figure>
|
||||
{{< /example >}}
|
||||
@@ -0,0 +1,55 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Images
|
||||
description: Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
|
||||
group: content
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Responsive images
|
||||
|
||||
Images in Bootstrap are made responsive with `.img-fluid`. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales with the parent element.
|
||||
|
||||
{{< example >}}
|
||||
{{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}}
|
||||
{{< /example >}}
|
||||
|
||||
## Image thumbnails
|
||||
|
||||
In addition to our [border-radius utilities]({{< docsref "/utilities/borders" >}}), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
|
||||
|
||||
{{< example >}}
|
||||
{{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" >}}
|
||||
{{< /example >}}
|
||||
|
||||
## Aligning images
|
||||
|
||||
Align images with the [helper float classes]({{< docsref "/utilities/float" >}}) or [text alignment classes]({{< docsref "/utilities/text#text-alignment" >}}). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{< docsref "/utilities/spacing#horizontal-centering" >}}).
|
||||
|
||||
{{< example >}}
|
||||
{{< placeholder width="200" height="200" class="rounded float-left" >}}
|
||||
{{< placeholder width="200" height="200" class="rounded float-right" >}}
|
||||
{{< /example >}}
|
||||
|
||||
|
||||
{{< example >}}
|
||||
{{< placeholder width="200" height="200" class="rounded mx-auto d-block" >}}
|
||||
{{< /example >}}
|
||||
|
||||
{{< example >}}
|
||||
<div class="text-center">
|
||||
{{< placeholder width="200" height="200" class="rounded" >}}
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
|
||||
## Picture
|
||||
|
||||
If you are using the `<picture>` element to specify multiple `<source>` elements for a specific `<img>`, make sure to add the `.img-*` classes to the `<img>` and not to the `<picture>` tag.
|
||||
|
||||
{{< highlight html >}}
|
||||
<picture>
|
||||
<source srcset="..." type="image/svg+xml">
|
||||
<img src="..." class="img-fluid img-thumbnail" alt="...">
|
||||
</picture>
|
||||
{{< /highlight >}}
|
||||
@@ -0,0 +1,442 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Reboot
|
||||
description: Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.
|
||||
group: content
|
||||
aliases: "/docs/5.0/content/"
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Approach
|
||||
|
||||
Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some `<table>` styles for a simpler baseline and later provide `.table`, `.table-bordered`, and more.
|
||||
|
||||
Here are our guidelines and reasons for choosing what to override in Reboot:
|
||||
|
||||
- Update some browser default values to use `rem`s instead of `em`s for scalable component spacing.
|
||||
- Avoid `margin-top`. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of `margin` is a simpler mental model.
|
||||
- For easier scaling across device sizes, block elements should use `rem`s for `margin`s.
|
||||
- Keep declarations of `font`-related properties to a minimum, using `inherit` whenever possible.
|
||||
|
||||
## Page defaults
|
||||
|
||||
The `<html>` and `<body>` elements are updated to provide better page-wide defaults. More specifically:
|
||||
|
||||
- The `box-sizing` is globally set on every element—including `*::before` and `*::after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border.
|
||||
- No base `font-size` is declared on the `<html>`, but `16px` is assumed (the browser default). `font-size: 1rem` is applied on the `<body>` for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach. This browser default can be overridden by modifying the `$font-size-root` variable.
|
||||
- The `<body>` also sets a global `font-family`, `font-weight`, `line-height`, and `color`. This is inherited later by some form elements to prevent font inconsistencies.
|
||||
- For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`.
|
||||
|
||||
## Native font stack
|
||||
|
||||
Bootstrap utilizes a "native font stack" or "system font stack" for optimum text rendering on every device and OS. These system fonts have been designed specifically with today's devices in mind, with improved rendering on screens, variable font support, and more. Read more about [native font stacks in this *Smashing Magazine* article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/).
|
||||
|
||||
{{< highlight scss >}}
|
||||
$font-family-sans-serif:
|
||||
// Safari for macOS and iOS (San Francisco)
|
||||
-apple-system,
|
||||
// Chrome < 56 for macOS (San Francisco)
|
||||
BlinkMacSystemFont,
|
||||
// Windows
|
||||
"Segoe UI",
|
||||
// Android
|
||||
Roboto,
|
||||
// Basic web fallback
|
||||
"Helvetica Neue", Arial,
|
||||
// Linux
|
||||
"Noto Sans",
|
||||
// Sans serif fallback
|
||||
sans-serif,
|
||||
// Emoji fonts
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
|
||||
{{< /highlight >}}
|
||||
|
||||
This `font-family` is applied to the `<body>` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap.
|
||||
|
||||
## Headings and paragraphs
|
||||
|
||||
All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing.
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Heading</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
{{< markdown >}}`<h1></h1>`{{< /markdown >}}
|
||||
</td>
|
||||
<td><span class="h1">h1. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{< markdown >}}`<h2></h2>`{{< /markdown >}}
|
||||
</td>
|
||||
<td><span class="h2">h2. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{< markdown >}}`<h3></h3>`{{< /markdown >}}
|
||||
</td>
|
||||
<td><span class="h3">h3. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{< markdown >}}`<h4></h4>`{{< /markdown >}}
|
||||
</td>
|
||||
<td><span class="h4">h4. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{< markdown >}}`<h5></h5>`{{< /markdown >}}
|
||||
</td>
|
||||
<td><span class="h5">h5. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{< markdown >}}`<h6></h6>`{{< /markdown >}}
|
||||
</td>
|
||||
<td><span class="h6">h6. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## Lists
|
||||
|
||||
All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`. We've also reset the `padding-left` on `<ul>` and `<ol>` elements.
|
||||
|
||||
<div class="bd-example">
|
||||
{{< markdown >}}
|
||||
* Lorem ipsum dolor sit amet
|
||||
* Consectetur adipiscing elit
|
||||
* Integer molestie lorem at massa
|
||||
* Facilisis in pretium nisl aliquet
|
||||
* Nulla volutpat aliquam velit
|
||||
* Phasellus iaculis neque
|
||||
* Purus sodales ultricies
|
||||
* Vestibulum laoreet porttitor sem
|
||||
* Ac tristique libero volutpat at
|
||||
* Faucibus porta lacus fringilla vel
|
||||
* Aenean sit amet erat nunc
|
||||
* Eget porttitor lorem
|
||||
|
||||
1. Lorem ipsum dolor sit amet
|
||||
2. Consectetur adipiscing elit
|
||||
3. Integer molestie lorem at massa
|
||||
4. Facilisis in pretium nisl aliquet
|
||||
5. Nulla volutpat aliquam velit
|
||||
6. Faucibus porta lacus fringilla vel
|
||||
7. Aenean sit amet erat nunc
|
||||
8. Eget porttitor lorem
|
||||
{{< /markdown >}}
|
||||
</div>
|
||||
|
||||
For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `<dd>`s reset `margin-left` to `0` and add `margin-bottom: .5rem`. `<dt>`s are **bolded**.
|
||||
|
||||
<div class="bd-example">
|
||||
<dl>
|
||||
<dt>Description lists</dt>
|
||||
<dd>A description list is perfect for defining terms.</dd>
|
||||
<dt>Euismod</dt>
|
||||
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
|
||||
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
|
||||
<dt>Malesuada porta</dt>
|
||||
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
## Inline code
|
||||
|
||||
Wrap inline snippets of code with `<code>`. Be sure to escape HTML angle brackets.
|
||||
|
||||
{{< example >}}
|
||||
For example, <code><section></code> should be wrapped as inline.
|
||||
{{< /example >}}
|
||||
|
||||
## Code blocks
|
||||
|
||||
Use `<pre>`s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. The `<pre>` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`.
|
||||
|
||||
{{< example >}}
|
||||
<pre><code><p>Sample text here...</p>
|
||||
<p>And another line of sample text here...</p>
|
||||
</code></pre>
|
||||
{{< /example >}}
|
||||
|
||||
## Variables
|
||||
|
||||
For indicating variables use the `<var>` tag.
|
||||
|
||||
{{< example >}}
|
||||
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
|
||||
{{< /example >}}
|
||||
|
||||
## User input
|
||||
|
||||
Use the `<kbd>` to indicate input that is typically entered via keyboard.
|
||||
|
||||
{{< example >}}
|
||||
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
|
||||
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
|
||||
{{< /example >}}
|
||||
|
||||
## Sample output
|
||||
|
||||
For indicating sample output from a program use the `<samp>` tag.
|
||||
|
||||
{{< example >}}
|
||||
<samp>This text is meant to be treated as sample output from a computer program.</samp>
|
||||
{{< /example >}}
|
||||
|
||||
## Tables
|
||||
|
||||
Tables are slightly adjusted to style `<caption>`s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{< docsref "/content/tables" >}}).
|
||||
|
||||
<div class="bd-example">
|
||||
<table>
|
||||
<caption>
|
||||
This is an example table, and this is its caption to describe the contents.
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Table heading</th>
|
||||
<th>Table heading</th>
|
||||
<th>Table heading</th>
|
||||
<th>Table heading</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
## Forms
|
||||
|
||||
Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes:
|
||||
|
||||
- `<fieldset>`s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.
|
||||
- `<legend>`s, like fieldsets, have also been restyled to be displayed as a heading of sorts.
|
||||
- `<label>`s are set to `display: inline-block` to allow `margin` to be applied.
|
||||
- `<input>`s, `<select>`s, `<textarea>`s, and `<button>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too.
|
||||
- `<textarea>`s are modified to only be resizable vertically as horizontal resizing often "breaks" page layout.
|
||||
- `<button>`s and `<input>` button elements have `cursor: pointer` when `:not(:disabled)`.
|
||||
|
||||
These changes, and more, are demonstrated below.
|
||||
|
||||
<form class="bd-example">
|
||||
<fieldset>
|
||||
<legend>Example legend</legend>
|
||||
<p>
|
||||
<label for="input">Example input</label>
|
||||
<input type="text" id="input" placeholder="Example input">
|
||||
</p>
|
||||
<p>
|
||||
<label for="email">Example email</label>
|
||||
<input type="email" id="email" placeholder="lorem@ipsum.com">
|
||||
</p>
|
||||
<p>
|
||||
<label for="tel">Example telephone</label>
|
||||
<input type="tel" id="tel">
|
||||
</p>
|
||||
<p>
|
||||
<label for="url">Example url</label>
|
||||
<input type="url" id="url">
|
||||
</p>
|
||||
<p>
|
||||
<label for="number">Example number</label>
|
||||
<input type="number" id="number">
|
||||
</p>
|
||||
<p>
|
||||
<label for="search">Example search</label>
|
||||
<input type="search" id="search">
|
||||
</p>
|
||||
<p>
|
||||
<label for="range">Example range</label>
|
||||
<input type="range" id="range" min="0" max="10">
|
||||
</p>
|
||||
<p>
|
||||
<label for="file">Example file input</label>
|
||||
<input type="file" id="file">
|
||||
</p>
|
||||
<p>
|
||||
<label for="select">Example select</label>
|
||||
<select id="select">
|
||||
<option value="">Choose...</option>
|
||||
<optgroup label="Option group 1">
|
||||
<option value="">Option 1</option>
|
||||
<option value="">Option 2</option>
|
||||
<option value="">Option 3</option>
|
||||
</optgroup>
|
||||
<optgroup label="Option group 2">
|
||||
<option value="">Option 4</option>
|
||||
<option value="">Option 5</option>
|
||||
<option value="">Option 6</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
<input type="checkbox" value="">
|
||||
Check this checkbox
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
||||
Option one is this and that
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
|
||||
Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls.
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
|
||||
Option three is disabled
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label for="textarea">Example textarea</label>
|
||||
<textarea id="textarea" rows="3"></textarea>
|
||||
</p>
|
||||
<p>
|
||||
<label for="date">Example date</label>
|
||||
<input type="date" id="date">
|
||||
</p>
|
||||
<p>
|
||||
<label for="time">Example time</label>
|
||||
<input type="time" id="time">
|
||||
</p>
|
||||
<p>
|
||||
<label for="password">Example password</label>
|
||||
<input type="password" id="password">
|
||||
</p>
|
||||
<p>
|
||||
<label for="datetime-local">Example datetime-local</label>
|
||||
<input type="datetime-local" id="datetime-local">
|
||||
</p>
|
||||
<p>
|
||||
<label for="week">Example week</label>
|
||||
<input type="week" id="week">
|
||||
</p>
|
||||
<p>
|
||||
<label for="month">Example month</label>
|
||||
<input type="month" id="month">
|
||||
</p>
|
||||
<p>
|
||||
<label for="color">Example color</label>
|
||||
<input type="color" id="color">
|
||||
</p>
|
||||
<p>
|
||||
<label for="output">Example output</label>
|
||||
<output name="result" id="output">100</output>
|
||||
</p>
|
||||
<p>
|
||||
<button type="submit">Button submit</button>
|
||||
<input type="submit" value="Input submit button">
|
||||
<input type="reset" value="Input reset button">
|
||||
<input type="button" value="Input button">
|
||||
</p>
|
||||
<p>
|
||||
<button type="submit" disabled>Button submit</button>
|
||||
<input type="submit" value="Input submit button" disabled>
|
||||
<input type="reset" value="Input reset button" disabled>
|
||||
<input type="button" value="Input button" disabled>
|
||||
</p>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
{{< callout warning >}}
|
||||
{{< partial "callout-warning-input-support.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Misc elements
|
||||
|
||||
### Address
|
||||
|
||||
The `<address>` element is updated to reset the browser default `font-style` from `italic` to `normal`. `line-height` is also now inherited, and `margin-bottom: 1rem` has been added. `<address>`s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with `<br>`.
|
||||
|
||||
<div class="bd-example">
|
||||
<address>
|
||||
<strong>Twitter, Inc.</strong><br>
|
||||
1355 Market St, Suite 900<br>
|
||||
San Francisco, CA 94103<br>
|
||||
<abbr title="Phone">P:</abbr> (123) 456-7890
|
||||
</address>
|
||||
|
||||
<address>
|
||||
<strong>Full Name</strong><br>
|
||||
<a href="mailto:first.last@example.com">first.last@example.com</a>
|
||||
</address>
|
||||
</div>
|
||||
|
||||
### Blockquote
|
||||
|
||||
The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem` for something more consistent with other elements.
|
||||
|
||||
<div class="bd-example">
|
||||
<blockquote class="blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
### Inline elements
|
||||
|
||||
The `<abbr>` element receives basic styling to make it stand out amongst paragraph text.
|
||||
|
||||
<div class="bd-example">
|
||||
Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue.
|
||||
</div>
|
||||
|
||||
### Summary
|
||||
|
||||
The default `cursor` on summary is `text`, so we reset that to `pointer` to convey that the element can be interacted with by clicking on it.
|
||||
|
||||
<div class="bd-example">
|
||||
<details>
|
||||
<summary>Some details</summary>
|
||||
<p>More info about the details.</p>
|
||||
</details>
|
||||
|
||||
<details open>
|
||||
<summary>Even more details</summary>
|
||||
<p>Here are even more details about the details.</p>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
## HTML5 `[hidden]` attribute
|
||||
|
||||
HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](https://purecss.io/), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden.
|
||||
|
||||
{{< highlight html >}}
|
||||
<input type="text" hidden>
|
||||
{{< /highlight >}}
|
||||
|
||||
{{< callout warning >}}
|
||||
##### jQuery incompatibility
|
||||
|
||||
`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
|
||||
{{< /callout >}}
|
||||
|
||||
To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{< docsref "/utilities/visibility" >}}) instead.
|
||||
@@ -0,0 +1,784 @@
|
||||
---
|
||||
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
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Due to the widespread use of `<table>` elements across third-party widgets like calendars and date pickers, Bootstrap's tables are **opt-in**. Add the base class `.table` to any `<table>`, then extend with our optional modifier classes or custom styles. All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent.
|
||||
|
||||
Using the most basic table markup, here's how `.table`-based tables look in Bootstrap.
|
||||
|
||||
{{< table class="table" simplified="false" >}}
|
||||
|
||||
## Variants
|
||||
|
||||
Use contextual classes to color tables, table rows or individual cells.
|
||||
|
||||
<div class="bd-example">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Class</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Default</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
{{< table.inline >}}
|
||||
{{- range (index $.Site.Data "theme-colors") }}
|
||||
<tr class="table-{{ .name }}">
|
||||
<th scope="row">{{ .name | title }}</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
{{- end -}}
|
||||
{{< /table.inline >}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{{< highlight html >}}
|
||||
<!-- On tables -->{{< table.inline >}}
|
||||
{{- range (index $.Site.Data "theme-colors") }}
|
||||
<table class="table-{{ .name }}">...</table>
|
||||
{{- end -}}
|
||||
{{< /table.inline >}}
|
||||
|
||||
<!-- On rows -->{{< table.inline >}}
|
||||
{{- range (index $.Site.Data "theme-colors") }}
|
||||
<tr class="table-{{ .name }}">...</tr>
|
||||
{{- end -}}
|
||||
{{< /table.inline >}}
|
||||
|
||||
<!-- On cells (`td` or `th`) -->
|
||||
<tr>{{< table.inline >}}
|
||||
{{- range (index $.Site.Data "theme-colors") }}
|
||||
<td class="table-{{ .name }}">...</td>
|
||||
{{- end -}}
|
||||
{{< /table.inline >}}
|
||||
</tr>
|
||||
{{< /highlight >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-warning-color-assistive-technologies.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Accented tables
|
||||
|
||||
### Striped rows
|
||||
|
||||
Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`.
|
||||
|
||||
{{< table class="table table-striped" >}}
|
||||
|
||||
These classes can also be added to table variants:
|
||||
|
||||
{{< table class="table table-dark table-striped" >}}
|
||||
|
||||
{{< table class="table table-success table-striped" >}}
|
||||
|
||||
### Hoverable rows
|
||||
|
||||
Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
|
||||
|
||||
{{< table class="table table-hover" >}}
|
||||
|
||||
{{< table class="table table-dark table-hover" >}}
|
||||
|
||||
These hoverable rows can also be combined with the striped variant:
|
||||
|
||||
{{< table class="table table-striped table-hover" >}}
|
||||
|
||||
### Active tables
|
||||
|
||||
Highlight a table row or cell by adding a `.table-active` class.
|
||||
|
||||
<div class="bd-example">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="table-active">
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2" class="table-active">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{{< highlight html >}}
|
||||
<table class="table">
|
||||
<thead>
|
||||
...
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="table-active">
|
||||
...
|
||||
</tr>
|
||||
<tr>
|
||||
...
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2" class="table-active">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{{< /highlight >}}
|
||||
|
||||
<div class="bd-example">
|
||||
<table class="table table-dark">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="table-active">
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2" class="table-active">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{{< highlight html >}}
|
||||
<table class="table table-dark">
|
||||
<thead>
|
||||
...
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="table-active">
|
||||
...
|
||||
</tr>
|
||||
<tr>
|
||||
...
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2" class="table-active">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{{< /highlight >}}
|
||||
|
||||
## How do the variants and accented tables work?
|
||||
|
||||
For the accented tables ([striped rows](#striped-rows), [hoverable rows](#hoverable-rows), and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants):
|
||||
|
||||
- We start by setting the background of a table cell with the `--bs-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don't get into trouble if semi-transparent colors are used as table backgrounds.
|
||||
- Then we add a gradient on the table cells with `background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));` to layer on top of any specified `background-color`. Since `--bs-table-accent-bg` is transparent by default, we have an invisible transparent linear gradient by default.
|
||||
- When either `.table-striped`, `.table-hover` or `.table-active` classes are added, the `--bs-table-accent-bg` is set to a semitransparent color to colorize the background.
|
||||
- For each table variant, we generate a `--bs-table-accent-bg` color with the highest contrast depedending on that color. For example, the accent color for `.table-primary` is darker while `.table-dark` has a lighter accent color.
|
||||
- Text and border colors are generated the same way, and their colors are inherited by default.
|
||||
|
||||
Behind the scenes it looks like this:
|
||||
|
||||
{{< scss-docs name="table-variant" file="scss/mixins/_table-variants.scss" >}}
|
||||
|
||||
## Table borders
|
||||
|
||||
### Bordered tables
|
||||
|
||||
Add `.table-bordered` for borders on all sides of the table and cells.
|
||||
|
||||
{{< table class="table table-bordered" >}}
|
||||
|
||||
[Border color utilities]({{< docsref "/utilities/borders#border-color" >}}) can be added to change colors:
|
||||
|
||||
{{< table class="table table-bordered border-primary" >}}
|
||||
|
||||
### Tables without borders
|
||||
|
||||
Add `.table-borderless` for a table without borders.
|
||||
|
||||
{{< table class="table table-borderless" >}}
|
||||
|
||||
{{< table class="table table-dark table-borderless" >}}
|
||||
|
||||
## Small tables
|
||||
|
||||
Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` in half.
|
||||
|
||||
{{< table class="table table-sm" >}}
|
||||
|
||||
{{< table class="table table-dark table-sm" >}}
|
||||
|
||||
## Vertical alignment
|
||||
|
||||
Table cells of `<thead>` are always vertical aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the the top by default. Use the [vertical align]({{< docsref "/utilities/vertical-align" >}}) classes to re-align where needed.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="table-responsive">
|
||||
<table class="table align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="w-25">Heading 1</th>
|
||||
<th scope="col" class="w-25">Heading 2</th>
|
||||
<th scope="col" class="w-25">Heading 3</th>
|
||||
<th scope="col" class="w-25">Heading 4</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
|
||||
<td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
|
||||
<td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
|
||||
<td>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</td>
|
||||
</tr>
|
||||
<tr class="align-bottom">
|
||||
<td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
|
||||
<td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
|
||||
<td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
|
||||
<td>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
|
||||
<td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
|
||||
<td class="align-top">This cell is aligned to the top.</td>
|
||||
<td>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{< highlight html >}}
|
||||
<table class="table table-sm table-dark">
|
||||
<div class="table-responsive">
|
||||
<table class="table align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
...
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
...
|
||||
</tr>
|
||||
<tr class="align-bottom">
|
||||
...
|
||||
</tr>
|
||||
<tr>
|
||||
<td>...</td>
|
||||
<td>...</td>
|
||||
<td class="align-top">This cell is aligned to the top.</td>
|
||||
<td>...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</table>
|
||||
{{< /highlight >}}
|
||||
|
||||
## Nesting
|
||||
|
||||
Border styles, active styles, and table variants are not inherited by nested tables.
|
||||
|
||||
<div class="bd-example">
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<table class="table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Header</th>
|
||||
<th scope="col">Header</th>
|
||||
<th scope="col">Header</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">A</th>
|
||||
<td>First</td>
|
||||
<td>Last</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">B</th>
|
||||
<td>First</td>
|
||||
<td>Last</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">C</th>
|
||||
<td>First</td>
|
||||
<td>Last</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{{< highlight html >}}
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
...
|
||||
</thead>
|
||||
<tbody>
|
||||
...
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<table class="table mb-0">
|
||||
...
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
...
|
||||
</tbody>
|
||||
</table>
|
||||
{{< /highlight >}}
|
||||
|
||||
## How nesting works
|
||||
|
||||
To prevent _any_ styles from leaking to nested tables, we use the child combinator (`>`) selector in our CSS. Since we need to target all the `td`s and `th`s in the `thead`, `tbody`, and `tfoot`, our selector would look pretty long without it. As such, we use the rather odd looking `.table > :not(caption) > * > * ` selector to target all `td`s and `th`s of the `.table`, but none of any potential nested tables.
|
||||
|
||||
Note that if you add `<tr>`s as direct children of a table, those `<tr>` will be wrapped in a `<tbody>` by default, thus making our selectors work as intended.
|
||||
|
||||
## Anatomy
|
||||
|
||||
### Table head
|
||||
|
||||
Similar to tables and dark tables, use the modifier classes `.table-light` or `.table-dark` to make `<thead>`s appear light or dark gray.
|
||||
|
||||
<div class="bd-example">
|
||||
<table class="table">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{{< highlight html >}}
|
||||
<table class="table">
|
||||
<thead class="table-light">
|
||||
...
|
||||
</thead>
|
||||
<tbody>
|
||||
...
|
||||
</tbody>
|
||||
</table>
|
||||
{{< /highlight >}}
|
||||
|
||||
<div class="bd-example">
|
||||
<table class="table">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{{< highlight html >}}
|
||||
<table class="table">
|
||||
<thead class="table-dark">
|
||||
...
|
||||
</thead>
|
||||
<tbody>
|
||||
...
|
||||
</tbody>
|
||||
</table>
|
||||
{{< /highlight >}}
|
||||
|
||||
|
||||
### Table foot
|
||||
|
||||
<div class="bd-example">
|
||||
<table class="table">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>Footer</td>
|
||||
<td>Footer</td>
|
||||
<td>Footer</td>
|
||||
<td>Footer</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{{< highlight html >}}
|
||||
<table class="table">
|
||||
<thead>
|
||||
...
|
||||
</thead>
|
||||
<tbody>
|
||||
...
|
||||
</tbody>
|
||||
<tfoot>
|
||||
...
|
||||
</tfoot>
|
||||
</table>
|
||||
{{< /highlight >}}
|
||||
|
||||
### Captions
|
||||
|
||||
A `<caption>` 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.
|
||||
|
||||
<div class="bd-example">
|
||||
<table class="table">
|
||||
<caption>List of users</caption>
|
||||
{{< partial "table-content.html" >}}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{{< highlight html >}}
|
||||
<table class="table table-sm">
|
||||
<caption>List of users</caption>
|
||||
<thead>
|
||||
...
|
||||
</thead>
|
||||
<tbody>
|
||||
...
|
||||
</tbody>
|
||||
</table>
|
||||
{{< /highlight >}}
|
||||
|
||||
You can also put the `<caption>` on the top of the table with `.caption-top`.
|
||||
|
||||
{{< example >}}
|
||||
<table class="table caption-top">
|
||||
<caption>List of users</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{{< /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|-xxl}`.
|
||||
|
||||
{{< callout warning >}}
|
||||
##### 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.
|
||||
{{< /callout >}}
|
||||
|
||||
### Always responsive
|
||||
|
||||
Across every breakpoint, use `.table-responsive` for horizontally scrolling tables.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{< highlight html >}}
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
...
|
||||
</table>
|
||||
</div>
|
||||
{{< /highlight >}}
|
||||
|
||||
### Breakpoint specific
|
||||
|
||||
Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` 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.**
|
||||
|
||||
{{< tables.inline >}}
|
||||
{{ range $.Site.Data.breakpoints }}
|
||||
{{ if not (eq . "xs") }}
|
||||
<div class="bd-example">
|
||||
<div class="table-responsive{{ .abbr }}">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{{ end -}}
|
||||
{{- end -}}
|
||||
{{< /tables.inline >}}
|
||||
|
||||
{{< highlight html >}}
|
||||
{{< tables.inline >}}
|
||||
{{- range $.Site.Data.breakpoints -}}
|
||||
{{- if not (eq . "xs") }}
|
||||
<div class="table-responsive{{ .abbr }}">
|
||||
<table class="table">
|
||||
...
|
||||
</table>
|
||||
</div>
|
||||
{{ end -}}
|
||||
{{- end -}}
|
||||
{{< /tables.inline >}}
|
||||
{{< /highlight >}}
|
||||
|
||||
## Customizing in Sass
|
||||
|
||||
- The factor variables (`$table-striped-bg-factor`, `$table-active-bg-factor` & `$table-hover-bg-factor`) are used to determine the contrast in table variants.
|
||||
- Apart from the light & dark table variants, theme colors are lightened by the `$table-bg-level` variable.
|
||||
|
||||
{{< scss-docs name="table-variables" file="scss/_variables.scss" >}}
|
||||
@@ -0,0 +1,295 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Typography
|
||||
description: Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
|
||||
group: content
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Global settings
|
||||
|
||||
Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the [textual utility classes]({{< docsref "/utilities/text" >}}).
|
||||
|
||||
- Use a [native font stack]({{< docsref "/content/reboot#native-font-stack" >}}) that selects the best `font-family` for each OS and device.
|
||||
- For a more inclusive and accessible type scale, we assume the browser default root `font-size` (typically 16px) so visitors can customize their browser defaults as needed.
|
||||
- Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the `<body>`.
|
||||
- Set the global link color via `$link-color` and apply link underlines only on `:hover`.
|
||||
- Use `$body-bg` to set a `background-color` on the `<body>` (`#fff` by default).
|
||||
|
||||
These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. Make sure to set `$font-size-base` in `rem`.
|
||||
|
||||
## Headings
|
||||
|
||||
All HTML headings, `<h1>` through `<h6>`, are available.
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Heading</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
{{< markdown >}}`<h1></h1>`{{< /markdown >}}
|
||||
</td>
|
||||
<td><span class="h1">h1. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{< markdown >}}`<h2></h2>`{{< /markdown >}}
|
||||
</td>
|
||||
<td><span class="h2">h2. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{< markdown >}}`<h3></h3>`{{< /markdown >}}
|
||||
</td>
|
||||
<td><span class="h3">h3. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{< markdown >}}`<h4></h4>`{{< /markdown >}}
|
||||
</td>
|
||||
<td><span class="h4">h4. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{< markdown >}}`<h5></h5>`{{< /markdown >}}
|
||||
</td>
|
||||
<td><span class="h5">h5. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{< markdown >}}`<h6></h6>`{{< /markdown >}}
|
||||
</td>
|
||||
<td><span class="h6">h6. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{{< highlight html >}}
|
||||
<h1>h1. Bootstrap heading</h1>
|
||||
<h2>h2. Bootstrap heading</h2>
|
||||
<h3>h3. Bootstrap heading</h3>
|
||||
<h4>h4. Bootstrap heading</h4>
|
||||
<h5>h5. Bootstrap heading</h5>
|
||||
<h6>h6. Bootstrap heading</h6>
|
||||
{{< /highlight >}}
|
||||
|
||||
`.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
|
||||
|
||||
{{< example >}}
|
||||
<p class="h1">h1. Bootstrap heading</p>
|
||||
<p class="h2">h2. Bootstrap heading</p>
|
||||
<p class="h3">h3. Bootstrap heading</p>
|
||||
<p class="h4">h4. Bootstrap heading</p>
|
||||
<p class="h5">h5. Bootstrap heading</p>
|
||||
<p class="h6">h6. Bootstrap heading</p>
|
||||
{{< /example >}}
|
||||
|
||||
### Customizing headings
|
||||
|
||||
Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.
|
||||
|
||||
{{< example >}}
|
||||
<h3>
|
||||
Fancy display heading
|
||||
<small class="text-muted">With faded secondary text</small>
|
||||
</h3>
|
||||
{{< /example >}}
|
||||
|
||||
## Display headings
|
||||
|
||||
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="display-1 pb-3 mb-3 border-bottom">Display 1</div>
|
||||
<div class="display-2 pb-3 mb-3 border-bottom">Display 2</div>
|
||||
<div class="display-3 pb-3 mb-3 border-bottom">Display 3</div>
|
||||
<div class="display-4 pb-3 mb-3 border-bottom">Display 4</div>
|
||||
<div class="display-5 pb-3 mb-3 border-bottom">Display 5</div>
|
||||
<div class="display-6">Display 6</div>
|
||||
</div>
|
||||
|
||||
{{< highlight html >}}
|
||||
<h1 class="display-1">Display 1</h1>
|
||||
<h1 class="display-2">Display 2</h1>
|
||||
<h1 class="display-3">Display 3</h1>
|
||||
<h1 class="display-4">Display 4</h1>
|
||||
<h1 class="display-5">Display 5</h1>
|
||||
<h1 class="display-6">Display 6</h1>
|
||||
{{< /highlight >}}
|
||||
|
||||
Display headings are configured via the `$display-font-sizes` Sass map and two variables, `$display-font-weight` and `$display-line-height`.
|
||||
|
||||
{{< scss-docs name="display-headings" file="scss/_variables.scss" >}}
|
||||
|
||||
## Lead
|
||||
|
||||
Make a paragraph stand out by adding `.lead`.
|
||||
|
||||
{{< example >}}
|
||||
<p class="lead">
|
||||
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
|
||||
</p>
|
||||
{{< /example >}}
|
||||
|
||||
## Inline text elements
|
||||
|
||||
Styling for common inline HTML5 elements.
|
||||
|
||||
{{< example >}}
|
||||
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
|
||||
<p><del>This line of text is meant to be treated as deleted text.</del></p>
|
||||
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
|
||||
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
|
||||
<p><u>This line of text will render as underlined</u></p>
|
||||
<p><small>This line of text is meant to be treated as fine print.</small></p>
|
||||
<p><strong>This line rendered as bold text.</strong></p>
|
||||
<p><em>This line rendered as italicized text.</em></p>
|
||||
{{< /example >}}
|
||||
|
||||
Beware that those tags should be used for semantic purpose:
|
||||
|
||||
* `<mark>` represents text which is marked or highlighted for reference or notation purposes.
|
||||
* `<small>` represents side-comments and small print, like copyright and legal text.
|
||||
* `<s>` represents element that are no longer relevant or no longer accurate.
|
||||
* `<u>` represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
|
||||
|
||||
If you want to style your text, you should use the following classes instead:
|
||||
|
||||
* `.mark` will apply the same styles as `<mark>`.
|
||||
* `.small` will apply the same styles as `<small>`.
|
||||
* `.text-decoration-underline` will apply the same styles as `<u>`.
|
||||
* `.text-decoration-line-through` will apply the same styles as `<s>`.
|
||||
|
||||
While not shown above, feel free to use `<b>` and `<i>` in HTML5. `<b>` is meant to highlight words or phrases without conveying additional importance, while `<i>` is mostly for voice, technical terms, etc.
|
||||
|
||||
## Text utilities
|
||||
|
||||
Change text alignment, transform, style, weight, line-height, decoration and color with our [text utilities]({{< docsref "/utilities/text" >}}) and [color utilities]({{< docsref "/utilities/colors" >}}).
|
||||
|
||||
## Abbreviations
|
||||
|
||||
Stylized implementation of HTML's `<abbr>` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.
|
||||
|
||||
Add `.initialism` to an abbreviation for a slightly smaller font-size.
|
||||
|
||||
{{< example >}}
|
||||
<p><abbr title="attribute">attr</abbr></p>
|
||||
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
|
||||
{{< /example >}}
|
||||
|
||||
## Blockquotes
|
||||
|
||||
For quoting blocks of content from another source within your document. Wrap `<blockquote class="blockquote">` around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote.
|
||||
|
||||
{{< example >}}
|
||||
<blockquote class="blockquote">
|
||||
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
</blockquote>
|
||||
{{< /example >}}
|
||||
|
||||
### Naming a source
|
||||
|
||||
Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the name of the source work in `<cite>`.
|
||||
|
||||
{{< example >}}
|
||||
<blockquote class="blockquote">
|
||||
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
{{< /example >}}
|
||||
|
||||
### Alignment
|
||||
|
||||
Use text utilities as needed to change the alignment of your blockquote.
|
||||
|
||||
{{< example >}}
|
||||
<blockquote class="blockquote text-center">
|
||||
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
{{< /example >}}
|
||||
|
||||
{{< example >}}
|
||||
<blockquote class="blockquote text-right">
|
||||
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
{{< /example >}}
|
||||
|
||||
## Lists
|
||||
|
||||
### Unstyled
|
||||
|
||||
Remove the default `list-style` and left margin on list items (immediate children only). **This only applies to immediate children list items**, meaning you will need to add the class for any nested lists as well.
|
||||
|
||||
{{< example >}}
|
||||
<ul class="list-unstyled">
|
||||
<li>Lorem ipsum dolor sit amet</li>
|
||||
<li>Consectetur adipiscing elit</li>
|
||||
<li>Integer molestie lorem at massa</li>
|
||||
<li>Facilisis in pretium nisl aliquet</li>
|
||||
<li>Nulla volutpat aliquam velit
|
||||
<ul>
|
||||
<li>Phasellus iaculis neque</li>
|
||||
<li>Purus sodales ultricies</li>
|
||||
<li>Vestibulum laoreet porttitor sem</li>
|
||||
<li>Ac tristique libero volutpat at</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Faucibus porta lacus fringilla vel</li>
|
||||
<li>Aenean sit amet erat nunc</li>
|
||||
<li>Eget porttitor lorem</li>
|
||||
</ul>
|
||||
{{< /example >}}
|
||||
|
||||
### Inline
|
||||
|
||||
Remove a list's bullets and apply some light `margin` with a combination of two classes, `.list-inline` and `.list-inline-item`.
|
||||
|
||||
{{< example >}}
|
||||
<ul class="list-inline">
|
||||
<li class="list-inline-item">Lorem ipsum</li>
|
||||
<li class="list-inline-item">Phasellus iaculis</li>
|
||||
<li class="list-inline-item">Nulla volutpat</li>
|
||||
</ul>
|
||||
{{< /example >}}
|
||||
|
||||
### Description list alignment
|
||||
|
||||
Align terms and descriptions horizontally by using our grid system's predefined classes (or semantic mixins). For longer terms, you can optionally add a `.text-truncate` class to truncate the text with an ellipsis.
|
||||
|
||||
{{< example >}}
|
||||
<dl class="row">
|
||||
<dt class="col-sm-3">Description lists</dt>
|
||||
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
|
||||
|
||||
<dt class="col-sm-3">Euismod</dt>
|
||||
<dd class="col-sm-9">
|
||||
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
|
||||
<p>Donec id elit non mi porta gravida at eget metus.</p>
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-3">Malesuada porta</dt>
|
||||
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
|
||||
|
||||
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
|
||||
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
|
||||
|
||||
<dt class="col-sm-3">Nesting</dt>
|
||||
<dd class="col-sm-9">
|
||||
<dl class="row">
|
||||
<dt class="col-sm-4">Nested definition list</dt>
|
||||
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
|
||||
</dl>
|
||||
</dd>
|
||||
</dl>
|
||||
{{< /example >}}
|
||||
|
||||
## Responsive font sizes
|
||||
|
||||
In Bootstrap 5, we've enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the [RFS page]({{< docsref "/getting-started/rfs" >}}) to find out how this works.
|
||||
Reference in New Issue
Block a user