快捷導(dǎo)航

bootstrap下拉分頁樣式帶跳轉(zhuǎn)頁碼

更新時(shí)間：2018年12月29日 15:54:01 作者：我不是法海

這篇文章主要為大家詳細(xì)介紹了bootstrap下拉分頁樣式，帶跳轉(zhuǎn)頁碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了bootstrap實(shí)現(xiàn)帶跳轉(zhuǎn)頁碼的下拉分頁樣式，供大家參考，具體內(nèi)容如下

bootstrap 默認(rèn)頁碼是沒有下拉頁碼和分頁頁碼跳轉(zhuǎn)效果的，實(shí)際開發(fā)中需要對樣式進(jìn)行修改

<!--/分頁-->
  <div class="container"> 
 <div class="row myCenter"> 
  <div class="col-xs-6 col-md-12 col-center-block"> 
  <ul class="pagination col-md-5 col-center-block">
  <li><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>
  <li><label>
 <select id="pageSize" onchange="research()"
 aria-controls="DataTables_Table_0" size="1" name="DataTables_Table_0_length" class="g-pages">
 <option selected="selected" value="5">5條/頁</option>
 <option value="10">10條/頁</option>
 <option value="20">20條/頁</option>
 <option value="30">30條/頁</option>
 </select>
 </label>
 </li> 
 <li>跳至<input type="text" class="g-input">頁<input type="button" onclick="" value="GO"></input></li>
  </ul>
  </div> 
 </div> 
 </div> 
<!--分頁/-->

參考了完美實(shí)現(xiàn)bootstrap分頁查詢文章中的樣式進(jìn)行更改

修改后的樣式效果圖

為您的網(wǎng)站或應(yīng)用提供帶有展示頁碼的分頁組件，或者可以使用簡單的翻頁組件。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript該如何學(xué)習(xí) 怎樣輕松學(xué)習(xí)JavaScript
JavaScript該如何學(xué)習(xí)？如何輕松學(xué)習(xí)JavaScript？這篇文章主要介紹了輕松學(xué)習(xí)JavaScript的方法
2017-06-06
JavaScript實(shí)現(xiàn)班級抽簽小程序
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)班級抽簽小程序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
javascript解析ajax返回的xml和json格式數(shù)據(jù)實(shí)例詳解
這篇文章主要介紹了javascript解析ajax返回的xml和json格式數(shù)據(jù),結(jié)合實(shí)例形式詳細(xì)分析了JS ajax調(diào)用及返回值中xml與json格式數(shù)據(jù)的處理技巧,需要的朋友可以參考下
2017-01-01
mui開發(fā)中獲取單選按鈕、復(fù)選框的值(實(shí)例講解)
下面小編就為大家?guī)硪黄猰ui開發(fā)中獲取單選按鈕、復(fù)選框的值(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07
JavaScript函數(shù)柯里化詳解
柯里化函數(shù)主要起到預(yù)處理的作用。接下來通過本文給大家介紹JavaScript函數(shù)柯里化有什么作用及實(shí)現(xiàn)bind方法，非常具有參考價(jià)值特此分享供大家學(xué)習(xí)
2016-04-04
js數(shù)組與字符串常用方法總結(jié)
本文主要總結(jié)了js數(shù)組與字符串的常用方法。具有一定的參考價(jià)值，下面跟著小編一起來看下吧
2017-01-01
微信小程序登錄會話密鑰session失效解決方案
這篇文章主要為大家介紹了微信小程序登錄會話密鑰session失效解決方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-04-04
Ajax實(shí)現(xiàn)搜索框提示功能
這篇文章介紹了Ajax實(shí)現(xiàn)搜索框提示功能的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-04-04
js實(shí)現(xiàn)點(diǎn)擊切換checkbox背景圖片的簡單實(shí)例
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)點(diǎn)擊切換checkbox背景圖片的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-05-05
JavaScript隱式類型轉(zhuǎn)換例子總結(jié)
這篇文章主要介紹了JavaScript隱式類型轉(zhuǎn)換例子總結(jié),熟練掌握類型轉(zhuǎn)換，理解其中的規(guī)律。可以讓你的代碼更簡潔更安全,下文圍繞主題JS隱式轉(zhuǎn)換,需要的朋友可以參考一下
2022-08-08