From 544ef3bc588d4180d7ecad15bdacd43813a7c5c5 Mon Sep 17 00:00:00 2001 From: Mario Date: Thu, 12 Dec 2019 14:51:10 +0000 Subject: update composer libs and minor notifications display fixes --- .../bootstrap/site/docs/4.4/content/typography.md | 301 +++++++++++++++++++++ 1 file changed, 301 insertions(+) create mode 100644 vendor/twbs/bootstrap/site/docs/4.4/content/typography.md (limited to 'vendor/twbs/bootstrap/site/docs/4.4/content/typography.md') diff --git a/vendor/twbs/bootstrap/site/docs/4.4/content/typography.md b/vendor/twbs/bootstrap/site/docs/4.4/content/typography.md new file mode 100644 index 000000000..2d53fe640 --- /dev/null +++ b/vendor/twbs/bootstrap/site/docs/4.4/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 ``. +- 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. + +{% capture example %} +

+ Fancy display heading + With faded secondary text +

+{% 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). + +
+ + + + + + + + + + + + + + + +
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 `