diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site/docs/4.5/content')
6 files changed, 1679 insertions, 0 deletions
diff --git a/vendor/twbs/bootstrap/site/docs/4.5/content/code.md b/vendor/twbs/bootstrap/site/docs/4.5/content/code.md new file mode 100644 index 000000000..d1ce12ccd --- /dev/null +++ b/vendor/twbs/bootstrap/site/docs/4.5/content/code.md @@ -0,0 +1,55 @@ +--- +layout: docs +title: Code +description: Documentation and examples for displaying inline and multiline blocks of code with Bootstrap. +group: content +toc: true +--- + +## Inline code + +Wrap inline snippets of code with `<code>`. Be sure to escape HTML angle brackets. + +{% capture example %} +For example, <code><section></code> should be wrapped as inline. +{% endcapture %} +{% include example.html content=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. You may optionally add the `.pre-scrollable` class, which will set a max-height of 340px and provide a y-axis scrollbar. + +{% capture example %} +<pre><code><p>Sample text here...</p> +<p>And another line of sample text here...</p> +</code></pre> +{% endcapture %} +{% include example.html content=example %} + +## Variables + +For indicating variables use the `<var>` tag. + +{% capture example %} +<var>y</var> = <var>m</var><var>x</var> + <var>b</var> +{% endcapture %} +{% include example.html content=example %} + +## User input + +Use the `<kbd>` to indicate input that is typically entered via keyboard. + +{% capture 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> +{% endcapture %} +{% include example.html content=example %} + +## Sample output + +For indicating sample output from a program use the `<samp>` tag. + +{% capture example %} +<samp>This text is meant to be treated as sample output from a computer program.</samp> +{% endcapture %} +{% include example.html content=example %} diff --git a/vendor/twbs/bootstrap/site/docs/4.5/content/figures.md b/vendor/twbs/bootstrap/site/docs/4.5/content/figures.md new file mode 100644 index 000000000..a647fc1d0 --- /dev/null +++ b/vendor/twbs/bootstrap/site/docs/4.5/content/figures.md @@ -0,0 +1,28 @@ +--- +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. + +{% capture example %} +<figure class="figure"> + {% include icons/placeholder.svg width="400" height="300" class="figure-img img-fluid rounded" %} + <figcaption class="figure-caption">A caption for the above image.</figcaption> +</figure> +{% endcapture %} +{% include example.html content=example %} + +Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment). + +{% capture example %} +<figure class="figure"> + {% include icons/placeholder.svg width="400" height="300" class="figure-img img-fluid rounded" %} + <figcaption class="figure-caption text-right">A caption for the above image.</figcaption> +</figure> +{% endcapture %} +{% include example.html content=example %} diff --git a/vendor/twbs/bootstrap/site/docs/4.5/content/images.md b/vendor/twbs/bootstrap/site/docs/4.5/content/images.md new file mode 100644 index 000000000..3ff822bed --- /dev/null +++ b/vendor/twbs/bootstrap/site/docs/4.5/content/images.md @@ -0,0 +1,84 @@ +--- +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`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element. + +<div class="bd-example"> + {% include icons/placeholder.svg width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" %} +</div> + +{% highlight html %} +<img src="..." class="img-fluid" alt="Responsive image"> +{% endhighlight %} + +{% capture callout %} +##### SVG images and IE 10 + +In Internet Explorer 10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically. +{% endcapture %} +{% include callout.html content=callout type="warning" %} + +## Image thumbnails + +In addition to our [border-radius utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/borders/), you can use `.img-thumbnail` to give an image a rounded 1px border appearance. + +<div class="bd-example bd-example-images"> + {% include icons/placeholder.svg 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" %} +</div> + +{% highlight html %} +<img src="..." alt="..." class="img-thumbnail"> +{% endhighlight %} + +## Aligning images + +Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/float/) or [text alignment classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/#horizontal-centering). + +<div class="bd-example bd-example-images"> + {% include icons/placeholder.svg width="200" height="200" class="rounded float-left" %} + {% include icons/placeholder.svg width="200" height="200" class="rounded float-right" %} +</div> + +{% highlight html %} +<img src="..." class="rounded float-left" alt="..."> +<img src="..." class="rounded float-right" alt="..."> +{% endhighlight %} + +<div class="bd-example bd-example-images"> + {% include icons/placeholder.svg width="200" height="200" class="rounded mx-auto d-block" %} +</div> + +{% highlight html %} +<img src="..." class="rounded mx-auto d-block" alt="..."> +{% endhighlight %} + +<div class="bd-example bd-example-images"> + <div class="text-center"> + {% include icons/placeholder.svg width="200" height="200" class="rounded" %} + </div> +</div> + +{% highlight html %} +<div class="text-center"> + <img src="..." class="rounded" alt="..."> +</div> +{% endhighlight %} + + +## 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> +{% endhighlight %} diff --git a/vendor/twbs/bootstrap/site/docs/4.5/content/reboot.md b/vendor/twbs/bootstrap/site/docs/4.5/content/reboot.md new file mode 100644 index 000000000..2f0904f3f --- /dev/null +++ b/vendor/twbs/bootstrap/site/docs/4.5/content/reboot.md @@ -0,0 +1,380 @@ +--- +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 +redirect_from: "/docs/4.5/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. +- The `<body>` also sets a global `font-family`, `line-height`, and `text-align`. 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 + +The default web fonts (Helvetica Neue, Helvetica, and Arial) have been dropped in Bootstrap 4 and replaced with a "native font stack" for optimum text rendering on every device and OS. Read more about [native font stacks in this *Smashing Magazine* article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/). + +{% highlight sass %} +$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; +{% endhighlight %} + +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> + <thead> + <tr> + <th>Heading</th> + <th>Example</th> + </tr> + </thead> + <tbody> + <tr> + <td> + {{ "`<h1></h1>`" | markdownify }} + </td> + <td><span class="h1">h1. Bootstrap heading</span></td> + </tr> + <tr> + <td> + {{ "`<h2></h2>`" | markdownify }} + </td> + <td><span class="h2">h2. Bootstrap heading</span></td> + </tr> + <tr> + <td> + {{ "`<h3></h3>`" | markdownify }} + </td> + <td><span class="h3">h3. Bootstrap heading</span></td> + </tr> + <tr> + <td> + {{ "`<h4></h4>`" | markdownify }} + </td> + <td><span class="h4">h4. Bootstrap heading</span></td> + </tr> + <tr> + <td> + {{ "`<h5></h5>`" | markdownify }} + </td> + <td><span class="h5">h5. Bootstrap heading</span></td> + </tr> + <tr> + <td> + {{ "`<h6></h6>`" | markdownify }} + </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`. + +<div class="bd-example"> +{% capture 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 +{% endcapture %} +{{ markdown | markdownify }} +</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> + +## Preformatted text + +The `<pre>` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`. + +<div class="bd-example"> +<pre> +.example-element { + margin-bottom: 1rem; +} +</pre> +</div> + +## 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]({{ site.baseurl }}/docs/{{ site.docs_version }}/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="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="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> + +### Pointers on buttons + +Reboot includes an enhancement for `role="button"` to change the default cursor to `pointer`. Add this attribute to elements to help indicate elements are interactive. This role isn't necessary for `<button>` elements, which get their own `cursor` change. + +{% capture example %} +<span role="button">Non-button element button</span> +{% endcapture %} +{% include example.html content=example %} + +## 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. While `[hidden]` isn't natively supported by IE10, the explicit declaration in our CSS gets around that problem. + +{% highlight html %} +<input type="text" hidden> +{% endhighlight %} + +{% capture callout %} +##### 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. +{% endcapture %} +{% include callout.html content=callout type="warning" %} + +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]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/visibility/) instead. diff --git a/vendor/twbs/bootstrap/site/docs/4.5/content/tables.md b/vendor/twbs/bootstrap/site/docs/4.5/content/tables.md new file mode 100644 index 000000000..8799d47f2 --- /dev/null +++ b/vendor/twbs/bootstrap/site/docs/4.5/content/tables.md @@ -0,0 +1,831 @@ +--- +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 `<table>`, 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 %} +<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> + <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> +{% endcapture %} +{% include example.html content=example %} + +You can also invert the colors—with light text on dark backgrounds—with `.table-dark`. + +{% capture 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> + <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> +{% 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 `<thead>`s appear light or dark gray. + +{% capture example %} +<table class="table"> + <thead class="thead-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> + +<table class="table"> + <thead class="thead-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> +{% endcapture %} +{% include example.html content=example %} + +## Striped rows + +Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`. + +{% capture example %} +<table class="table table-striped"> + <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> +{% endcapture %} +{% include example.html content=example %} + +{% capture example %} +<table class="table table-striped 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> + <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> +{% endcapture %} +{% include example.html content=example %} + +## Bordered table + +Add `.table-bordered` for borders on all sides of the table and cells. + +{% capture example %} +<table class="table 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> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +{% endcapture %} +{% include example.html content=example %} + +{% capture example %} +<table class="table table-bordered 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> + <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">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +{% endcapture %} +{% include example.html content=example %} + +## Borderless table + +Add `.table-borderless` for a table without borders. + +{% capture example %} +<table class="table table-borderless"> + <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 colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +{% endcapture %} +{% include example.html content=example %} + +`.table-borderless` can also be used on dark tables. + +{% capture example %} +<table class="table table-borderless 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> + <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">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +{% endcapture %} +{% include example.html content=example %} + +## Hoverable rows + +Add `.table-hover` to enable a hover state on table rows within a `<tbody>`. + +{% capture example %} +<table class="table table-hover"> + <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 colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +{% endcapture %} +{% include example.html content=example %} + +{% capture example %} +<table class="table table-hover 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> + <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">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +{% endcapture %} +{% include example.html content=example %} + +## Small table + +Add `.table-sm` to make tables more compact by cutting cell padding in half. + +{% capture example %} +<table class="table table-sm"> + <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 colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +{% endcapture %} +{% include example.html content=example %} + +{% capture example %} +<table class="table table-sm 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> + <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">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +{% endcapture %} +{% include example.html content=example %} + +## Contextual classes + +Use contextual classes to color 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 class="table-active"> + <th scope="row">Active</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">Default</th> + <td>Cell</td> + <td>Cell</td> + </tr> + + {% for color in site.data.theme-colors %} + <tr class="table-{{ color.name }}"> + <th scope="row">{{ color.name | capitalize }}</th> + <td>Cell</td> + <td>Cell</td> + </tr>{% endfor %} + </tbody> + </table> +</div> + +{% highlight html %} +<!-- On rows --> +<tr class="table-active">...</tr> +{% for color in site.data.theme-colors %} +<tr class="table-{{ color.name }}">...</tr>{% endfor %} + +<!-- On cells (`td` or `th`) --> +<tr> + <td class="table-active">...</td> + {% for color in site.data.theme-colors %} + <td class="table-{{ color.name }}">...</td>{% endfor %} +</tr> +{% 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. + +<div class="bd-example"> + <table class="table table-dark"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + </tr> + </thead> + <tbody> + <tr class="bg-primary"> + <th scope="row">1</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr class="bg-success"> + <th scope="row">3</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">4</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr class="bg-info"> + <th scope="row">5</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">6</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr class="bg-warning"> + <th scope="row">7</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">8</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr class="bg-danger"> + <th scope="row">9</th> + <td>Cell</td> + <td>Cell</td> + </tr> + </tbody> + </table> +</div> + +{% highlight html %} +<!-- On rows --> +<tr class="bg-primary">...</tr> +<tr class="bg-success">...</tr> +<tr class="bg-warning">...</tr> +<tr class="bg-danger">...</tr> +<tr class="bg-info">...</tr> + +<!-- On cells (`td` or `th`) --> +<tr> + <td class="bg-primary">...</td> + <td class="bg-success">...</td> + <td class="bg-warning">...</td> + <td class="bg-danger">...</td> + <td class="bg-info">...</td> +</tr> +{% 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 `<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. + +{% capture example %} +<table class="table"> + <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> +{% 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. + +<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> +{% 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" %} +<div class="bd-example"> +<div class="table-responsive{{ bp.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> +{% highlight html %} +<div class="table-responsive{{ bp.abbr }}"> + <table class="table"> + ... + </table> +</div> +{% endhighlight %} +{% endunless %}{% endfor %} diff --git a/vendor/twbs/bootstrap/site/docs/4.5/content/typography.md b/vendor/twbs/bootstrap/site/docs/4.5/content/typography.md new file mode 100644 index 000000000..2d53fe640 --- /dev/null +++ b/vendor/twbs/bootstrap/site/docs/4.5/content/typography.md @@ -0,0 +1,301 @@ +--- +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]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/). + +- Use a [native font stack]({{ site.baseurl }}/docs/{{ site.docs_version }}/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> + <thead> + <tr> + <th>Heading</th> + <th>Example</th> + </tr> + </thead> + <tbody> + <tr> + <td> + {{ "`<h1></h1>`" | markdownify }} + </td> + <td><span class="h1">h1. Bootstrap heading</span></td> + </tr> + <tr> + <td> + {{ "`<h2></h2>`" | markdownify }} + </td> + <td><span class="h2">h2. Bootstrap heading</span></td> + </tr> + <tr> + <td> + {{ "`<h3></h3>`" | markdownify }} + </td> + <td><span class="h3">h3. Bootstrap heading</span></td> + </tr> + <tr> + <td> + {{ "`<h4></h4>`" | markdownify }} + </td> + <td><span class="h4">h4. Bootstrap heading</span></td> + </tr> + <tr> + <td> + {{ "`<h5></h5>`" | markdownify }} + </td> + <td><span class="h5">h5. Bootstrap heading</span></td> + </tr> + <tr> + <td> + {{ "`<h6></h6>`" | markdownify }} + </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> +{% endhighlight %} + +`.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. + +{% capture 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> +{% endcapture %} +{% include example.html content=example %} + +### Customizing headings + +Use the included utility classes to recreate the small secondary heading text from Bootstrap 3. + +{% capture example %} +<h3> + Fancy display heading + <small class="text-muted">With faded secondary text</small> +</h3> +{% endcapture %} +{% include example.html content=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. Keep in mind these headings are not responsive by default, but it's possible to enable [responsive font sizes](#responsive-font-sizes). + +<div class="bd-example bd-example-type"> + <table class="table"> + <tbody> + <tr> + <td><span class="display-1">Display 1</span></td> + </tr> + <tr> + <td><span class="display-2">Display 2</span></td> + </tr> + <tr> + <td><span class="display-3">Display 3</span></td> + </tr> + <tr> + <td><span class="display-4">Display 4</span></td> + </tr> + </tbody> + </table> +</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> +{% endhighlight %} + +## Lead + +Make a paragraph stand out by adding `.lead`. + +{% capture example %} +<p class="lead"> + Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. +</p> +{% endcapture %} +{% include example.html content=example %} + +## Inline text elements + +Styling for common inline HTML5 elements. + +{% capture 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> +{% endcapture %} +{% include example.html content=example %} + +`.mark` and `.small` classes are also available to apply the same styles as `<mark>` and `<small>` while avoiding any unwanted semantic implications that the tags would bring. + +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, and color with our [text utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/) and [color utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/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. + +{% capture example %} +<p><abbr title="attribute">attr</abbr></p> +<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p> +{% endcapture %} +{% include example.html content=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. + +{% capture example %} +<blockquote class="blockquote"> + <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> +</blockquote> +{% endcapture %} +{% include example.html content=example %} + +### Naming a source + +Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the name of the source work in `<cite>`. + +{% capture 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> +{% endcapture %} +{% include example.html content=example %} + +### Alignment + +Use text utilities as needed to change the alignment of your blockquote. + +{% capture 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> +{% endcapture %} +{% include example.html content=example %} + +{% capture 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> +{% endcapture %} +{% include example.html content=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. + +{% capture 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> +{% endcapture %} +{% include example.html content=example %} + +### Inline + +Remove a list's bullets and apply some light `margin` with a combination of two classes, `.list-inline` and `.list-inline-item`. + +{% capture 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> +{% endcapture %} +{% include example.html content=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. + +{% capture 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> +{% endcapture %} +{% include example.html content=example %} + +## Responsive font sizes + +Bootstrap v4.3 ships with the option to enable responsive font sizes, allowing text to scale more naturally across device and viewport sizes. <abbr title="Responsive font sizes">RFS</abbr> can be enabled by changing the `$enable-responsive-font-sizes` Sass variable to `true` and recompiling Bootstrap. + +To support <abbr title="Responsive font sizes">RFS</abbr>, we use a Sass mixin to replace our normal `font-size` properties. Responsive font sizes will be compiled into `calc()` functions with a mix of `rem` and viewport units to enable the responsive scaling behavior. More about <abbr title="Responsive font sizes">RFS</abbr> and its configuration can be found on its [GitHub repository](https://github.com/twbs/rfs/tree/v8.0.4). |