POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/components/pagination.html

   1 <div class="bs-docs-section">
   2   <h1 id="pagination" class="page-header">Pagination</h1>
   3
   4   <p class="lead">Provide pagination links for your site or app with the multi-page pagination component, or the simpler <a href="#pagination-pager">pager alternative</a>.</p>
   5
   6   <h2 id="pagination-default">Default pagination</h2>
   7   <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>
   8   <div class="bs-example" data-example-id="simple-pagination">
   9     <nav>
  10       <ul class="pagination">
  11         <li>
  12           <a href="#" aria-label="Previous">
  13             <span aria-hidden="true">&laquo;</span>
  14           </a>
  15         </li>
  16         <li><a href="#">1</a></li>
  17         <li><a href="#">2</a></li>
  18         <li><a href="#">3</a></li>
  19         <li><a href="#">4</a></li>
  20         <li><a href="#">5</a></li>
  21         <li>
  22           <a href="#" aria-label="Next">
  23             <span aria-hidden="true">&raquo;</span>
  24           </a>
  25         </li>
  26       </ul>
  27     </nav>
  28   </div>
  29 {% highlight html %}
  30 <nav>
  31   <ul class="pagination">
  32     <li>
  33       <a href="#" aria-label="Previous">
  34         <span aria-hidden="true">&laquo;</span>
  35       </a>
  36     </li>
  37     <li><a href="#">1</a></li>
  38     <li><a href="#">2</a></li>
  39     <li><a href="#">3</a></li>
  40     <li><a href="#">4</a></li>
  41     <li><a href="#">5</a></li>
  42     <li>
  43       <a href="#" aria-label="Next">
  44         <span aria-hidden="true">&raquo;</span>
  45       </a>
  46     </li>
  47   </ul>
  48 </nav>
  49 {% endhighlight %}
  50
  51   <h3>Disabled and active states</h3>
  52   <p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
  53   <div class="bs-example" data-example-id="disabled-active-pagination">
  54     <nav>
  55       <ul class="pagination">
  56         <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
  57         <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
  58         <li><a href="#">2</a></li>
  59         <li><a href="#">3</a></li>
  60         <li><a href="#">4</a></li>
  61         <li><a href="#">5</a></li>
  62         <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
  63      </ul>
  64    </nav>
  65   </div>
  66 {% highlight html %}
  67 <nav>
  68   <ul class="pagination">
  69     <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
  70     <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
  71     ...
  72   </ul>
  73 </nav>
  74 {% endhighlight %}
  75   <p>You can optionally swap out active or disabled anchors for <code>&lt;span&gt;</code>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.</p>
  76 {% highlight html %}
  77 <nav>
  78   <ul class="pagination">
  79     <li class="disabled">
  80       <span>
  81         <span aria-hidden="true">&laquo;</span>
  82       </span>
  83     </li>
  84     <li class="active">
  85       <span>1 <span class="sr-only">(current)</span></span>
  86     </li>
  87     ...
  88   </ul>
  89 </nav>
  90 {% endhighlight %}
  91
  92
  93   <h3>Sizing</h3>
  94   <p>Fancy larger or smaller pagination? Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional sizes.</p>
  95   <div class="bs-example" data-example-id="pagination-sizing">
  96     <nav>
  97       <ul class="pagination pagination-lg">
  98         <li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
  99         <li><a href="#">1</a></li>
 100         <li><a href="#">2</a></li>
 101         <li><a href="#">3</a></li>
 102         <li><a href="#">4</a></li>
 103         <li><a href="#">5</a></li>
 104         <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
 105       </ul>
 106     </nav>
 107     <nav>
 108       <ul class="pagination">
 109         <li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
 110         <li><a href="#">1</a></li>
 111         <li><a href="#">2</a></li>
 112         <li><a href="#">3</a></li>
 113         <li><a href="#">4</a></li>
 114         <li><a href="#">5</a></li>
 115         <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
 116       </ul>
 117     </nav>
 118     <nav>
 119       <ul class="pagination pagination-sm">
 120         <li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
 121         <li><a href="#">1</a></li>
 122         <li><a href="#">2</a></li>
 123         <li><a href="#">3</a></li>
 124         <li><a href="#">4</a></li>
 125         <li><a href="#">5</a></li>
 126         <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
 127       </ul>
 128     </nav>
 129   </div>
 130 {% highlight html %}
 131 <nav><ul class="pagination pagination-lg">...</ul></nav>
 132 <nav><ul class="pagination">...</ul></nav>
 133 <nav><ul class="pagination pagination-sm">...</ul></nav>
 134 {% endhighlight %}
 135
 136
 137   <h2 id="pagination-pager">Pager</h2>
 138   <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>
 139
 140   <h3>Default example</h3>
 141   <p>By default, the pager centers links.</p>
 142   <div class="bs-example" data-example-id="simple-pager">
 143     <nav>
 144       <ul class="pager">
 145         <li><a href="#">Previous</a></li>
 146         <li><a href="#">Next</a></li>
 147       </ul>
 148     </nav>
 149   </div>
 150 {% highlight html %}
 151 <nav>
 152   <ul class="pager">
 153     <li><a href="#">Previous</a></li>
 154     <li><a href="#">Next</a></li>
 155   </ul>
 156 </nav>
 157 {% endhighlight %}
 158
 159   <h3>Aligned links</h3>
 160   <p>Alternatively, you can align each link to the sides:</p>
 161   <div class="bs-example" data-example-id="aligned-pager-links">
 162     <nav>
 163       <ul class="pager">
 164         <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
 165         <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
 166       </ul>
 167     </nav>
 168   </div>
 169 {% highlight html %}
 170 <nav>
 171   <ul class="pager">
 172     <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
 173     <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
 174   </ul>
 175 </nav>
 176 {% endhighlight %}
 177
 178
 179   <h3>Optional disabled state</h3>
 180   <p>Pager links also use the general <code>.disabled</code> utility class from the pagination.</p>
 181   <div class="bs-example" data-example-id="disabled-pager">
 182     <nav>
 183       <ul class="pager">
 184         <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
 185         <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
 186       </ul>
 187     </nav>
 188   </div>
 189 {% highlight html %}
 190 <nav>
 191   <ul class="pager">
 192     <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
 193     <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
 194   </ul>
 195 </nav>
 196 {% endhighlight %}
 197 </div>