yii2.0 面包屑的使用

yii2中面包屑是yii2自带的小部件,类似本网站的导航栏应该就是采用面包屑来完成的

例子如下,需要引入 yii\widgets\Breadcrumbs

echo Breadcrumbs::widget([
    ‘homeLink‘ => [‘label‘ => ‘首页‘, ‘url‘ => [‘site/index‘]],
    ‘itemTemplate‘ => "

  • {link}
  • \n", //全局模板  运用到每个link
        ‘links‘ => [
            [
                ‘label‘ => ‘文章列表‘,
                ‘url‘ => [‘site/index‘],
                ‘template‘ => "
  • {link}
  • " //只会引用到该类模板
            ],
            [
                ‘label‘ => ‘文章详情‘,
                ‘url‘ => [‘site/view‘, ‘id‘=>1]//如果需要传参这种格式
            ],
            ‘编辑‘,//没有链接的

],
    ‘options‘ => [//设置html属性
        ‘class‘ => ‘‘
    ]
]);
?>

注意:如果加入options可能会导致样式覆盖,达不到你想要的效果

时间: 2024-12-29 01:33:51

yii2.0 面包屑的使用的相关文章

yii2更改面包屑的首页链接

<?= Breadcrumbs::widget([ 'homeLink' => ['label' => 'Home', 'url' => Yii::$app->getHomeUrl() . 'index.php?r=dashboard/index'], 'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [], ]); ?>  

CSS2.0实现面包屑

本文转载自 http://www.cnblogs.com/tugenhua0707/p/3485384.html 面包屑这样的 我们以前都是用背景图片做这块工作,但是直到大概2个星期之前在新浪微博上看到用css3.0实现这样的面包屑 但是目前情况下IE6-8并不支持css3.0 只有标准游览器(像火狐 谷歌等支持).由于有前一次总结一篇关于"CSS实现气泡框效果"的文章 其中有关于怎么样实现小三角形的列子  所以感觉用那个小三角形可以正好模拟这块工作,所以也就试着做了一个.下面我们来看

CSS实现面包屑

面包屑在用户引导方面起到很大作用,可以清晰的为用户指示出其当前所在位置,以及访问到此的整个路径如何,另一方面,面包屑也可以将较长的表单分割成一步一步完成且互动性较强的任务式表单填写.可见其在网页中的重要性.但样式美观的面包屑包含一些形状,这在CSS3以前得靠图片等其他方式实现,现在有了CSS3之后,我们可以很方便的用CSS绘制出常见的面包屑. 下面的案例中涉及了三个内容,所以将其记录于此: 1. display:inline-block的间距文题(是由于我们格式化代码时换行导致) 2. bord

css制作面包屑导航

css2制作面包屑导航主要的原理就是利用绝对定位以及当元素的宽度和高度都为零时边框的挤压性质,效果图 代码: <ul>     <li>HTML<i></i></li>     <li><em></em>CSS<i></i></li>     <li><em></em>JavaScript<i></i></li

CSS3面包屑导航

原文:http://www.helloweba.com/view-blog-347.html HTML HTML结构非常简单,一个有序列表ol,外面又<nav>包裹. 面包屑导航条的结构,我们给ol加上class样式为:.cd-breadcrumb,那么当前位置的层级li加上class样式为:.current. <nav>     <ol class="cd-breadcrumb">         <li><a href=&quo

Bootstrap中面包屑导航实例

通过重写样式breadcrumb可以更改分割的符默认是单斜杠,实例重写后是双斜杠: <style type="text/css">    .breadcrumb > li + li:before {    color: #CCCCCC;    content: "// ";    padding: 0 5px;}     </style> 代码实例: <div class="container">    

MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航

上篇文章我们完成了 动态生成多级菜单 这个实用组件. 本篇文章我们要开发另一个实用组件:面包屑导航. 面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱特",当汉赛尔和格莱特穿过森林时,不小心迷路了,但是他们发现在沿途走过的地方都撒下了面包屑,让这些面包屑来帮助他们找到回家的路.所以,面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回.(摘自百度百科) 要实现面包屑导航,也可以直接从nuget搜一些sitemap组件直接使用. 当然,和

knpMenuBundle制作面包屑导航 左侧导航 碉堡了

最近做一个小项目,用的symfony3玩的. 之前一直深受别的框架影响.习惯把链接管理写在数据库里,这样方面操作. 但是今天按照以前的思路做下来别的都还正常但是做面包屑导航的时候就遇到问题了.于是找了一个knpmenubundle来重做了栏目  发现这样做真的好快.比以前做的快多了 首先按照symfony官网中使用教程来操作. 简单的东西直接按官网走就解决了. https://github.com/KnpLabs/KnpMenuBundle/blob/master/Resources/doc/i

带箭头的面包屑导航栏

制作漂亮美观的面包屑导航栏 在开始之前,我要照例给大家科普一下啥叫面包屑导航栏 类似于下面这几种的 主页>栏目页>文章页面 主页/栏目页/文章页面 可以告诉访问者他们目前在网站中的位置以及如何返回的DOM叫面包屑导航栏 但是...... 你不觉得这个不好看吗? 如果哪一天,你们公司的UI给你一张图,图里的面包屑导航栏是这样的 这样的 又或者是其他带图案的面包屑导航栏,这时候应该怎么做? 可能有朋友说这个简单,so easy,直接找个图案给导航栏加background就行了 可是,真的有这么简单