yii使用bootstrap分页样式的实例

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。

本文为大家介绍的是yii使用bootstrap分页样式方法，感兴趣的同学参考下。

yii自带了分页类和页面样式，但如果是yii+bootstrap开发的项目如何在不修改yii的情况下使用bootstrap分页样式呢。

本文就为大家介绍一种非常简单的方式，想在yii的分页中套用bootstrap样式主要依赖yii CLinkPager中的二个属性htmlOptions和selectedPageCssClass

控制器示例代码

public function actionIndex()
{
 $cid = intval($_GET['cid']);

 $criteria = new CDbCriteria();
 $criteria->addCondition("t.status=1");
 $criteria->addCondition("cid='$cid'");
 $criteria->order="t.time desc";
 $count = Article::model()->count($criteria);
 $pager = new CPagination($count);
 $pager->pageSize=20;
 $pager->applyLimit($criteria);
 $lists = Article::model()->findAll($criteria);

 $this->render('index',array('lists'=>$lists,"pager"=>$pager));
}

上面 代码实现了yii分页，并把$pager分页对象传到视图里，我们再来看一下视图代码

视图代码

<nav>
<?php
$this->widget('CLinkPager',array(
    'header'=>'',
    'firstPageLabel' => '首页',
    'lastPageLabel' => '末页',
    'prevPageLabel' => '上一页',
    'nextPageLabel' => '下一页',
    'pages' => $pager,
    'maxButtonCount'=>8,
    'cssFile'=>false,
    'htmlOptions' =>array("class"=>"pagination"),
    'selectedPageCssClass'=>"active"
 )
 );
?>
</nav>

上面的视图代码要注意以下几个点

1.分页必须在<nav>里

2，htmlOptions选项是必须的，他指定了yii生成的分页div的class名称，在这里我们使用bootstrap的class名

3,selectedPageCssClass选项指定了当前选中页的样多，在这里我们使用bootstrap的active

4.另外还需要把cssFile设为false，不加载分页css样式文件

参考bootstrap官网提供的分页代码，如下图

