]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
Merge branch '2.3.0-wip' into 3.0.0-wip
authorMark Otto <otto@github.com>
Fri, 1 Feb 2013 01:57:31 +0000 (17:57 -0800)
committerMark Otto <otto@github.com>
Fri, 1 Feb 2013 01:57:31 +0000 (17:57 -0800)
Conflicts:
docs/assets/css/bootstrap.css
docs/assets/css/docs.css
docs/assets/js/application.js
docs/components.html
docs/templates/pages/components.mustache
less/sprites.less

1  2 
docs/assets/css/docs.css
docs/base-css.html
docs/components.html
docs/getting-started.html
docs/templates/pages/components.mustache
docs/templates/pages/getting-started.mustache

index 177e2487c8eddd3ffb181758b9dd7ec6c1fb6f49,af655409285a541cdfc707bada541bd114fed119..0196c64481062002e0695ba8caa432b58aefd65d
@@@ -141,14 -327,80 +141,17 @@@ section > ul li 
  -------------------------------------------------- */
  
  .show-grid {
 -  margin-top: 10px;
 -  margin-bottom: 20px;
 +  margin-bottom: 15px;
  }
 -.show-grid [class*="span"] {
 +.show-grid [class^="span"] {
 +  padding-top: 10px;
 +  padding-bottom: 10px;
    background-color: #eee;
 -  text-align: center;
 -  -webkit-border-radius: 3px;
 -     -moz-border-radius: 3px;
 -          border-radius: 3px;
 -  min-height: 40px;
 -  line-height: 40px;
 +  border: 1px solid #ddd;
  }
 -.show-grid .show-grid {
 -  margin-top: 0;
 -  margin-bottom: 0;
 -}
 -.show-grid .show-grid [class*="span"] {
 -  margin-top: 5px;
 -}
 -.show-grid [class*="span"] [class*="span"] {
 -  background-color: #ccc;
 -}
 -.show-grid [class*="span"] [class*="span"] [class*="span"] {
 -  background-color: #999;
 -}
 -
 -
 -
 -/* Mini layout previews
 --------------------------------------------------- */
 -.mini-layout {
 -  border: 1px solid #ddd;
 -  -webkit-border-radius: 6px;
 -     -moz-border-radius: 6px;
 -          border-radius: 6px;
 -  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.075);
 -     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.075);
 -          box-shadow: 0 1px 2px rgba(0,0,0,.075);
 -}
 -.mini-layout,
 -.mini-layout .mini-layout-body,
 -.mini-layout.fluid .mini-layout-sidebar {
 -  height: 300px;
 -}
 -.mini-layout {
 -  margin-bottom: 20px;
 -  padding: 9px;
 -}
 -.mini-layout div {
 -  -webkit-border-radius: 3px;
 -     -moz-border-radius: 3px;
 -          border-radius: 3px;
 -}
 -.mini-layout .mini-layout-body {
 -  background-color: #dceaf4;
 -  margin: 0 auto;
 -  width: 70%;
 -}
 -.mini-layout.fluid .mini-layout-sidebar,
 -.mini-layout.fluid .mini-layout-header,
 -.mini-layout.fluid .mini-layout-body {
 -  float: left;
 -}
 -.mini-layout.fluid .mini-layout-sidebar {
 -  background-color: #bbd8e9;
 -  width: 20%;
 -}
 -.mini-layout.fluid .mini-layout-body {
 -  width: 77.5%;
 -  margin-left: 2.5%;
 -}
