From 54fa28441c5f0bdcd9687615f4a6b7a0fab024a3 Mon Sep 17 00:00:00 2001 From: Mario Vavti Date: Fri, 7 Sep 2018 11:26:02 +0200 Subject: install bootstrap via composer --- .../twbs/bootstrap/site/docs/4.1/content/code.md | 55 ++ .../bootstrap/site/docs/4.1/content/figures.md | 28 + .../twbs/bootstrap/site/docs/4.1/content/images.md | 84 +++ .../twbs/bootstrap/site/docs/4.1/content/reboot.md | 364 +++++++++ .../twbs/bootstrap/site/docs/4.1/content/tables.md | 831 +++++++++++++++++++++ .../bootstrap/site/docs/4.1/content/typography.md | 331 ++++++++ 6 files changed, 1693 insertions(+) create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/content/code.md create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/content/figures.md create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/content/images.md create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/content/reboot.md create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/content/tables.md create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/content/typography.md (limited to 'vendor/twbs/bootstrap/site/docs/4.1/content') diff --git a/vendor/twbs/bootstrap/site/docs/4.1/content/code.md b/vendor/twbs/bootstrap/site/docs/4.1/content/code.md new file mode 100644 index 000000000..d1ce12ccd --- /dev/null +++ b/vendor/twbs/bootstrap/site/docs/4.1/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 ``. Be sure to escape HTML angle brackets. + +{% capture example %} +For example, <section> should be wrapped as inline. +{% endcapture %} +{% include example.html content=example %} + +## Code blocks + +Use `
`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 %}
+
<p>Sample text here...</p>
+<p>And another line of sample text here...</p>
+
+{% endcapture %} +{% include example.html content=example %} + +## Variables + +For indicating variables use the `` tag. + +{% capture example %} +y = mx + b +{% endcapture %} +{% include example.html content=example %} + +## User input + +Use the `` to indicate input that is typically entered via keyboard. + +{% capture example %} +To switch directories, type cd followed by the name of the directory.
+To edit settings, press ctrl + , +{% endcapture %} +{% include example.html content=example %} + +## Sample output + +For indicating sample output from a program use the `` tag. + +{% capture example %} +This text is meant to be treated as sample output from a computer program. +{% endcapture %} +{% include example.html content=example %} diff --git a/vendor/twbs/bootstrap/site/docs/4.1/content/figures.md b/vendor/twbs/bootstrap/site/docs/4.1/content/figures.md new file mode 100644 index 000000000..7041997ba --- /dev/null +++ b/vendor/twbs/bootstrap/site/docs/4.1/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 `
`. + +Use the included `.figure` , `.figure-img` and `.figure-caption` classes to provide some baseline styles for the HTML5 `
` and `
` elements. Images in figures have no explicit size, so be sure to add the `.img-fluid` class to your `` to make it responsive. + +{% capture example %} +
+ A generic square placeholder image with rounded corners in a figure. +
A caption for the above image.
+
+{% 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 %} +
+ A generic square placeholder image with rounded corners in a figure. +
A caption for the above image.
+
+{% endcapture %} +{% include example.html content=example %} diff --git a/vendor/twbs/bootstrap/site/docs/4.1/content/images.md b/vendor/twbs/bootstrap/site/docs/4.1/content/images.md new file mode 100644 index 000000000..49576da9d --- /dev/null +++ b/vendor/twbs/bootstrap/site/docs/4.1/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. + +
+ Generic responsive image +
+ +{% highlight html %} +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. + +
+ A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera +
+ +{% highlight html %} +... +{% 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). + +
+ A generic square placeholder image with rounded corners + A generic square placeholder image with rounded corners +
+ +{% highlight html %} +... +... +{% endhighlight %} + +
+ A generic square placeholder image with rounded corners +
+ +{% highlight html %} +... +{% endhighlight %} + +
+
+ A generic square placeholder image with rounded corners +
+
+ +{% highlight html %} +
+ ... +
+{% endhighlight %} + + +## Picture + +If you are using the `` element to specify multiple `` elements for a specific ``, make sure to add the `.img-*` classes to the `` and not to the `` tag. + +{% highlight html %} +​ + + ... + +{% endhighlight %} diff --git a/vendor/twbs/bootstrap/site/docs/4.1/content/reboot.md b/vendor/twbs/bootstrap/site/docs/4.1/content/reboot.md new file mode 100644 index 000000000..0b9375d0a --- /dev/null +++ b/vendor/twbs/bootstrap/site/docs/4.1/content/reboot.md @@ -0,0 +1,364 @@ +--- +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.1/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 `` 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 `` and `` 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 ``, but `16px` is assumed (the browser default). `font-size: 1rem` is applied on the `` for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach. +- The `` 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 `` 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 OS X and iOS (San Francisco) + -apple-system, + // Chrome < 56 for OS X (San Francisco) + BlinkMacSystemFont, + // Windows + "Segoe UI", + // Android + "Roboto", + // Basic web fallback + "Helvetica Neue", Arial, sans-serif, + // Emoji fonts + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; +{% endhighlight %} + +This `font-family` is applied to the `` 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., `

