]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
Merge pull request #15214 from twbs/example-ids
authorChris Rebert <github@rebertia.com>
Fri, 5 Dec 2014 03:18:29 +0000 (19:18 -0800)
committerChris Rebert <github@rebertia.com>
Fri, 5 Dec 2014 03:18:29 +0000 (19:18 -0800)
Give all embedded live docs examples data-example-id attrs
[skip sauce]

1  2 
docs/_includes/components/media.html
docs/_includes/components/pagination.html
docs/_includes/components/panels.html
docs/_includes/css/tables.html
docs/_includes/js/collapse.html

Simple merge
index c58f8702e2d6e00556d0c9e445202accace6e762,85100afe4bcfe343fd4cfa548757362d48ed1774..60485a587d8780ed069675c7a851265704f2e373
@@@ -5,15 -5,10 +5,15 @@@
  
    <h2 id="pagination-default">Default pagination</h2>
    <p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
-   <div class="bs-example">
+   <div class="bs-example" data-example-id="simple-pagination">
      <nav>
        <ul class="pagination">
 -        <li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
 +        <li>
 +          <a href="#">
 +            <span aria-hidden="true">&laquo;</span>
 +            <span class="sr-only">Previous</span>
 +          </a>
 +        </li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
Simple merge
Simple merge
index ec85cc9228fb1ca38dffe0e4c6b99e21c4e85175,c06f8c402df8a200c3fa2fe50bda536a0564dd4a..ca84ac857cbc406b2727a3f6450ed0820425c471
@@@ -8,48 -9,10 +8,48 @@@
      <p>Collapse requires the <a href="#transitions">transitions plugin</a> to be included in your version of Bootstrap.</p>
    </div>
  
 -  <h2 id="collapse-examples">Example accordion</h2>
 -  <p>Using the collapse plugin, we built a simple accordion by extending the panel component.</p>
 +  <h2 id="collapse-example">Example</h2>
 +  <p>Click the buttons below to show and hide another element via class changes:</p>
 +  <ul>
 +    <li><code>.collapse</code> hides content</li>
 +    <li><code>.collapsing</code> is applied during transitions</li>
 +    <li><code>.collapse.in</code> shows content</li>
 +  </ul>
 +  <p>You can use a link with the <code>href</code> attribute, or a button with the <code>data-target</code> attribute. In both cases, the <code>data-toggle="collapse"</code> is required.</p>
 +
 +  <div class="bs-example">
 +    <p>
 +      <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
 +        Link with href
 +      </a>
 +      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
 +        Button with data-target
 +      </button>
 +    </p>
 +    <div class="collapse" id="collapseExample">
 +      <div class="well">
 +        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
 +      </div>
 +    </div>
 +  </div>
 +{% highlight html %}
 +<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
 +  Link with href
 +</a>
 +<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
 +  Button with data-target
 +</button>
 +<div class="collapse" id="collapseExample">
 +  <div class="well">
 +    ...
 +  </div>
 +</div>
 +{% endhighlight %}
 +
 +  <h2 id="collapse-example-accordion">Accordion example</h2>
 +  <p>Extend the default collapse behavior to create an accordion with the panel component.</p>
  
-   <div class="bs-example">
+   <div class="bs-example" data-example-id="collapse-accordion">
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingOne">