Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Minor Markdown consistency cleanup. #24605

Merged
merged 2 commits into from
Oct 30, 2017
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion docs/4.0/components/breadcrumb.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ group: components
Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).

{% example html %}

<nav aria-label="breadcrumb" role="navigation">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
Expand Down
2 changes: 1 addition & 1 deletion docs/4.0/components/navbar.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Here's what you need to know before getting started with the navbar:
- Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
- Use our [spacing]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) and [flex]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/) utility classes for controlling spacing and alignment within navbars.
- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
- Navbars are hidden by default when printing. Force them to be printed by adding `.d-print` to the `.navbar`. See the [display]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/) utility class.
- Navbars are hidden by default when printing. Force them to be printed by adding `.d-print` to the `.navbar`. See the [display]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/) utility class.
- Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.

Read on for an example and list of supported sub-components.
Expand Down
2 changes: 2 additions & 0 deletions docs/4.0/getting-started/javascript.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,13 +67,15 @@ Each plugin also exposes its raw constructor on a `Constructor` property: `$.fn.
All programmatic API methods are **asynchronous** and returns to the caller once the transition is started but **before it ends**.

In order to execute an action once the transition is complete, you can listen to the corresponding event.

{% highlight js %}
$('#myCollapse').on('shown.bs.collapse', function (e) {
// Action to execute once the collapsible area is expanded
})
{% endhighlight %}

In addition a method call on a **transitioning component will be ignored**.

{% highlight js %}
$('#myCarousel').on('slid.bs.carousel', function (e) {
$('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
Expand Down
1 change: 1 addition & 0 deletions docs/4.0/getting-started/webpack.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ Notice that if you chose to **import plugins individually**, you must also insta
To enjoy the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project's bundling process.

First, create your own `_custom.scss` and use it to override the [built-in custom variables]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/options/). Then, use your main sass file to import your custom variables, followed by Bootstrap:

{% highlight scss %}
@import "custom";
@import "~bootstrap/scss/bootstrap";
Expand Down
12 changes: 9 additions & 3 deletions docs/4.0/utilities/flex.md
Original file line number Diff line number Diff line change
Expand Up @@ -280,6 +280,7 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all (
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>

{% highlight html %}
<div class="d-flex flex-nowrap">
...
Expand All @@ -305,6 +306,7 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all (
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>

{% highlight html %}
<div class="d-flex flex-wrap">
...
Expand All @@ -330,16 +332,14 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all (
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>

{% highlight html %}
<div class="d-flex flex-wrap-reverse">
...
</div>
{% endhighlight %}


{% example html %}
{% endexample %}

Responsive variations also exist for `flex-wrap`.

{% for bp in site.data.breakpoints %}
Expand Down Expand Up @@ -389,6 +389,7 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>

{% highlight html %}
<div class="d-flex align-content-start flex-wrap">
...
Expand All @@ -414,6 +415,7 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>

{% highlight html %}
<div class="d-flex align-content-end flex-wrap">...</div>
{% endhighlight %}
Expand All @@ -437,6 +439,7 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>

{% highlight html %}
<div class="d-flex align-content-center flex-wrap">...</div>
{% endhighlight %}
Expand All @@ -460,6 +463,7 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>

{% highlight html %}
<div class="d-flex align-content-between flex-wrap">...</div>
{% endhighlight %}
Expand All @@ -483,6 +487,7 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>

{% highlight html %}
<div class="d-flex align-content-around flex-wrap">...</div>
{% endhighlight %}
Expand All @@ -506,6 +511,7 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>

{% highlight html %}
<div class="d-flex align-content-stretch flex-wrap">...</div>
{% endhighlight %}
Expand Down
1 change: 1 addition & 0 deletions docs/4.0/utilities/spacing.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ Here are some representative examples of these classes:
{% endhighlight %}

### Horizontal centering

Additionally, Bootstrap also includes an `.mx-auto` class for horizontally centering fixed-width block level content—that is, content that has `display: block` and a `width` set—by setting the horizontal margins to `auto`.

<div class="bd-example">
Expand Down