1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00

Minor Markdown consistency cleanup. (#24605)

This commit is contained in:
XhmikosR 2017-10-30 23:53:57 +02:00 committed by GitHub
parent 1870b871d0
commit b67a4be8de
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 14 additions and 5 deletions

View file

@ -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). 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 %} {% example html %}
<nav aria-label="breadcrumb" role="navigation"> <nav aria-label="breadcrumb" role="navigation">
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li> <li class="breadcrumb-item active" aria-current="page">Home</li>

View file

@ -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. - 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. - 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 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. - 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. Read on for an example and list of supported sub-components.

View file

@ -67,6 +67,7 @@ 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**. 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. In order to execute an action once the transition is complete, you can listen to the corresponding event.
{% highlight js %} {% highlight js %}
$('#myCollapse').on('shown.bs.collapse', function (e) { $('#myCollapse').on('shown.bs.collapse', function (e) {
// Action to execute once the collapsible area is expanded // Action to execute once the collapsible area is expanded
@ -74,6 +75,7 @@ $('#myCollapse').on('shown.bs.collapse', function (e) {
{% endhighlight %} {% endhighlight %}
In addition a method call on a **transitioning component will be ignored**. In addition a method call on a **transitioning component will be ignored**.
{% highlight js %} {% highlight js %}
$('#myCarousel').on('slid.bs.carousel', function (e) { $('#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 $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished

View file

@ -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. 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: 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 %} {% highlight scss %}
@import "custom"; @import "custom";
@import "~bootstrap/scss/bootstrap"; @import "~bootstrap/scss/bootstrap";

View file

@ -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 class="p-2 bd-highlight">Flex item</div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="d-flex flex-nowrap"> <div class="d-flex flex-nowrap">
... ...
@ -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 class="p-2 bd-highlight">Flex item</div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="d-flex flex-wrap"> <div class="d-flex flex-wrap">
... ...
@ -330,6 +332,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 class="p-2 bd-highlight">Flex item</div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="d-flex flex-wrap-reverse"> <div class="d-flex flex-wrap-reverse">
... ...
@ -337,9 +340,6 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all (
{% endhighlight %} {% endhighlight %}
{% example html %}
{% endexample %}
Responsive variations also exist for `flex-wrap`. Responsive variations also exist for `flex-wrap`.
{% for bp in site.data.breakpoints %} {% for bp in site.data.breakpoints %}
@ -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 class="p-2 bd-highlight">Flex item</div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="d-flex align-content-start flex-wrap"> <div class="d-flex align-content-start flex-wrap">
... ...
@ -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 class="p-2 bd-highlight">Flex item</div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="d-flex align-content-end flex-wrap">...</div> <div class="d-flex align-content-end flex-wrap">...</div>
{% endhighlight %} {% endhighlight %}
@ -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 class="p-2 bd-highlight">Flex item</div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="d-flex align-content-center flex-wrap">...</div> <div class="d-flex align-content-center flex-wrap">...</div>
{% endhighlight %} {% endhighlight %}
@ -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 class="p-2 bd-highlight">Flex item</div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="d-flex align-content-between flex-wrap">...</div> <div class="d-flex align-content-between flex-wrap">...</div>
{% endhighlight %} {% endhighlight %}
@ -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 class="p-2 bd-highlight">Flex item</div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="d-flex align-content-around flex-wrap">...</div> <div class="d-flex align-content-around flex-wrap">...</div>
{% endhighlight %} {% endhighlight %}
@ -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 class="p-2 bd-highlight">Flex item</div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="d-flex align-content-stretch flex-wrap">...</div> <div class="d-flex align-content-stretch flex-wrap">...</div>
{% endhighlight %} {% endhighlight %}

View file

@ -67,6 +67,7 @@ Here are some representative examples of these classes:
{% endhighlight %} {% endhighlight %}
### Horizontal centering ### 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`. 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"> <div class="bd-example">