kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Update docs to use new spacing util class names

This commit is contained in:
Mark Otto 2016-09-08 22:16:28 -07:00
parent ae784c9521
commit 0be876359e
10 changed files with 28 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/components/alerts.md
View File

@ -60,7 +60,7 @@ Alerts can also contain additional HTML elements like headings and paragraphs.
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<p class="m-b-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
{% endexample %}

6
docs/components/collapse.md
View File

@ -45,7 +45,7 @@ Extend the default collapse behavior to create an accordion.
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="m-b-0">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
@ -57,7 +57,7 @@ Extend the default collapse behavior to create an accordion.
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="m-b-0">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
@ -69,7 +69,7 @@ Extend the default collapse behavior to create an accordion.
</div>
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<h5 class="m-b-0">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>

2
docs/components/forms.md
View File

@ -845,7 +845,7 @@ Add other states to your custom forms with our validation classes.
<span class="custom-control-description">Check this custom checkbox</span>
</label>
</div>
<div class="form-group has-danger m-b-0">
<div class="form-group has-danger mb-0">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>

2
docs/components/jumbotron.md
View File

@ -12,7 +12,7 @@ A lightweight, flexible component that can optionally extend the entire viewport
<div class="jumbotron">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="m-y-2">
<hr class="my-2">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>

4
docs/components/navbar.md
View File

@ -64,7 +64,7 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as
</nav>
<nav class="navbar navbar-light bg-faded">
<h1 class="navbar-brand m-b-0">Navbar</h1>
<h1 class="navbar-brand mb-0">Navbar</h1>
</nav>
{% endexample %}
@ -245,7 +245,7 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con
&#9776;
</button>
<div class="collapse" id="exCollapsingNavbar">
<div class="bg-inverse p-a-1">
<div class="bg-inverse p-1">
<h4>Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>

6
docs/content/images.md
View File

@ -47,7 +47,7 @@ Add classes to an `<img>` element to easily style images in any project.
## Aligning images
Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). `block`-level images can be centered using [the `.m-x-auto` margin utility class]({{ site.baseurl }}/components/utilities/#horizontal-centering).
Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/components/utilities/#horizontal-centering).
<div class="bd-example bd-example-images">
<img data-src="holder.js/200x200" class="img-rounded pull-xs-left" alt="A generic square placeholder image with rounded corners">
@ -60,11 +60,11 @@ Align images with the [helper float classes]({{ site.baseurl }}/components/utili
{% endhighlight %}
<div class="bd-example bd-example-images">
<img data-src="holder.js/200x200" class="img-rounded m-x-auto d-block" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="img-rounded mx-auto d-block" alt="A generic square placeholder image with rounded corners">
</div>
{% highlight html %}
<img src="..." class="img-rounded m-x-auto d-block" alt="...">
<img src="..." class="img-rounded mx-auto d-block" alt="...">
{% endhighlight %}
<div class="bd-example bd-example-images">

6
docs/content/typography.md
View File

@ -168,7 +168,7 @@ For quoting blocks of content from another source within your document. Wrap `<b
{% example html %}
<blockquote class="blockquote">
<p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
{% endexample %}
@ -178,7 +178,7 @@ Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the
{% example html %}
<blockquote class="blockquote">
<p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
{% endexample %}
@ -189,7 +189,7 @@ Add `.blockquote-reverse` for a blockquote with right-aligned content.
{% example html %}
<blockquote class="blockquote blockquote-reverse">
<p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
{% endexample %}

10
docs/layout/media-object.md
View File

@ -45,7 +45,7 @@ Media components can also be nested.
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media m-t-2">
<div class="media mt-2">
<a class="media-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
@ -123,7 +123,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
<h4 class="media-heading">Media heading</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
<!-- Nested media object -->
<div class="media m-t-2">
<div class="media mt-2">
<a class="media-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
@ -131,7 +131,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
<h4 class="media-heading">Nested media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<!-- Nested media object -->
<div class="media m-t-2">
<div class="media mt-2">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
@ -145,7 +145,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
</div>
</div>
<!-- Nested media object -->
<div class="media m-t-2">
<div class="media mt-2">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
@ -158,7 +158,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
</div>
</div>
</li>
<li class="media m-t-2">
<li class="media mt-2">
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

2
docs/migration.md
View File

@ -182,7 +182,7 @@ Dropped entirely for the new card component.
- Added `.pull-{xs,sm,md,lg,xl}-{left,right,none}` classes for responsive floats and removed `.pull-left` and `.pull-right` since they're redundant to `.pull-xs-left` and `.pull-xs-right`.
- Added responsive variations to our text alignment classes `.text-{xs,sm,md,lg,xl}-{left,center,right}` and removed the redundant `.text-{left,center,right}` utilities as they are the same as the `xs` variation.
- Dropped `.center-block` for the new `.m-x-auto` class.
- Dropped `.center-block` for the new `.mx-auto` class.
### Vendor prefix mixins
Bootstrap 3's [vendor prefix](http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm) mixins, which were deprecated in v3.2.0, have been removed in Bootstrap 4. Since we use [Autoprefixer](https://github.com/postcss/autoprefixer), they're no longer necessary.

16
docs/utilities/spacing.md
View File

@ -6,7 +6,7 @@ group: utilities
Assign `margin` or `padding` to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, `1rem`.
The classes are named using the format: `{property}-{sides}-{size}`
The classes are named using the format: `{property}{sides}-{size}`
Where *property* is one of:
@ -35,35 +35,35 @@ Where *size* is one of:
Here are some representative examples of these classes:
{% highlight scss %}
.m-t-0 {
.mt-0 {
margin-top: 0 !important;
}
.m-l-1 {
.ml-1 {
margin-left: $spacer-x !important;
}
.p-x-2 {
.px-2 {
padding-left: ($spacer-x * 1.5) !important;
padding-right: ($spacer-x * 1.5) !important;
}
.p-a-3 {
.p-3 {
padding: ($spacer-y * 3) ($spacer-x * 3) !important;
}
{% endhighlight %}
### Horizontal centering
Additionally, Bootstrap also includes an `.m-x-auto` class for horizontally centering fixed-width block level content by setting the horizontal margins to `auto`.
Additionally, Bootstrap also includes an `.mx-auto` class for horizontally centering fixed-width block level content by setting the horizontal margins to `auto`.
<div class="bd-example">
<div class="m-x-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
<div class="mx-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
Centered element
</div>
</div>
{% highlight html %}
<div class="m-x-auto" style="width: 200px;">
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
{% endhighlight %}