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.
- -A single example shown as it might be displayed across multiple pages.
- - - - -HTML is your standard unordered list with links.
+<ul class="breadcrumb"> - <li> - <a href="#">Home</a> <span class="divider">/</span> - </li> - <li> - <a href="#">Library</a> <span class="divider">/</span> - </li> + <li><a href="#">Home</a> <span class="divider">/</span></li> + <li><a href="#">Library</a> <span class="divider">/</span></li> <li class="active">Data</li> </ul>@@ -1120,85 +1112,119 @@
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.
-Links are customizable and work in a number of circumstances with the right class. .disabled for unclickable links and .active for current page.
Add either of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.
The default pagination component is flexible and works in a number of variations.
-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.
+ - - - - -Wrapped in a <div>, pagination is just a <ul>.
<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>
- <li class="active">
- <a href="#">1</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="#">Next</a></li>
+ <li><a href="#">Next</a></li>
</ul>
</div>
- 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.
-Pager links also use the general .disabled class from the pagination.
Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.
+<div class="pagination "> + <ul> + <li class="disabled"><a href="#">Prev</a></li> + <li class="active"><a href="#">1</a></li> + ... + </ul> +</div> ++ +
Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.
+<div class="pagination pagination-centered"> + ... +</div> ++ +
+<div class="pagination pagination-right"> + ... +</div> ++ + +
Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.
By default, the pager centers links.
- +<ul class="pager"> <li> @@ -1212,10 +1238,12 @@+Aligned links
Alternatively, you can align each link to the sides:
-
<ul class="pager">
<li class="previous">
@@ -1225,6 +1253,23 @@
<a href="#">Newer →</a>
</li>
</ul>
+
+
+ Pager links also use the general .disabled utility class from the pagination.
+<ul class="pager"> + <li class="previous disabled"> + <a href="#">← Older</a> + </li> + ... +</ul>diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index aa1032c06..149d81644 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1000,34 +1000,26 @@
{{_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}}
- -{{_i}}A single example shown as it might be displayed across multiple pages.{{/i}}
- - - - -{{_i}}HTML is your standard unordered list with links.{{/i}}
+
<ul class="breadcrumb">
- <li>
- <a href="#">{{_i}}Home{{/i}}</a> <span class="divider">/</span>
- </li>
- <li>
- <a href="#">{{_i}}Library{{/i}}</a> <span class="divider">/</span>
- </li>
+ <li><a href="#">{{_i}}Home{{/i}}</a> <span class="divider">/</span></li>
+ <li><a href="#">{{_i}}Library{{/i}}</a> <span class="divider">/</span></li>
<li class="active">{{_i}}Data{{/i}}</li>
</ul>
@@ -1043,85 +1035,119 @@
{{_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}}
-{{_i}}Links are customizable and work in a number of circumstances with the right class. .disabled for unclickable links and .active for current page.{{/i}}
{{_i}}Add either of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.{{/i}}
{{_i}}The default pagination component is flexible and works in a number of variations.{{/i}}
-{{_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}}
+ - - - - -{{_i}}Wrapped in a <div>, pagination is just a <ul>.{{/i}}
<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>
- <li class="active">
- <a href="#">1</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="#">Next</a></li>
+ <li><a href="#">Next</a></li>
</ul>
</div>
- {{_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}}
-{{_i}}Pager links also use the general .disabled class from the pagination.{{/i}}
{{_i}}Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.{{/i}}
+<div class="pagination "> + <ul> + <li class="disabled"><a href="#">Prev</a></li> + <li class="active"><a href="#">1</a></li> + ... + </ul> +</div> ++ +
{{_i}}Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.{{/i}}
+<div class="pagination pagination-centered"> + ... +</div> ++ +
+<div class="pagination pagination-right"> + ... +</div> ++ + +
{{_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}}
{{_i}}By default, the pager centers links.{{/i}}
- +<ul class="pager"> <li> @@ -1135,10 +1161,12 @@+{{_i}}Aligned links{{/i}}
{{_i}}Alternatively, you can align each link to the sides:{{/i}}
-
<ul class="pager">
<li class="previous">
@@ -1148,6 +1176,23 @@
<a href="#">{{_i}}Newer →{{/i}}</a>
</li>
</ul>
+
+
+ {{_i}}Pager links also use the general .disabled utility class from the pagination.{{/i}}
+<ul class="pager">
+ <li class="previous disabled">
+ <a href="#">{{_i}}← Older{{/i}}</a>
+ </li>
+ ...
+</ul>