rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +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
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
---
@ -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.
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 %}
<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.
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 %}
<div class="card">

2
docs/components/forms.md
View File

@ -1,7 +1,7 @@
---
layout: docs
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
---

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.
- 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.
- 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.
- 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
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 %}
<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>string</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>
<td>template</td>
@ -241,7 +241,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>offset</td>
<td>string</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>
</tbody>
</table>

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

@ -179,7 +179,7 @@
<div class="jumbotron">
<div class="col-sm-8 mx-auto">
<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>
<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.
// 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 {
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;