diff options
Diffstat (limited to 'docs/components.html')
| -rw-r--r-- | docs/components.html | 114 |
1 files changed, 35 insertions, 79 deletions
diff --git a/docs/components.html b/docs/components.html index 2db1189a9..b5d39b7be 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1474,21 +1474,47 @@ <hr class="bs-docs-separator"> - <h2>Sizes</h2> - <p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</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> <div class="bs-docs-example"> - <div class="pagination pagination-large"> + <div class="pagination pagination-centered"> <ul> - <li><a href="#">«</a></li> - <li><a href="#">1</a></li> + <li class="disabled"><a href="#">«</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="#">»</a></li> - </ul> + </ul> </div> - <div class="pagination"> + </div> +<pre class="prettyprint linenums"> +<div class="pagination"> + <ul> + <li class="disabled"><a href="#">Prev</a></li> + <li class="active"><a href="#">1</a></li> + ... + </ul> +</div> +</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"> +<div class="pagination"> + <ul> + <li class="disabled"><span>Prev</span></li> + <li class="active"><span>1</span></li> + ... + </ul> +</div> +</pre> + + <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> <li><a href="#">«</a></li> <li><a href="#">1</a></li> @@ -1525,86 +1551,16 @@ <pre class="prettyprint linenums"> <div class="pagination pagination-large"> <ul> - <li><a href="#">«</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="#">»</a></li> - </ul> -</div> -<div class="pagination"> - <ul> - <li><a href="#">«</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="#">»</a></li> + ... </ul> </div> <div class="pagination pagination-small"> <ul> - <li><a href="#">«</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="#">»</a></li> - </ul> -</div> -<div class="pagination pagination-mini"> - <ul> - <li><a href="#">«</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="#">»</a></li> - </ul> -</div> -</pre> - - - <hr class="bs-docs-separator"> - - - <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> - <div class="bs-docs-example"> - <div class="pagination pagination-centered"> - <ul> - <li class="disabled"><a href="#">«</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="#">»</a></li> - </ul> - </div> - </div> -<pre class="prettyprint linenums"> -<div class="pagination"> - <ul> - <li class="disabled"><a href="#">Prev</a></li> - <li class="active"><a href="#">1</a></li> ... </ul> </div> -</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"> -<div class="pagination"> +<div class="pagination pagination-mini"> <ul> - <li class="disabled"><span>Prev</span></li> - <li class="active"><span>1</span></li> ... </ul> </div> |
