diff options
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/code.md | 53 | ||||
| -rw-r--r-- | docs/components/images.md | 91 | ||||
| -rw-r--r-- | docs/components/reboot.md | 286 | ||||
| -rw-r--r-- | docs/components/tables.md | 611 | ||||
| -rw-r--r-- | docs/components/typography.md | 256 |
5 files changed, 0 insertions, 1297 deletions
diff --git a/docs/components/code.md b/docs/components/code.md deleted file mode 100644 index 51c061717..000000000 --- a/docs/components/code.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -layout: page -title: Code -group: components ---- - -Styles for inline code snippets and longer, multiline blocks of code. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - -## Inline code - -Wrap inline snippets of code with `code`. Be sure to escape HTML angle brackets. - -{% example html %} -For example, <code><section></code> should be wrapped as inline. -{% endexample %} - -## Preformatted text - -Or, 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 350px and provide a y-axis scrollbar. - -{% example html %} -<pre><p>Sample text here...</p></pre> -{% endexample %} - -## Variables - -For indicating variables use the `<var>` tag. - -{% example html %} -<var>y</var> = <var>m</var><var>x</var> + <var>b</var> -{% endexample %} - -## User input - -Use the `<kbd>` to indicate input that is typically entered via keyboard. - -{% example html %} -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> -{% endexample %} - -## Sample output - -For indicating blocks sample output from a program use the `<samp>` tag. - -{% example html %} -<samp>This text is meant to be treated as sample output from a computer program.</samp> -{% endexample %} diff --git a/docs/components/images.md b/docs/components/images.md deleted file mode 100644 index 03dce0a46..000000000 --- a/docs/components/images.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -layout: page -title: Images -group: components ---- - -Opt your images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - -## Responsive images - -Images in Bootstrap are made responsive with `.img-responsive`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element. - -<div class="bd-example"> - <img data-src="holder.js/100%x250" class="img-responsive" alt="Generic responsive image"> -</div> - -{% highlight html %} -<img src="..." class="img-responsive" alt="Responsive image"> -{% endhighlight %} - -{% callout warning %} -#### SVG images and IE 9-10 - -In Internet Explorer 9-10, SVG images with `.img-responsive` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats. -{% endcallout %} - -## Image shapes - -Add classes to an `<img>` element to easily style images in any project. - -<div class="bd-example bd-example-images"> - <img data-src="holder.js/200x200" class="img-rounded" alt="A generic square placeholder image with rounded corners"> - <img data-src="holder.js/200x200" class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible"> - <img data-src="holder.js/200x200" class="img-thumbnail" alt="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-rounded"> -<img src="..." alt="..." class="img-circle"> -<img src="..." alt="..." class="img-thumbnail"> -{% endhighlight %} - -## Aligning images - -Align images with the [helper float classes](/components/helpers) or [text alignment classes](/components/helpers). A simple centering class can also be used for `block` level images. - -<div class="bd-example bd-example-images"> - <img data-src="holder.js/200x200" class="img-rounded pull-left" alt="A generic square placeholder image with rounded corners"> - <img data-src="holder.js/200x200" class="img-rounded pull-right" alt="A generic square placeholder image with rounded corners"> -</div> - -{% highlight html %} -<img src="..." class="img-rounded pull-left" alt="..."> -<img src="..." class="img-rounded pull-right" alt="..."> -{% endhighlight %} - -<div class="bd-example bd-example-images"> - <img data-src="holder.js/200x200" class="img-rounded center-block" style="display: block;" alt="A generic square placeholder image with rounded corners"> -</div> - -{% highlight html %} -<img src="..." class="img-rounded center-block" style="display: block;" alt="..."> -{% endhighlight %} - -<div class="bd-example bd-example-images"> - <div class="text-center"> - <img data-src="holder.js/200x200" class="img-rounded" alt="A generic square placeholder image with rounded corners"> - </div> -</div> - -{% highlight html %} -<div class="text-center"> - <img src="..." class="img-rounded" alt="..."> -</div> -{% endhighlight %} - -## Figures - -Use the included `.figure` and `.figure-caption` classes to provide some baseline styles for the HTML5 `<figure>` and `<figcaption>` elements. As a bonus, immediate children images are automatically responsive. - -{% example html %} -<figure class="figure"> - <img data-src="holder.js/400x300" class="img-rounded" alt="A generic square placeholder image with rounded corners in a figure."> - <figcaption class="figure-caption">A caption for the above image.</figcaption> -</figure> -{% endexample %} diff --git a/docs/components/reboot.md b/docs/components/reboot.md deleted file mode 100644 index 5e2c97011..000000000 --- a/docs/components/reboot.md +++ /dev/null @@ -1,286 +0,0 @@ ---- -layout: page -title: Reboot -group: components ---- - -Part of Bootstrap's job is to provide an elegant, consistent, and simple baseline to build upon. We use Reboot, a collection of element-specific CSS changes in a single file, to kickstart that. - -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. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - -## Approach - -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 minimal, 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. -- A base `font-size: 16px` is declared on the `<html>` and `font-size: 1rem` on the `<body>` for easy responsive type-scaling via media queryies. -- The `<body>` also sets a global `font-family` and `line-height`. This is inherited later by some form elements to prevent font inconsistencies. -- For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`. - -## 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. - -<div class="bd-example"> -{% markdown %} -# h1 heading -Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. - -## h2 heading -Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. - -### h3 heading -Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. - -#### h4 heading -Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. - -##### h5 heading -Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. - -###### h6 heading -Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. -{% endmarkdown %} -</div> - -## 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"> -{% 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 -{% endmarkdown %} -</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"> -{% markdown %} -<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> -{% endmarkdown %} -</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"> -{% markdown %} -<pre> -.element { - margin-bottom: 1rem; -} -</pre> -{% endmarkdown %} -</div> - -## Tables - -Tables are slightly adjusted to style `<caption>`s and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class](/components/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, `<selects>`s, `<textareas>`s, and `<buttons>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too. -- `<textarea>`s are modified to only be resizeble vertically as horizontal resizing often "breaks" page layout. - -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="time">Example temporal</label> - <input type="datetime" 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="button" value="Input button"> - </p> - - <p> - <button type="submit" disabled>Button submit</button> - <input type="submit" value="Input submit button" disabled> - <input type="button" value="Input button" disabled> - </p> - </fieldset> -</form> - -## 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:#">[email protected]</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> - <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 the amongst paragraph text. - -<div class="bd-example"> - Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue. -</div> diff --git a/docs/components/tables.md b/docs/components/tables.md deleted file mode 100644 index c99187d8c..000000000 --- a/docs/components/tables.md +++ /dev/null @@ -1,611 +0,0 @@ ---- -layout: page -title: Tables -group: components ---- - -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>`. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - -## Basic example - -{% example html %} -<table class="table"> - <thead> - <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</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> -{% endexample %} - -## Inverse table - -{% example html %} -<table class="table table-inverse"> - <thead> - <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</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> -{% endexample %} - -## Table head options - -Use one of two modifier classes to make `<thead>`s appear light or dark gray. - -{% example html %} -<table class="table"> - <thead class="thead-inverse"> - <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</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-default"> - <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</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> -{% endexample %} - -## Striped rows - -Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`. - -{% example html %} -<table class="table table-striped"> - <thead> - <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</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> -{% endexample %} - -## Bordered table - -Add `.table-bordered` for borders on all sides of the table and cells. - -{% example html %} -<table class="table table-bordered"> - <thead> - <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</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>Mark</td> - <td>Otto</td> - <td>@TwBootstrap</td> - </tr> - <tr> - <th scope="row">3</th> - <td>Jacob</td> - <td>Thornton</td> - <td>@fat</td> - </tr> - <tr> - <th scope="row">4</th> - <td colspan="2">Larry the Bird</td> - <td>@twitter</td> - </tr> - </tbody> -</table> -{% endexample %} - -## Hoverable rows - -Add `.table-hover` to enable a hover state on table rows within a `<tbody>`. - -{% example html %} -<table class="table table-hover"> - <thead> - <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</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> -{% endexample %} - -## Small table - -Add `.table-sm` to make tables more compact by cutting cell padding in half. - -{% example html %} -<table class="table table-sm"> - <thead> - <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</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> -{% endexample %} - -## Contextual classes - -Use contextual classes to color table rows or individual cells. - -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <colgroup> - <col class="col-xs-1"> - <col class="col-xs-7"> - </colgroup> - <thead> - <tr> - <th>Class</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row"> - <code>.table-active</code> - </th> - <td>Applies the hover color to a particular row or cell</td> - </tr> - <tr> - <th scope="row"> - <code>.table-success</code> - </th> - <td>Indicates a successful or positive action</td> - </tr> - <tr> - <th scope="row"> - <code>.table-info</code> - </th> - <td>Indicates a neutral informative change or action</td> - </tr> - <tr> - <th scope="row"> - <code>.table-warning</code> - </th> - <td>Indicates a warning that might need attention</td> - </tr> - <tr> - <th scope="row"> - <code>.table-danger</code> - </th> - <td>Indicates a dangerous or potentially negative action</td> - </tr> - </tbody> - </table> -</div> - -<div class="bd-example"> - <table class="table"> - <thead> - <tr> - <th>#</th> - <th>Column heading</th> - <th>Column heading</th> - <th>Column heading</th> - </tr> - </thead> - <tbody> - <tr class="table-active"> - <th scope="row">1</th> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> - </tr> - <tr> - <th scope="row">2</th> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> - </tr> - <tr class="table-success"> - <th scope="row">3</th> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> - </tr> - <tr> - <th scope="row">4</th> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> - </tr> - <tr class="table-info"> - <th scope="row">5</th> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> - </tr> - <tr> - <th scope="row">6</th> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> - </tr> - <tr class="table-warning"> - <th scope="row">7</th> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> - </tr> - <tr> - <th scope="row">8</th> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> - </tr> - <tr class="table-danger"> - <th scope="row">9</th> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> - </tr> - </tbody> - </table> -</div> - -{% highlight html %} -<!-- On rows --> -<tr class="table-active">...</tr> -<tr class="table-success">...</tr> -<tr class="table-warning">...</tr> -<tr class="table-danger">...</tr> -<tr class="table-info">...</tr> - -<!-- On cells (`td` or `th`) --> -<tr> - <td class="table-active">...</td> - <td class="table-success">...</td> - <td class="table-warning">...</td> - <td class="table-danger">...</td> - <td class="table-info">...</td> -</tr> -{% endhighlight %} - -## Responsive tables - -Create responsive tables by wrapping any `.table` in `.table-responsive` to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables. - -{% 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. -{% endcallout %} - -{% callout warning %} -#### Firefox and fieldsets - -Firefox has some awkward fieldset styling involving `width` that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we **don't** provide in Bootstrap: - -{% highlight css %} -@-moz-document url-prefix() { - fieldset { display: table-cell; } -} -{% endhighlight %} - -For more information, read [this Stack Overflow answer](https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685). -{% endcallout %} - -<div class="bd-example"> - <div class="table-responsive"> - <table class="table"> - <thead> - <tr> - <th>#</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">1</th> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - </tr> - <tr> - <th scope="row">2</th> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - </tr> - <tr> - <th scope="row">3</th> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - </tr> - </tbody> - </table> - </div> - - <div class="table-responsive"> - <table class="table table-bordered"> - <thead> - <tr> - <th>#</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">1</th> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - </tr> - <tr> - <th scope="row">2</th> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - </tr> - <tr> - <th scope="row">3</th> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - </tr> - </tbody> - </table> - </div> -</div> - -{% highlight html %} -<div class="table-responsive"> - <table class="table"> - ... - </table> -</div> -{% endhighlight %} - - -### Reflow - -{% example html %} -<table class="table table-reflow"> - <thead> - <tr> - <th>#</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">1</th> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - </tr> - <tr> - <th scope="row">2</th> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - </tr> - <tr> - <th scope="row">3</th> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - </tr> - </tbody> -</table> -{% endexample %} diff --git a/docs/components/typography.md b/docs/components/typography.md deleted file mode 100644 index faeb3f22d..000000000 --- a/docs/components/typography.md +++ /dev/null @@ -1,256 +0,0 @@ ---- -layout: page -title: Typography -group: components ---- - -Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the [textual utility classes](/components/utilities/). - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - -## Global settings - -Bootstrap sets basic global display, typography, and link styles. Specifically, we: - -- Set `background-color: #fff;` on the `<body>` -- Use the `@font-family-base`, `@font-size-base`, and `@line-height-base` attributes as our typographic base -- Set the global link color via `@link-color` and apply link underlines only on `:hover` - -These styles can be found within `scaffolding.less`. - - -## Headings - -All HTML headings, `<h1>` through `<h6>`, are available. `.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline. - -<div class="bd-example bd-example-type"> - <table class="table"> - <tbody> - <tr> - <td><h1>h1. Bootstrap heading</h1></td> - <td class="type-info">Semibold 36px</td> - </tr> - <tr> - <td><h2>h2. Bootstrap heading</h2></td> - <td class="type-info">Semibold 30px</td> - </tr> - <tr> - <td><h3>h3. Bootstrap heading</h3></td> - <td class="type-info">Semibold 24px</td> - </tr> - <tr> - <td><h4>h4. Bootstrap heading</h4></td> - <td class="type-info">Semibold 18px</td> - </tr> - <tr> - <td><h5>h5. Bootstrap heading</h5></td> - <td class="type-info">Semibold 14px</td> - </tr> - <tr> - <td><h6>h6. Bootstrap heading</h6></td> - <td class="type-info">Semibold 12px</td> - </tr> - </tbody> - </table> -</div> - -{% 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 %} - -Create lighter, secondary text in any heading with a generic `<small>` tag or the `.small` class. - -<div class="bd-example bd-example-type"> - <table class="table"> - <tbody> - <tr> - <td><h1>h1. Bootstrap heading <small>Secondary text</small></h1></td> - </tr> - <tr> - <td><h2>h2. Bootstrap heading <small>Secondary text</small></h2></td> - </tr> - <tr> - <td><h3>h3. Bootstrap heading <small>Secondary text</small></h3></td> - </tr> - <tr> - <td><h4>h4. Bootstrap heading <small>Secondary text</small></h4></td> - </tr> - <tr> - <td><h5>h5. Bootstrap heading <small>Secondary text</small></h5></td> - </tr> - <tr> - <td><h6>h6. Bootstrap heading <small>Secondary text</small></h6></td> - </tr> - </tbody> - </table> -</div> - -{% highlight html %} -<h1>h1. Bootstrap heading <small>Secondary text</small></h1> -<h2>h2. Bootstrap heading <small>Secondary text</small></h2> -<h3>h3. Bootstrap heading <small>Secondary text</small></h3> -<h4>h4. Bootstrap heading <small>Secondary text</small></h4> -<h5>h5. Bootstrap heading <small>Secondary text</small></h5> -<h6>h6. Bootstrap heading <small>Secondary text</small></h6> -{% 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. - -<div class="bd-example bd-example-type"> - <table class="table"> - <tbody> - <tr> - <td><h1 class="display-4">Display 4</h1></td> - </tr> - <tr> - <td><h1 class="display-3">Display 3</h1></td> - </tr> - <tr> - <td><h1 class="display-2">Display 2</h1></td> - </tr> - <tr> - <td><h1 class="display-1">Display 1</h1></td> - </tr> - </tbody> - </table> -</div> - - -## Lead - -Make a paragraph stand out by adding `.lead`. - -{% example html %} -<p class="lead"> - Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. -</p> -{% endexample %} - -## Inline text elements - -Styling for common inline HTML5 elements. - -{% example html %} -<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> -{% endexample %} - -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. - -## Abbreviations - -Stylized implementation of HTML's `<abbr>` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a `title` attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover and to users of assistive technologies. - -Add `.initialism` to an abbreviation for a slightly smaller font-size. - -{% example html %} -<p><abbr title="attribute">attr</abbr></p> -<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p> -{% endexample %} - -## Blockquotes - -For quoting blocks of content from another source within your document. Wrap `<blockquote>` around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes, we recommend a `<p>`. - -{% example html %} -<blockquote> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> -</blockquote> -{% endexample %} - -### Naming a source - -Add a `<footer>` for identifying the source. Wrap the name of the source work in `<cite>`. - -{% example html %} -<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> -{% endexample %} - -### Reverse layout - -Add `.blockquote-reverse` for a blockquote with right-aligned content. - -{% example html %} -<blockquote class="blockquote-reverse"> - <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> -{% endexample %} - -## 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 html %} -<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> -{% endexample %} - -### Inline - -Place all list items on a single line with `display: inline-block;` and some light padding. - -{% example html %} -<ul class="list-inline"> - <li>Lorem ipsum</li> - <li>Phasellus iaculis</li> - <li>Nulla volutpat</li> -</ul> -{% endexample %} - -### Horizontal description - -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 html %} -<dl class="dl-horizontal"> - <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">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> - <dd class="col-sm-9 col-sm-offset-3">Donec id elit non mi porta gravida at eget metus.</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> -</dl> -{% endexample %} |