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

rename classes from .bs-docs and .bs to .bd

Browse Source
This commit is contained in:
Mark Otto
2015-04-16 14:07:20 -07:00
parent 3c93681245
commit c84cf4f7f5
38 changed files with 386 additions and 371 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/modal.md
+18 -18
View File
@@ -13,15 +13,15 @@ $('#myModal').on('shown.bs.modal', function () {
})
{% endhighlight %}
<div class="bs-callout bs-callout-warning" id="callout-stacked-modals">
<div class="bd-callout bd-callout-warning" id="callout-stacked-modals">
<h4>Overlapping modals not supported</h4>
<p>Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.</p>
</div>
<div class="bs-callout bs-callout-warning" id="callout-modal-markup-placement">
<div class="bd-callout bd-callout-warning" id="callout-modal-markup-placement">
<h4>Modal markup placement</h4>
<p>Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.</p>
</div>
<div class="bs-callout bs-callout-warning">
<div class="bd-callout bd-callout-warning">
<h4>Mobile device caveats</h4>
<p>There are some caveats regarding using modals on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
</div>
@@ -30,7 +30,7 @@ $('#myModal').on('shown.bs.modal', function () {
A rendered modal with header, body, and set of actions in the footer.</p>
<div class="bs-example bs-example-modal">
<div class="bd-example bd-example-modal">
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
@@ -123,7 +123,7 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a
</div><!-- /.modal-dialog -->
</div>
<div class="bs-example" style="padding-bottom: 24px;">
<div class="bd-example" style="padding-bottom: 24px;">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
@@ -158,13 +158,13 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a
</div>
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<div class="bd-callout bd-callout-warning">
<h4>Make modals accessible</h4>
<p>Be sure to add <code>role="dialog"</code> to <code>.modal</code>, <code>aria-labelledby="myModalLabel"</code> attribute to reference the modal title, and <code>aria-hidden="true"</code> to tell assistive technologies to skip the modal's DOM elements.</p>
<p>Additionally, you may give a description of your modal dialog with <code>aria-describedby</code> on <code>.modal</code>.</p>
</div>
<div class="bs-callout bs-callout-info">
<div class="bd-callout bd-callout-info">
<h4>Embedding YouTube videos</h4>
<p>Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. <a href="http://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal">See this helpful Stack Overflow post</a> for more information.</p>
</div>
@@ -173,16 +173,16 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a
Modals have two optional sizes, available via modifier classes to be placed on a `.modal-dialog`.
<div class="bs-example">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
<div class="bd-example">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
</div>
{% highlight html %}
<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
@@ -191,9 +191,9 @@ Modals have two optional sizes, available via modifier classes to be placed on a
</div>
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
@@ -202,7 +202,7 @@ Modals have two optional sizes, available via modifier classes to be placed on a
</div>
{% endhighlight %}
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
@@ -220,7 +220,7 @@ Modals have two optional sizes, available via modifier classes to be placed on a
</div>
</div>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
@@ -295,7 +295,7 @@ To take advantage of the Bootstrap grid system within a modal, just nest `.conta
</div>
</div>
</div>
<div class="bs-example bs-example-padded-bottom">
<div class="bd-example bd-example-padded-bottom">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal">
Launch demo modal
</button>
@@ -307,7 +307,7 @@ To take advantage of the Bootstrap grid system within a modal, just nest `.conta
Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) (possibly [via jQuery](http://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on `relatedTarget`.
{% example html %}
<div class="bs-example">
<div class="bd-example">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>