+ .show-grid [class*="span"]:hover {
+   background-color: #ddd;
+ }
  
  
  
  
  
  
 -/* Responsive
 +/* Misc docs stuff
  -------------------------------------------------- */
  
 -/* Desktop large
 -------------------------- */
 -@media (min-width: 1200px) {
 -  .bs-docs-container {
 -    max-width: 970px;
 -  }
 -  .bs-docs-sidenav {
 -    width: 258px;
 -  }
 -  .bs-docs-sidenav > li > a {
 -    width: 230px \9; /* Override the previous IE8-9 hack */
 -  }
 -}
 -
 -/* Desktop
 -------------------------- */
 -@media (max-width: 980px) {
 -  /* Unfloat brand */
 -  body > .navbar-fixed-top .brand {
 -    float: left;
 -    margin-left: 0;
 -    padding-left: 10px;
 -    padding-right: 10px;
 -  }
 -
 -  /* Inline-block quick links for more spacing */
 -  .quick-links li {
 -    display: inline-block;
 -    margin: 5px;
 -  }
 -
 -  /* When affixed, space properly */
 -  .bs-docs-sidenav {
 -    top: 0;
 -    width: 218px;
 -    margin-top: 30px;
 -    margin-right: 0;
 -  }
 +/* Pseudo :focus state for showing how it looks in the docs */
 +input.focused {
 +  border-color: rgba(82,168,236,.8);
 +  outline: 0;
 +  outline: thin dotted \9; /* IE6-9 */
 +  -moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
 +       box-shadow: 0 0 8px rgba(82,168,236,.6);
  }
  
 -/* Tablet to desktop
 -------------------------- */
 -@media (min-width: 768px) and (max-width: 979px) {
 -  /* Remove any padding from the body */
 -  body {
 -    padding-top: 0;
 -  }
 -  /* Widen masthead and social buttons to fill body padding */
 -  .jumbotron {
 -    margin-top: -20px; /* Offset bottom margin on .navbar */
 -  }
 -  /* Adjust sidenav width */
 -  .bs-docs-sidenav {
 -    width: 166px;
 -    margin-top: 20px;
 -  }
 -  .bs-docs-sidenav.affix {
 -    top: 0;
 -  }
 +/* Scrollspy demo on fixed height div */
 +.scrollspy-example {
 +  position: relative;
 +  height: 200px;
 +  margin-top: 10px;
 +  overflow: auto;
  }
  
 -/* Tablet
 -------------------------- */
 -@media (max-width: 767px) {
 -  /* Remove any padding from the body */
 -  body {
 -    padding-top: 0;
 -  }
 -
 -  /* Widen masthead and social buttons to fill body padding */
 -  .jumbotron {
 -    padding: 40px 20px;
 -    margin-top:   -20px; /* Offset bottom margin on .navbar */
 -    margin-right: -20px;
 -    margin-left:  -20px;
 -  }
 -  .masthead h1 {
 -    font-size: 90px;
 -  }
 -  .masthead p,
 -  .masthead .btn {
 -    font-size: 24px;
 -  }
 -  .marketing .span4 {
 -    margin-bottom: 40px;
 -  }
 -  .bs-docs-social {
 -    margin: 0 -20px;
 -  }
  
 -  /* Space out the show-grid examples */
 -  .show-grid [class*="span"] {
 -    margin-bottom: 5px;
 -  }
  
 -  /* Sidenav */
 -  .bs-docs-sidenav {
 -    width: auto;
 -    margin-bottom: 20px;
 -  }
 -  .bs-docs-sidenav.affix {
 -    position: static;
 -    width: auto;
 -    top: 0;
 -  }
 +/* Responsive variations
 +-------------------------------------------------- */
  
 -  /* Unfloat the back to top link in footer */
 -  .footer {
 -    margin-left: -20px;
 -    margin-right: -20px;
 -    padding-left: 20px;
 -    padding-right: 20px;
 -  }
 -  .footer p {
 -    margin-bottom: 9px;
 -  }
 -}
 +/* Tablets and up */
 +@media screen and (min-width: 768px) {
  
 -/* Landscape phones
 -------------------------- */
 -@media (max-width: 480px) {
 -  /* Remove padding above jumbotron */
 +  /* Account for fixed navbar */
    body {
 -    padding-top: 0;
 -  }
 -
 -  /* Change up some type stuff */
 -  h2 small {
 -    display: block;
 +    padding-top: 50px;
    }
  
 -  /* Downsize the jumbotrons */
 -  .jumbotron h1 {
 -    font-size: 45px;
 +  /* Tweak display of docs jumbotrons */
 +  .masthead {
 +    padding-top:    100px;
 +    padding-bottom: 100px;
    }
 -  .jumbotron p,
 -  .jumbotron .btn {
 -    font-size: 18px;
 -  }
 -  .jumbotron .btn {
 -    display: block;
 -    margin: 0 auto;
 -  }
 -
 -  /* center align subhead text like the masthead */
 -  .subhead h1,
 -  .subhead p {
 -    text-align: center;
 +  .masthead h1 {
 +    font-size: 100px;
    }
 -
 -  /* Marketing on home */
 -  .marketing h1 {
 +  .masthead p {
      font-size: 30px;
 +    margin-left: 10%;
 +    margin-right: 10%;
    }
 -  .marketing-byline {
 -    font-size: 18px;
 -  }
 -
 -  /* center example sites */
 -  .example-sites {
 -    margin-left: 0;
 -  }
 -  .example-sites > li {
 -    float: none;
 -    display: block;
 -    max-width: 280px;
 -    margin: 0 auto 18px;
 -    text-align: center;
 -  }
 -  .example-sites .thumbnail > img {
 -    max-width: 270px;
 +  .subhead {
 +    padding-top:    60px;
 +    padding-bottom: 60px;
 +    text-align: left;
    }
  
 -  /* Do our best to make tables work in narrow viewports */
 -  table code {
 -    white-space: normal;
 -    word-wrap: break-word;
 -    word-break: break-all;
 -  }
 -
 -  /* Examples: dropdowns */
 -  .bs-docs-example-submenus > .pull-left {
 -    float: none;
 -    clear: both;
 -  }
 -  .bs-docs-example-submenus > .pull-left,
 -  .bs-docs-example-submenus > .pull-left + .pull-left {
 -    margin-left: 0;
 +  /* From here, start to affix the nav because we keep columns here */
 +  .bs-docs-sidenav.affix {
 +    position: fixed;
 +    top: 54px;
    }
 -  .bs-docs-example-submenus p {
 -    margin-bottom: 0;
 +  .bs-docs-sidenav {
 +    width: 170px;
    }
 -  .bs-docs-example-submenus .dropup > .dropdown-menu,
 -  .bs-docs-example-submenus .dropdown > .dropdown-menu {
 -    margin-bottom: 10px;
 -    float: none;
 -    max-width: 180px;
 +  .bs-docs-sidenav.affix-bottom {
 +    position: absolute;
 +    top: auto;
 +    bottom: 270px;
    }
 +}
  
 -  /* Examples: modal */
 -  .modal-example .modal {
 -    position: relative;
 -    top: auto;
 -    right: auto;
 -    bottom: auto;
 -    left: auto;
 +/* Tablets/desktops and up */
 +@media screen and (min-width: 992px) {
 +  .bs-docs-sidenav {
 +    width: 220px;
    }
 +}
  
 -  /* Tighten up footer */
 -  .footer {
 -    padding-top: 20px;
 -    padding-bottom: 20px;
 +/* Large desktops and up */
 +@media screen and (min-width: 1200px) {
 +  .bs-docs-sidenav {
 +    width: 260px;
    }
- }
+ }
Simple merge
index b88e54b88cd9619f932714a373713dbf232e2f8a,849d1f9c35c471f53612ec3b807f2e28b7b25d32..aff2088cc026f9d14b606ba4ed8b60c92154984f
            <h2>Standard 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-docs-example">
 -            <div class="pagination">
 -              <ul>
 -                <li><a href="#">&laquo;</a></li>
 -                <li><a href="#">1</a></li>
 -                <li><a href="#">2</a></li>
 -                <li><a href="#">3</a></li>
 -                <li><a href="#">4</a></li>
 -                <li><a href="#">5</a></li>
 -                <li><a href="#">&raquo;</a></li>
 -              </ul>
 -            </div>
 +            <ul class="pagination">
 +              <li><a href="#">&laquo;</a></li>
 +              <li><a href="#">1</a></li>
 +              <li><a href="#">2</a></li>
 +              <li><a href="#">3</a></li>
 +              <li><a href="#">4</a></li>
 +              <li><a href="#">5</a></li>
 +              <li><a href="#">&raquo;</a></li>
 +            </ul>
            </div>
  <pre class="prettyprint linenums">
 -&lt;div class="pagination"&gt;
 -  &lt;ul&gt;
 -    &lt;li&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
 -    &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
 -    &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
 -    &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
 -    &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
 -    &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
 -    &lt;li&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;
 -  &lt;/ul&gt;
 -&lt;/div&gt;
 +&lt;ul class="pagination"&gt;
 +  &lt;li&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
 +  &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
 +  &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
 +  &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
 +  &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
++  &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
 +  &lt;li&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;
 +&lt;/ul&gt;
  </pre>
  
  
            <h3>Disabled and active states</h3>
            <p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
            <div class="bs-docs-example">
 -            <div class="pagination pagination-centered">
 -              <ul>
 -                <li class="disabled"><a href="#">&laquo;</a></li>
 -                <li class="active"><a href="#">1</a></li>
 -                <li><a href="#">2</a></li>
 -                <li><a href="#">3</a></li>
 -                <li><a href="#">4</a></li>
 -                <li><a href="#">5</a></li>
 -                <li><a href="#">&raquo;</a></li>
 -             </ul>
 -            </div>
 -          </div>
 -<pre class="prettyprint linenums">
 -&lt;div class="pagination"&gt;
 -  &lt;ul&gt;
 -    &lt;li class="disabled"&gt;&lt;a href="#"&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;
 -    &lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
 -    ...
 -  &lt;/ul&gt;
 -&lt;/div&gt;
 +            <ul class="pagination">
 +              <li class="disabled"><a href="#">&laquo;</a></li>
 +              <li class="active"><a href="#">1</a></li>
 +              <li><a href="#">2</a></li>
 +              <li><a href="#">3</a></li>
 +              <li><a href="#">4</a></li>
 +              <li><a href="#">5</a></li>
 +              <li><a href="#">&raquo;</a></li>
 +           </ul>
 +          </div>
 +<pre class="prettyprint linenums">
 +&lt;ul class="pagination"&gt;
-   &lt;li class="disabled"&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
++  &lt;li class="disabled"&gt;&lt;a href="#"&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;
 +  &lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
 +  ...
 +&lt;/ul&gt;
  </pre>
            <p>You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.</p>
  <pre class="prettyprint linenums">
 -&lt;div class="pagination"&gt;
 -  &lt;ul&gt;
 -    &lt;li class="disabled"&gt;&lt;span&gt;&amp;laquo;&lt;/span&gt;&lt;/li&gt;
 -    &lt;li class="active"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/li&gt;
 -    ...
 -  &lt;/ul&gt;
 -&lt;/div&gt;
 +&lt;ul class="pagination"&gt;
-   &lt;li class="disabled"&gt;&lt;span&gt;Prev&lt;/span&gt;&lt;/li&gt;
++  &lt;li class="disabled"&gt;&lt;span&gt;&amp;laquo;&lt;/span&gt;&lt;/li&gt;
 +  &lt;li class="active"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/li&gt;
 +  ...
 +&lt;/ul&gt;
  </pre>
  
            <h3>Sizes</h3>
Simple merge
index bbaae5f1a03e400ed9a1f22b8befe33d20cd08ac,6d3ff9beee65de453cf010d186d704a7293b7cf7..788801eabab4981a257977563eb5adfd4ac9ab59
          ================================================== -->
          <section id="pagination">
            <div class="page-header">
 -            <h1>{{_i}}Pagination{{/i}} <small>{{_i}}Two options for paging through content{{/i}}</small></h1>
 +            <h1>Pagination <small>Two options for paging through content</small></h1>
            </div>
  
 -          <h2>{{_i}}Standard pagination{{/i}}</h2>
 -          <p>{{_i}}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.{{/i}}</p>
 +          <h2>Standard 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-docs-example">
 -            <div class="pagination">
 -              <ul>
 -                <li><a href="#">&laquo;</a></li>
 -                <li><a href="#">1</a></li>
 -                <li><a href="#">2</a></li>
 -                <li><a href="#">3</a></li>
 -                <li><a href="#">4</a></li>
 -                <li><a href="#">5</a></li>
 -                <li><a href="#">&raquo;</a></li>
 -              </ul>
 -            </div>
 +            <ul class="pagination">
 +              <li><a href="#">&laquo;</a></li>
 +              <li><a href="#">1</a></li>
 +              <li><a href="#">2</a></li>
 +              <li><a href="#">3</a></li>
 +              <li><a href="#">4</a></li>
 +              <li><a href="#">5</a></li>
 +              <li><a href="#">&raquo;</a></li>
 +            </ul>
            </div>
  <pre class="prettyprint linenums">
 -&lt;div class="pagination"&gt;
 -  &lt;ul&gt;
 -    &lt;li&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
 -    &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
 -    &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
 -    &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
 -    &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
 -    &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
 -    &lt;li&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;
 -  &lt;/ul&gt;
 -&lt;/div&gt;
 +&lt;ul class="pagination"&gt;
 +  &lt;li&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
 +  &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
 +  &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
 +  &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
 +  &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
++  &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
 +  &lt;li&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;
 +&lt;/ul&gt;
  </pre>
  
  
            <hr class="bs-docs-separator">
  
  
 -          <h2>{{_i}}Options{{/i}}</h2>
 +          <h2>Options</h2>
  
 -          <h3>{{_i}}Disabled and active states{{/i}}</h3>
 -          <p>{{_i}}Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.{{/i}}</p>
 +          <h3>Disabled and active states</h3>
 +          <p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
            <div class="bs-docs-example">
 -            <div class="pagination pagination-centered">
 -              <ul>
 -                <li class="disabled"><a href="#">&laquo;</a></li>
 -                <li class="active"><a href="#">1</a></li>
 -                <li><a href="#">2</a></li>
 -                <li><a href="#">3</a></li>
 -                <li><a href="#">4</a></li>
 -                <li><a href="#">5</a></li>
 -                <li><a href="#">&raquo;</a></li>
 -             </ul>
 -            </div>
 +            <ul class="pagination">
 +              <li class="disabled"><a href="#">&laquo;</a></li>
 +              <li class="active"><a href="#">1</a></li>
 +              <li><a href="#">2</a></li>
 +              <li><a href="#">3</a></li>
 +              <li><a href="#">4</a></li>
 +              <li><a href="#">5</a></li>
 +              <li><a href="#">&raquo;</a></li>
 +           </ul>
            </div>
  <pre class="prettyprint linenums">
 -&lt;div class="pagination"&gt;
 -  &lt;ul&gt;
 -    &lt;li class="disabled"&gt;&lt;a href="#"&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;
 -    &lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
 -    ...
 -  &lt;/ul&gt;
 -&lt;/div&gt;
 +&lt;ul class="pagination"&gt;
-   &lt;li class="disabled"&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
++  &lt;li class="disabled"&gt;&lt;a href="#"&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;
 +  &lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
 +  ...
 +&lt;/ul&gt;
  </pre>
 -          <p>{{_i}}You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.{{/i}}</p>
 +          <p>You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.</p>
  <pre class="prettyprint linenums">
 -&lt;div class="pagination"&gt;
 -  &lt;ul&gt;
 -    &lt;li class="disabled"&gt;&lt;span&gt;&amp;laquo;&lt;/span&gt;&lt;/li&gt;
 -    &lt;li class="active"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/li&gt;
 -    ...
 -  &lt;/ul&gt;
 -&lt;/div&gt;
 +&lt;ul class="pagination"&gt;
-   &lt;li class="disabled"&gt;&lt;span&gt;Prev&lt;/span&gt;&lt;/li&gt;
++  &lt;li class="disabled"&gt;&lt;span&gt;&amp;laquo;&lt;/span&gt;&lt;/li&gt;
 +  &lt;li class="active"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/li&gt;
 +  ...
 +&lt;/ul&gt;
  </pre>
  
 -          <h3>{{_i}}Sizes{{/i}}</h3>
 -          <p>{{_i}}Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.{{/i}}</p>
 +          <h3>Sizes</h3>
 +          <p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p>
            <div class="bs-docs-example">
 -            <div class="pagination pagination-large">
 -              <ul>
 +            <div>
 +              <ul class="pagination pagination-large">
                  <li><a href="#">&laquo;</a></li>
                  <li><a href="#">1</a></li>
                  <li><a href="#">2</a></li>