Über yii mit dem Bootstrap-Paging-Stil

In diesem Artikel werden hauptsächlich Beispiele für die Verwendung des Bootstrap-Paging-Stils vorgestellt. Ich werde ihn jetzt mit Ihnen teilen und als Referenz verwenden.

Bootstrap ist ein von Twitter gestartetes Open-Source-Toolkit für die Front-End-Entwicklung. Es wurde von den Twitter-Designern Mark Otto und Jacob Thornton entwickelt und ist ein CSS/HTML-Framework. Bootstrap stellt elegante HTML- und CSS-Spezifikationen bereit, die in der dynamischen CSS-Sprache Less geschrieben sind. Bootstrap erfreut sich seit seiner Einführung großer Beliebtheit und ist ein beliebtes Open-Source-Projekt auf GitHub, darunter MSNBC (Microsoft National Broadcasting Company) Breaking News der NASA.

In diesem Artikel wird die Verwendung des Bootstrap-Paging-Stils in Yii vorgestellt. Interessierte Schüler können sich darauf beziehen.

yii enthält Paging-Klassen und Seitenstile. Wenn es sich jedoch um ein von yii+bootstrap entwickeltes Projekt handelt, wie kann ich den Bootstrap-Paging-Stil verwenden, ohne yii zu ändern?

Dieser Artikel stellt Ihnen eine sehr einfache Möglichkeit vor, den Bootstrap-Stil im yii-Paging anzuwenden. Sie verlassen sich hauptsächlich auf die beiden Attribute htmlOptions und selectedPageCssClass im yii CLinkPager

Controller-Beispielcode

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));
}

Der obige Code implementiert yii-Paging und übergibt das $pager-Paging-Objekt an die Ansicht.

Code anzeigen

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

Der obige Ansichtscode sollte die folgenden Punkte beachten

1