14th rounds of Bootstrap3.0 Learning (paging and badges)

Before reading, you can also go to the Bootstrap3.0 getting started learning series navigation to view the http://www.cnblogs.com/aehyok/p/3404867.html

This article mainly describes the following content:

Provides multi-page components for your website or application, or simply replaces them with pages.

Default Page

This simple page is sent out and used in applications or search results. This bulk is easy to see, easy to scale, and has a large click area.

    <ul =>      <li><a href=>&laquo;</a></li>      <li><a href=></a></li>      <li><a href=></a></li>      <li><a href=></a></li>      <li><a href=></a></li>      <li><a href=></a></li>      <li><a href=>&raquo;</a></li>    </ul> 

Activation and disabling status

Links can be customized under different circumstances. For links that cannot be clicked.disabledAnd.activeThe current page is displayed.

    <ul =>      <li =><a href=>&laquo;</a></li>      <li =><a href=></a></li>      <li><a href=></a></li>      <li><a href=></a></li>      <li><a href=></a></li>      <li><a href=></a></li>      <li><a href=>&raquo;</a></li>    </ul>  

You can also apply active or disabled<span>Label to maintain the desired style and remove the click function.

    <ul =>      <li =><a href=>&laquo;</a></li>      <li =><span> <span =>(current)</span></span></li>      <li><a href=></a></li>      <li><a href=></a></li>      <li><a href=></a></li>      <li><a href=></a></li>      <li><a href=>&raquo;</a></li>    </ul> 

You can click test to see if the click function is removed.

Dimensions

Want a smaller or larger page? To get more dimensions, add.pagination-lgOr.pagination-smRight.

     <p></p>    <ul =>      <li =><a href=>&laquo;</a></li>      <li =><span> <span =>(current)</span></span></li>      <li><a href=></a></li>      <li><a href=></a></li>      <li><a href=></a></li>      <li><a href=></a></li>      <li><a href=>&raquo;</a></li>    </ul>      <p></p>     <ul =>      <li =><a href=>&laquo;</a></li>      <li =><span> <span =>(current)</span></span></li>      <li><a href=></a></li>      <li><a href=></a></li>      <li><a href=></a></li>      <li><a href=></a></li>      <li><a href=>&raquo;</a></li>    </ul>     <p></p>    <ul =>      <li =><a href=>&laquo;</a></li>      <li =><span> <span =>(current)</span></span></li>      <li><a href=></a></li>      <li><a href=></a></li>      <li><a href=></a></li>      <li><a href=></a></li>      <li><a href=>&raquo;</a></li>    </ul> 

Flip

With lightweight tags and styles, you can easily flip pages on the previous and next pages. It's great to use it on simple sites like blogs and magazines.

Default case

In the default page flip, the link is centered.

<ul =>  <li><a href=>Previous</a></li>  <li><a href=>Next</a></li></ul>

Alignment Link

You can align the link to both ends as an alternative.

<ul =>  <li =><a href=>&larr; Older</a></li>  <li =><a href=>Newer &rarr;</a></li></ul>

Optional disable status

The paging link is also in.disabledTool class.

    <ul =>      <li =><a href=>&larr; Older</a></li>      <li =><a href=>Newer &rarr;</a></li>    </ul>

Add links, Bootstrap navigation, etc.<span class="badge">To easily highlight new or unread entries.

    <a href=><span =></span></a>

Self colapsing)

When there are no new or unread entries, the badges with no content will disappear (through CSS:emptySelector implementation)

<a   href=><span =></span></a>

Cross-browser compatibility

The badge does not automatically disappear in Internet Explorer 8 because it needs:emptySelector support.

Adapt to the activation status of Navigation

Badges in capsule-style navigation and character-style navigation have built-in styles.

<ul =>  <li =>    <a href=>      <span =></span></a>  </li>  <li><a href=>School</a></li>  <li><a href=>School</a></li>  <li><a href=>School</a></li></ul>

Paging will inevitably be used in the data list. Using badges just right will also bring a lot of new things to the page layout.

This article has been updated to the Bootstrap3.0 getting started learning series navigation http://www.cnblogs.com/aehyok/p/3404867.html