Bootstrap頁面配置18 - BS導航路徑以及分頁器

標籤：style   blog   http   color   strong   io   2014   cti   

導航路徑：又叫“麵包屑”，功能是讓使用者知道所處的位置。

<!--麵包屑--><ul class=‘breadcrumb‘>    <li><a href=‘#‘>首頁</a> <span class=‘divider‘>></span></li>    <li><a href=‘#‘>餐廳列表</a> <span class=‘divider‘>></span></li>    <li class=‘active‘><a href=‘#‘>餐廳詳細</a></li></ul>

分頁器：一般用在內容的列表頁面，在不同的內容頁面來回的跳轉。

<!--分頁器--><div class=‘ pagination pagination-centered‘>    <ul>        <li><a href=‘#‘>首頁</a></li>        <li><a href=‘#‘>上一頁</a></li>        <li><a href=‘#‘>6</a></li>        <li><a href=‘#‘>7</a></li>        <li><a href=‘#‘>8</a></li>        <li><a href=‘#‘>9</a></li>        <li class=‘active‘><a href=‘#‘>10</a></li>        <li><a href=‘#‘>11</a></li>        <li><a href=‘#‘>12</a></li>        <li><a href=‘#‘>13</a></li>        <li><a href=‘#‘>14</a></li>        <li><a href=‘#‘>15</a></li>        <li><a href=‘#‘>下一頁</a></li>        <li><a href=‘#‘>尾頁</a></li>    </ul></div>

置中顯示

同過以下類來控制分頁顯示的位置

.pagination pagination-centered:置中

.pagination pagination-right:居右

.pagination pagination-centered:居左（預設）

簡單的分頁器：

<!--簡單的分頁器--><div class=‘pager‘>    <ul>                <li><a href=‘#‘>上一頁</a></li>        <li><a href=‘#‘>下一頁</a></li>            </ul></div>

居左（上一頁）-居右（下一頁）的簡單分頁器：

<ul class=‘pager‘>    <li><a href=‘#‘>上一頁</a></li>    <li><a href=‘#‘>下一頁</a></li></ul>