8 merge requests!4427Use variable for desktop media query,!4258Aria,!4248Amended mentions of 'javascript' to the correct 'JavaScript',!4235Patch 1,!4232Fixing the modal z-index issue + make modal stacking possible,!42132.1.0 wip,!4165Patch 2,!39192.1.0 wip
<p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.</p>
<h3>Examples</h3>
<p>A single example shown as it might be displayed across multiple pages.</p>
<p>A single example shown as it might be displayed across multiple pages.</p>
<h1>Pagination <small>Two options for paging through content</small></h1>
<h1>Pagination <small>Two options for paging through content</small></h1>
</div>
</div>
<h2>Multicon-page pagination</h2>
<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>
<h3>When to use</h3>
<divclass="bs-docs-example">
<p>Ultra simplistic and minimally styled 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>
<divclass="pagination">
<h3>Stateful page links</h3>
<ul>
<p>Links are customizable and work in a number of circumstances with the right class. <code>.disabled</code> for unclickable links and <code>.active</code> for current page.</p>
<li><ahref="#">«</a></li>
<h3>Flexible alignment</h3>
<li><ahref="#">1</a></li>
<p>Add either of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.</p>
<li><ahref="#">2</a></li>
<li><ahref="#">3</a></li>
<h3>Examples</h3>
<li><ahref="#">4</a></li>
<p>The default pagination component is flexible and works in a number of variations.</p>
<li><ahref="#">5</a></li>
<divclass="pagination">
<li><ahref="#">»</a></li>
<ul>
</ul>
<liclass="disabled"><ahref="#">«</a></li>
</div>
<liclass="active"><ahref="#">1</a></li>
<li><ahref="#">2</a></li>
<li><ahref="#">3</a></li>
<li><ahref="#">4</a></li>
<li><ahref="#">»</a></li>
</ul>
</div>
<divclass="pagination">
<ul>
<li><ahref="#">«</a></li>
<li><ahref="#">10</a></li>
<liclass="active"><ahref="#">11</a></li>
<li><ahref="#">12</a></li>
<li><ahref="#">»</a></li>
</ul>
</div>
<divclass="pagination">
<ul>
<li><ahref="#">«</a></li>
<liclass="active"><ahref="#">10</a></li>
<liclass="disabled"><ahref="#">...</a></li>
<li><ahref="#">20</a></li>
<li><ahref="#">»</a></li>
</ul>
</div>
<divclass="pagination pagination-centered">
<ul>
<liclass="active"><ahref="#">1</a></li>
<li><ahref="#">2</a></li>
<li><ahref="#">3</a></li>
<li><ahref="#">4</a></li>
<li><ahref="#">5</a></li>
</ul>
</div>
</div>
<h3>Markup</h3>
<p>Wrapped in a <code><div></code>, pagination is just a <code><ul></code>.</p>
<h2>Pager <small>For quick previous and next links</small></h2>
<h3>About pager</h3>
<hrclass="bs-docs-separator">
<p>The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.</p>
<h4>Optional disabled state</h4>
<p>Pager links also use the general <code>.disabled</code> class from the pagination.</p>
<h2>Options</h2>
<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>
<p>Add one of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.</p>
<p>Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.</p>
<h3>Default example</h3>
<h3>Default example</h3>
<p>By default, the pager centers links.</p>
<p>By default, the pager centers links.</p>
<ulclass="pager">
<divclass="bs-docs-example">
<li><ahref="#">Previous</a></li>
<ulclass="pager">
<li><ahref="#">Next</a></li>
<li><ahref="#">Previous</a></li>
</ul>
<li><ahref="#">Next</a></li>
</ul>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<ul class="pager">
<ul class="pager">
<li>
<li>
...
@@ -1212,10 +1238,12 @@
...
@@ -1212,10 +1238,12 @@
<h3>Aligned links</h3>
<h3>Aligned links</h3>
<p>Alternatively, you can align each link to the sides:</p>
<p>Alternatively, you can align each link to the sides:</p>
<p>{{_i}}Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.{{/i}}</p>
<h3>{{_i}}Examples{{/i}}</h3>
<p>{{_i}}A single example shown as it might be displayed across multiple pages.{{/i}}</p>
<p>{{_i}}A single example shown as it might be displayed across multiple pages.{{/i}}</p>
<h1>{{_i}}Pagination{{/i}}<small>{{_i}}Two options for paging through content{{/i}}</small></h1>
<h1>{{_i}}Pagination{{/i}}<small>{{_i}}Two options for paging through content{{/i}}</small></h1>
</div>
</div>
<h2>{{_i}}Multicon-page pagination{{/i}}</h2>
<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>
<h3>{{_i}}When to use{{/i}}</h3>
<divclass="bs-docs-example">
<p>{{_i}}Ultra simplistic and minimally styled 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>
<divclass="pagination">
<h3>{{_i}}Stateful page links{{/i}}</h3>
<ul>
<p>{{_i}}Links are customizable and work in a number of circumstances with the right class. <code>.disabled</code> for unclickable links and <code>.active</code> for current page.{{/i}}</p>
<li><ahref="#">«</a></li>
<h3>{{_i}}Flexible alignment{{/i}}</h3>
<li><ahref="#">1</a></li>
<p>{{_i}}Add either of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.{{/i}}</p>
<li><ahref="#">2</a></li>
<li><ahref="#">3</a></li>
<h3>{{_i}}Examples{{/i}}</h3>
<li><ahref="#">4</a></li>
<p>{{_i}}The default pagination component is flexible and works in a number of variations.{{/i}}</p>
<li><ahref="#">5</a></li>
<divclass="pagination">
<li><ahref="#">»</a></li>
<ul>
</ul>
<liclass="disabled"><ahref="#">«</a></li>
</div>
<liclass="active"><ahref="#">1</a></li>
<li><ahref="#">2</a></li>
<li><ahref="#">3</a></li>
<li><ahref="#">4</a></li>
<li><ahref="#">»</a></li>
</ul>
</div>
<divclass="pagination">
<ul>
<li><ahref="#">«</a></li>
<li><ahref="#">10</a></li>
<liclass="active"><ahref="#">11</a></li>
<li><ahref="#">12</a></li>
<li><ahref="#">»</a></li>
</ul>
</div>
<divclass="pagination">
<ul>
<li><ahref="#">«</a></li>
<liclass="active"><ahref="#">10</a></li>
<liclass="disabled"><ahref="#">...</a></li>
<li><ahref="#">20</a></li>
<li><ahref="#">»</a></li>
</ul>
</div>
<divclass="pagination pagination-centered">
<ul>
<liclass="active"><ahref="#">1</a></li>
<li><ahref="#">2</a></li>
<li><ahref="#">3</a></li>
<li><ahref="#">4</a></li>
<li><ahref="#">5</a></li>
</ul>
</div>
</div>
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}Wrapped in a <code><div></code>, pagination is just a <code><ul></code>.{{/i}}</p>
<h2>{{_i}}Pager{{/i}}<small>{{_i}}For quick previous and next links{{/i}}</small></h2>
<h3>{{_i}}About pager{{/i}}</h3>
<hrclass="bs-docs-separator">
<p>{{_i}}The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.{{/i}}</p>
<h4>{{_i}}Optional disabled state{{/i}}</h4>
<p>{{_i}}Pager links also use the general <code>.disabled</code> class from the pagination.{{/i}}</p>
<h2>{{_i}}Options{{/i}}</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>
<p>{{_i}}Add one of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.{{/i}}</p>
<p>{{_i}}Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.{{/i}}</p>
<h3>{{_i}}Default example{{/i}}</h3>
<h3>{{_i}}Default example{{/i}}</h3>
<p>{{_i}}By default, the pager centers links.{{/i}}</p>
<p>{{_i}}By default, the pager centers links.{{/i}}</p>
<ulclass="pager">
<divclass="bs-docs-example">
<li><ahref="#">{{_i}}Previous{{/i}}</a></li>
<ulclass="pager">
<li><ahref="#">{{_i}}Next{{/i}}</a></li>
<li><ahref="#">{{_i}}Previous{{/i}}</a></li>
</ul>
<li><ahref="#">{{_i}}Next{{/i}}</a></li>
</ul>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<ul class="pager">
<ul class="pager">
<li>
<li>
...
@@ -1135,10 +1161,12 @@
...
@@ -1135,10 +1161,12 @@
<h3>{{_i}}Aligned links{{/i}}</h3>
<h3>{{_i}}Aligned links{{/i}}</h3>
<p>{{_i}}Alternatively, you can align each link to the sides:{{/i}}</p>
<p>{{_i}}Alternatively, you can align each link to the sides:{{/i}}</p>