最终实现的效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Yii2框架BootStrap样式的深入理解

    Yii2框架BootStrap样式的深入理解

    Yii2框架默认采用了bootstrap作为CSS风格,各种视图类组件都如此.之前一直采用默认风格,并在必要的时候添加或者修改一下class来达到目的.但在改版Yii1.1的orange项目时,发现之前也是套的模板,其实没有好好去理解一下bootstrap的那套规则,所以顺便大致梳理一下吧.以basic模板为例,对照http://v3.bootcss.com/css/ 上的内容进行. 看layouts/main.PHP,Yii2默认以HTML5文档类型进行的了,但语言默认是en-US,所以要改,

  • 详解Yii2高级版引入bootstrap.js的一个办法

    在frontend/assets/AppAsset.php 代码示例 namespace frontend\assets; use yii\web\AssetBundle; /** * Main frontend application asset bundle. */ class AppAsset extends AssetBundle { public $basePath = '@webroot'; public $baseUrl = '@web'; public $css = [ 'css

  • Yii2框架引用bootstrap中日期插件yii2-date-picker的方法

    本文实例讲述了Yii2框架引用bootstrap中日期插件yii2-date-picker的方法.分享给大家供大家参考,具体如下: 最近在学习yii2 框架,发现框架很强大,而且结合了时下许多新的技术在里面. 简单记录一下yii2-date-picker插件的使用方法: 首先先了解一下github中的相关资源:https://github.com/2amigos/yii2-date-picker-widget 其次:在自己的项目中利用上面链接中的相关方法下载此资源,命令为: php compos

  • yii使用bootstrap分页样式的实例

    yii使用bootstrap分页样式的实例

    Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成.Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目. 本文为大家介绍的是yii使用bootstrap分页样式方法,感兴

  • ASP.NET GridView的Bootstrap分页样式

    ASP.NET GridView的Bootstrap分页样式

    本文实例为大家分享了GridView的Bootstrap分页样式,供大家参考,具体内容如下 Revenue.cs收入类,包括实体模型和业务逻辑 public class Revenue { public Revenue(string country, string revenue, string salesmanager, string year) { this.country = country; this.revenue = revenue; this.salesmanager = sale

  • GridView分页的实现以及自定义分页样式功能实例

    GridView分页的实现 复制代码 代码如下: 要在GridView中加入 //实现分页 AllowPaging="true" //一页数据10行 PageSize="10" // 分页时触发的事件 OnPageIndexChanging="gvwDesignationName_PageIndexChanging" 在服务器事件里 复制代码 代码如下: protectedvoid gvwDesignationName_PageIndexChan

  • Thinkphp和Bootstrap结合打造个性的分页样式(推荐)

    Thinkphp和Bootstrap结合打造个性的分页样式(推荐)

    先吐槽一下ThinkPHP3.1版的分页样式,虽然看起来也很简单大方,但是所有的页码全是使用简单的数字,之间的空隙比较小,不大容易点,还有那个"前5页"和"后5页"显得有点多余,因为点击当前显示第一页的"上一页"按钮会自然出来前5页. 3.1的分页效果是这个样子滴: 针对以上种种不太理想的情况,又加上最近学习了ThinkPHP5,在ThinkPHP5中提供了对BootStrap分页样式的完美支持,在thinkphp5中只要引入了BootStrap

  • 基于Bootstrap分页的实例讲解(必看篇)

    基于Bootstrap分页的实例讲解(必看篇)

    前面的话 分页导航几乎在每个网站都可见,好的分页能给用户带来好的用户体验.本文将详细介绍Bootstrap分页 概述 在Bootstrap框架中提供了两种分页导航: ☑ 带页码的分页导航 ☑ 带翻页的分页导航 页码分页 带页码的分页导航,可能是最常见的一种分页导航,特别是在列表页内容超多的时候,会给用户提供分页的导航方式 [默认分页] 平时很多人喜欢用div>a和div>span结构来制作带页码的分页导航.不过,在Bootstrap框架中使用的是ul>li>a这样的结构,在ul标签

  • bootstrap下拉分页样式 带跳转页码

    bootstrap下拉分页样式 带跳转页码

    本文实例为大家分享了bootstrap实现带跳转页码的下拉分页样式,供大家参考,具体内容如下 bootstrap 默认页码是没有下拉页码和分页页码跳转效果的,实际开发中需要对样式进行修改 <!--/分页--> <div class="container"> <div class="row myCenter"> <div class="col-xs-6 col-md-12 col-center-block"

  • ThinkPHP 整合Bootstrap Ajax分页样式

    ThinkPHP 整合Bootstrap Ajax分页样式

    ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $where['name']= array('like','%'.(string)$name.'%'); } $Role=M('Role'); $count= $Role->where($where)->count();// 查询满足要求的总记录数 $Page =new \Think\AjaxPage(

  • 仿dedecms下拉分页样式修改的thinkphp分页类实例

    仿dedecms下拉分页样式修改的thinkphp分页类实例

    本文实例讲述了仿dede下拉分页样式修改的thinkphp分页类.分享给大家供大家参考.具体实现方法如下: 修改thinkphp分页类:如下拉列表式分页(类似dedecms分页): 纯html代码: 复制代码 代码如下: <select name="sldd" style="width:36px" onchange="location.href=this.options[this.selectedIndex].value;"> <

  • 修改 bootstrap table 默认detailRow样式的实例代码

    废话不多说了,直接给大家贴代码,具体代码如下所示: this.$body.find('> tr[data-index] > td > .detail-icon').off('click').on('click', function () { var $this = $(this), //a.detail-icon $tr = $this.parent().parent(), //current row index = $tr.data('index'), row = data[index

  • Bootstrap分页插件之Bootstrap Paginator实例详解

    Bootstrap分页插件之Bootstrap Paginator实例详解

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作.目前经过测试的浏览器包括: Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+. 官网地址:http://bootstrappaginator.org/ DownloadVisit Project in

随机推荐