rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-20 17:54:23 +01:00
Code Issues Actions Packages Releases Activity

Doc updates (#21542)

Browse Source 
* Change it's to its.

* Fix links

* Fix typos
This commit is contained in:
Quy 2017-01-05 14:24:40 -08:00 committed by Mark Otto
parent 85a1fdcb29
commit 98e55484e7
7 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/components/card.md
View File

@ -1,7 +1,7 @@
--- ---
layout: docs layout: docs
title: Cards title: Cards
description: Bootstrap Cards provide a flexible and extensible content container with multiple variants and options. description: Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.
group: components group: components
--- ---
@ -18,7 +18,7 @@ If you're familiar with Bootstrap 3, cards replace our old panels, wells, and th
Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.
Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of it's parent element. This is easily customized with our various [sizing options](#sizing). Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. This is easily customized with our various [sizing options](#sizing).
{% example html %} {% example html %}
<div class="card" style="width: 20rem;"> <div class="card" style="width: 20rem;">
@ -51,7 +51,7 @@ The building block of a card is the `.card-block`. Use it whenever you need a pa
Card titles are used by adding `.card-title` to a `<h*>` tag. In the same way, links are added and placed next to each other by adding `.card-link` to a `<a>` tag. Card titles are used by adding `.card-title` to a `<h*>` tag. In the same way, links are added and placed next to each other by adding `.card-link` to a `<a>` tag.
Subtitles are used by adding a `.card-subtitle` to an `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-block` item, the card title and subtitle are aligned nicely. Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-block` item, the card title and subtitle are aligned nicely.
{% example html %} {% example html %}
<div class="card"> <div class="card">

2
docs/components/forms.md
View File

@ -1,7 +1,7 @@
--- ---
layout: docs layout: docs
title: Forms title: Forms
description: Examples and usage guidelines for from controls, form layouts, and custom forms. description: Examples and usage guidelines for form controls, form layouts, and custom forms.
group: components group: components
--- ---

2
docs/components/modal.md
View File

@ -19,7 +19,7 @@ Before getting started with Bootstrap's modal component, be sure to read the fol
- Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the `<body>` so that modal content scrolls instead. - Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the `<body>` so that modal content scrolls instead.
- Clicking on the modal "backdrop" will automatically close the modal. - Clicking on the modal "backdrop" will automatically close the modal.
- Bootstrap only supports one modal window at a time. Nested modals aren't supported as we believe them to be poor user experiences. - Bootstrap only supports one modal window at a time. Nested modals aren't supported as we believe them to be poor user experiences.
- Modal's use `position: fixed`, which can sometimes be a bit particular about it's rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You'll likely run into issues when nesting a `.modal` within another fixed element. - Modals use `position: fixed`, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You'll likely run into issues when nesting a `.modal` within another fixed element.
- One again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs]({{ site.baseurl }}/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile) for details. - One again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs]({{ site.baseurl }}/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile) for details.
- Lastly, the `autofocus` HTML attribute has no affect in modals. Here's how you can achieve the same effect with custom JavaScript. - Lastly, the `autofocus` HTML attribute has no affect in modals. Here's how you can achieve the same effect with custom JavaScript.

2
docs/components/navs.md
View File

@ -206,7 +206,7 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ
## Working with flex utilities ## Working with flex utilities
If you need responsive nav variations, consider using a series of [flex utilities](). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint. If you need responsive nav variations, consider using a series of [flexbox utilities]({{ site.baseurl }}/utilities/flexbox/). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
{% example html %} {% example html %}
<nav class="nav nav-pills flex-column flex-sm-row"> <nav class="nav nav-pills flex-column flex-sm-row">

4
docs/components/tooltips.md
View File

@ -203,7 +203,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>selector</td> <td>selector</td>
<td>string</td> <td>string</td>
<td>false</td> <td>false</td>
<td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td> <td>If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td>
</tr> </tr>
<tr> <tr>
<td>template</td> <td>template</td>
@ -241,7 +241,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>offset</td> <td>offset</td>
<td>string</td> <td>string</td>
<td>'0 0'</td> <td>'0 0'</td>
<td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://tether.io/#constraints">offset docs</a>.</td> <td>Offset of the tooltip relative to its target. For more information refer to Tether's <a href="http://tether.io/#offset">offset docs</a>.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

2
docs/examples/navbars/index.html
View File

@ -179,7 +179,7 @@
<div class="jumbotron"> <div class="jumbotron">
<div class="col-sm-8 mx-auto"> <div class="col-sm-8 mx-auto">
<h1>Navbar examples</h1> <h1>Navbar examples</h1>
<p>This example is a quick exercise to illustrate how the navbar and it's contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="../navbar-top/">top</a> and <a href="../navbar-top-fixed/">fixed top</a> examples.</p> <p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="../navbar-top/">top</a> and <a href="../navbar-top-fixed/">fixed top</a> examples.</p>
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p> <p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
<p> <p>
<a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a> <a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a>

2
scss/_navbar.scss
View File

@ -76,7 +76,7 @@
// Custom styles for responsive collapsing and toggling of navbar contents. // Custom styles for responsive collapsing and toggling of navbar contents.
// Powered by the collapse Bootstrap JavaScript plugin. // Powered by the collapse Bootstrap JavaScript plugin.
// Button for toggling the navbar when in it's collapsed state // Button for toggling the navbar when in its collapsed state
.navbar-toggler { .navbar-toggler {
align-self: flex-start; // Prevent toggler from growing to full width when it's the only visible navbar child align-self: flex-start; // Prevent toggler from growing to full width when it's the only visible navbar child
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x; padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;