diff options
Diffstat (limited to 'docs/templates')
| -rw-r--r-- | docs/templates/pages/components.mustache | 114 |
1 files changed, 35 insertions, 79 deletions
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index c674863f2..67fbf5535 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1403,21 +1403,47 @@ <hr class="bs-docs-separator"> - <h2>{{_i}}Sizes{{/i}}</h2> - <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> + <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> <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>{{_i}}You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.{{/i}}</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>{{_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> + <div class="bs-docs-example"> + <div class="pagination pagination-large"> <ul> <li><a href="#">«</a></li> <li><a href="#">1</a></li> @@ -1454,86 +1480,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>{{_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> - <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>{{_i}}You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.{{/i}}</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> |
