mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00
Code Activity

Remove custom example plugin. (#25784)

Browse Source
This commit is contained in:
m5o
2018-03-14 16:44:38 +01:00
committed by XhmikosR
parent 03b7f52e82
commit d01b4eb025
41 changed files with 923 additions and 695 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/4.0/layout/media-object.md
+21 -14
View File
@@ -12,7 +12,7 @@ The [media object](http://www.stubbornella.org/content/2010/06/25/the-media-obje
Below is an example of a single media object. Only two classes are required—the wrapping `.media` and the `.media-body` around your content. Optional padding and margin can be controlled through [spacing utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/).
{% example html %}
{% capture example %}
<div class="media">
<img class="mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<div class="media-body">
@@ -20,7 +20,8 @@ Below is an example of a single media object. Only two classes are required—th
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% capture callout %}
##### Flexbug #12: Inline elements aren't treated as flex items
@@ -35,7 +36,7 @@ Internet Explorer 10-11 do not render inline elements like links or images (or `
Media objects can be infinitely nested, though we suggest you stop at some point. Place nested `.media` within the `.media-body` of a parent media object.
{% example html %}
{% capture example %}
<div class="media">
<img class="mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<div class="media-body">
@@ -53,13 +54,14 @@ Media objects can be infinitely nested, though we suggest you stop at some point
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Alignment
Media in a media object can be aligned with flexbox utilities to the top (default), middle, or end of your `.media-body` content.
{% example html %}
{% capture example %}
<div class="media">
<img class="align-self-start mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<div class="media-body">
@@ -68,9 +70,10 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% example html %}
{% capture example %}
<div class="media">
<img class="align-self-center mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<div class="media-body">
@@ -79,9 +82,10 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% example html %}
{% capture example %}
<div class="media">
<img class="align-self-end mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<div class="media-body">
@@ -90,13 +94,14 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Order
Change the order of content in media objects by modifying the HTML itself, or by adding some custom flexbox CSS to set the `order` property (to an integer of your choosing).
{% example html %}
{% capture example %}
<div class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">Media object</h5>
@@ -104,13 +109,14 @@ Change the order of content in media objects by modifying the HTML itself, or by
</div>
<img class="ml-3" data-src="holder.js/64x64" alt="Generic placeholder image">
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Media list
Because the media object has so few structural requirements, you can also use these classes on list HTML elements. On your `<ul>` or `<ol>`, add the `.list-unstyled` to remove any browser default list styles, and then apply `.media` to your `<li>`s. As always, use spacing utilities wherever needed to fine tune.
{% example html %}
{% capture example %}
<ul class="list-unstyled">
<li class="media">
<img class="mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
@@ -134,4 +140,5 @@ Because the media object has so few structural requirements, you can also use th
</div>
</li>
</ul>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}