`—and `

` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing. + +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HeadingExample
+ {{ "`

`" | markdownify }} +
h1. Bootstrap heading
+ {{ "`

`" | markdownify }} +
h2. Bootstrap heading
+ {{ "`

`" | markdownify }} +
h3. Bootstrap heading
+ {{ "`

`" | markdownify }} +
h4. Bootstrap heading
+ {{ "`
`" | markdownify }} +
h5. Bootstrap heading
+ {{ "`
`" | markdownify }} +
h6. Bootstrap heading
+ +## Lists + +All lists—`
    `, `
      `, and `
      `—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`. + +
      +{% 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 }} +
      + +For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `
      `s reset `margin-left` to `0` and add `margin-bottom: .5rem`. `
      `s are **bolded**. + +
      +
      +
      Description lists
      +
      A description list is perfect for defining terms.
      +
      Euismod
      +
      Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
      +
      Donec id elit non mi porta gravida at eget metus.
      +
      Malesuada porta
      +
      Etiam porta sem malesuada magna mollis euismod.
      +
      +
      + +## Preformatted text + +The `
      ` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`.
      +
      +
      +
      +.example-element {
      +  margin-bottom: 1rem;
      +}
      +
      +
      + +## Tables + +Tables are slightly adjusted to style ``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/). + +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      + This is an example table, and this is its caption to describe the contents. +
      Table headingTable headingTable headingTable heading
      Table cellTable cellTable cellTable cell
      Table cellTable cellTable cellTable cell
      Table cellTable cellTable cellTable cell
      +
      + +## Forms + +Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes: + +- `
      `s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs. +- ``s, like fieldsets, have also been restyled to be displayed as a heading of sorts. +- `
      + + +## Misc elements + +### Address + +The `
      ` 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. `
      `s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with `
      `. + +
      +
      + Twitter, Inc.
      + 1355 Market St, Suite 900
      + San Francisco, CA 94103
      + P: (123) 456-7890 +
      + +
      + Full Name
      + first.last@example.com +
      +
      + +### Blockquote + +The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem` for something more consistent with other elements. + +
      +
      +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      +
      Someone famous in Source Title
      +
      +
      + +### Inline elements + +The `` element receives basic styling to make it stand out amongst paragraph text. + +
      + Nulla attr vitae elit libero, a pharetra augue. +
      + +### 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. + +
      +
      + Some details +

      More info about the details.

      +
      + +
      + Even more details +

      Here are even more details about the details.

      +
      +
      + +## 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 %} + +{% 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.1/content/tables.md b/vendor/twbs/bootstrap/site/docs/4.1/content/tables.md new file mode 100644 index 000000000..8799d47f2 --- /dev/null +++ b/vendor/twbs/bootstrap/site/docs/4.1/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 ``, then extend with custom styles or our various included modifier classes. + +Using the most basic table markup, here's how `.table`-based tables look in Bootstrap. **All table styles are inherited in Bootstrap 4**, meaning any nested tables will be styled in the same manner as the parent. + +{% capture example %} +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #FirstLastHandle
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larrythe Bird@twitter
      +{% endcapture %} +{% include example.html content=example %} + +You can also invert the colors—with light text on dark backgrounds—with `.table-dark`. + +{% capture example %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #FirstLastHandle
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larrythe Bird@twitter
      +{% endcapture %} +{% include example.html content=example %} + +## Table head options + +Similar to tables and dark tables, use the modifier classes `.thead-light` or `.thead-dark` to make ``s appear light or dark gray. + +{% capture example %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #FirstLastHandle
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larrythe Bird@twitter
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #FirstLastHandle
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larrythe Bird@twitter
      +{% endcapture %} +{% include example.html content=example %} + +## Striped rows + +Use `.table-striped` to add zebra-striping to any table row within the ``. + +{% capture example %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #FirstLastHandle
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larrythe Bird@twitter
      +{% endcapture %} +{% include example.html content=example %} + +{% capture example %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #FirstLastHandle
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larrythe Bird@twitter
      +{% endcapture %} +{% include example.html content=example %} + +## Bordered table + +Add `.table-bordered` for borders on all sides of the table and cells. + +{% capture example %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #FirstLastHandle
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larry the Bird@twitter
      +{% endcapture %} +{% include example.html content=example %} + +{% capture example %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #FirstLastHandle
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larry the Bird@twitter
      +{% endcapture %} +{% include example.html content=example %} + +## Borderless table + +Add `.table-borderless` for a table without borders. + +{% capture example %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #FirstLastHandle
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larry the Bird@twitter
      +{% endcapture %} +{% include example.html content=example %} + +`.table-borderless` can also be used on dark tables. + +{% capture example %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #FirstLastHandle
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larry the Bird@twitter
      +{% endcapture %} +{% include example.html content=example %} + +## Hoverable rows + +Add `.table-hover` to enable a hover state on table rows within a ``. + +{% capture example %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #FirstLastHandle
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larry the Bird@twitter
      +{% endcapture %} +{% include example.html content=example %} + +{% capture example %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #FirstLastHandle
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larry the Bird@twitter
      +{% endcapture %} +{% include example.html content=example %} + +## Small table + +Add `.table-sm` to make tables more compact by cutting cell padding in half. + +{% capture example %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #FirstLastHandle
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larry the Bird@twitter
      +{% endcapture %} +{% include example.html content=example %} + +{% capture example %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #FirstLastHandle
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larry the Bird@twitter
      +{% endcapture %} +{% include example.html content=example %} + +## Contextual classes + +Use contextual classes to color table rows or individual cells. + +
      + + + + + + + + + + + + + + + + + + + + + {% for color in site.data.theme-colors %} + + + + + {% endfor %} + +
      ClassHeadingHeading
      ActiveCellCell
      DefaultCellCell
      {{ color.name | capitalize }}CellCell
      +
      + +{% highlight html %} + +... +{% for color in site.data.theme-colors %} +...{% endfor %} + + + + ... + {% for color in site.data.theme-colors %} + ...{% endfor %} + +{% endhighlight %} + +Regular table background variants are not available with the dark table, however, you may use [text or background utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) to achieve similar styles. + +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #HeadingHeading
      1CellCell
      2CellCell
      3CellCell
      4CellCell
      5CellCell
      6CellCell
      7CellCell
      8CellCell
      9CellCell
      +
      + +{% highlight html %} + +... +... +... +... +... + + + + ... + ... + ... + ... + ... + +{% endhighlight %} + +{% include callout-warning-color-assistive-technologies.md %} + +Create responsive tables by wrapping any `.table` with `.table-responsive{-sm|-md|-lg|-xl}`, making the table scroll horizontally at each `max-width` breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively. + +{% include callout-info-mediaqueries-breakpoints.md %} + +## Captions + +A `` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it. + +{% capture example %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      List of users
      #FirstLastHandle
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larrythe Bird@twitter
      +{% endcapture %} +{% include example.html content=example %} + +## Responsive tables + +Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl}`. + +{% capture callout %} +##### Vertical clipping/truncation + +Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets. +{% endcapture %} +{% include callout.html content=callout type="warning" %} + +### Always responsive + +Across every breakpoint, use `.table-responsive` for horizontally scrolling tables. + +
      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
      1CellCellCellCellCellCellCellCellCell
      2CellCellCellCellCellCellCellCellCell
      3CellCellCellCellCellCellCellCellCell
      +
      +
      + +{% highlight html %} +
      + + ... +
      +
      +{% endhighlight %} + +### Breakpoint specific + +Use `.table-responsive{-sm|-md|-lg|-xl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally. + +**These tables may appear broken until their responsive styles apply at specific viewport widths.** + +{% for bp in site.data.breakpoints %}{% unless bp.breakpoint == "xs" %} +
      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
      1CellCellCellCellCellCellCellCell
      2CellCellCellCellCellCellCellCell
      3CellCellCellCellCellCellCellCell
      +
      +
      +{% highlight html %} +
      + + ... +
      +
      +{% endhighlight %} +{% endunless %}{% endfor %} diff --git a/vendor/twbs/bootstrap/site/docs/4.1/content/typography.md b/vendor/twbs/bootstrap/site/docs/4.1/content/typography.md new file mode 100644 index 000000000..795f807b6 --- /dev/null +++ b/vendor/twbs/bootstrap/site/docs/4.1/content/typography.md @@ -0,0 +1,331 @@ +--- +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 ``. +- 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 `` (`#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, `

      ` through `

      `, are available. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      HeadingExample
      + {{ "`

      `" | markdownify }} +
      h1. Bootstrap heading
      + {{ "`

      `" | markdownify }} +
      h2. Bootstrap heading
      + {{ "`

      `" | markdownify }} +
      h3. Bootstrap heading
      + {{ "`

      `" | markdownify }} +
      h4. Bootstrap heading
      + {{ "`
      `" | markdownify }} +
      h5. Bootstrap heading
      + {{ "`
      `" | markdownify }} +
      h6. Bootstrap heading
      + +{% highlight html %} +

      h1. Bootstrap heading

      +

      h2. Bootstrap heading

      +

      h3. Bootstrap heading

      +

      h4. Bootstrap heading

      +
      h5. Bootstrap heading
      +
      h6. Bootstrap heading
      +{% 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 %} +

      h1. Bootstrap heading

      +

      h2. Bootstrap heading

      +

      h3. Bootstrap heading

      +

      h4. Bootstrap heading

      +

      h5. Bootstrap heading

      +

      h6. Bootstrap heading

      +{% endcapture %} +{% include example.html content=example %} + +### Customizing headings + +Use the included utility classes to recreate the small secondary heading text from Bootstrap 3. + +
      + + Fancy display heading + With faded secondary text + +
      + +{% highlight html %} +

      + Fancy display heading + With faded secondary text +

      +{% endhighlight %} + +## 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. + +
      + + + + + + + + + + + + + + + +
      Display 1
      Display 2
      Display 3
      Display 4
      +
      + +{% highlight html %} +

      Display 1

      +

      Display 2

      +

      Display 3

      +

      Display 4

      +{% endhighlight %} + +## Lead + +Make a paragraph stand out by adding `.lead`. + +{% capture example %} +

      + Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. +

      +{% endcapture %} +{% include example.html content=example %} + +## Inline text elements + +Styling for common inline HTML5 elements. + +{% capture example %} +

      You can use the mark tag to highlight text.

      +

      This line of text is meant to be treated as deleted text.

      +

      This line of text is meant to be treated as no longer accurate.

      +

      This line of text is meant to be treated as an addition to the document.

      +

      This line of text will render as underlined

      +

      This line of text is meant to be treated as fine print.

      +

      This line rendered as bold text.

      +

      This line rendered as italicized text.

      +{% endcapture %} +{% include example.html content=example %} + +`.mark` and `.small` classes are also available to apply the same styles as `` and `` while avoiding any unwanted semantic implications that the tags would bring. + +While not shown above, feel free to use `` and `` in HTML5. `` is meant to highlight words or phrases without conveying additional importance while `` 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 `` 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 %} +

      attr

      +

      HTML

      +{% endcapture %} +{% include example.html content=example %} + +## Blockquotes + +For quoting blocks of content from another source within your document. Wrap `
      ` around any HTML as the quote. + +{% capture example %} +
      +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      +
      +{% endcapture %} +{% include example.html content=example %} + +### Naming a source + +Add a `