面包屑导航面包屑导航的来源

面包屑导航时间:2021-07-28 阅读:()

如何使用面包屑导航组件

导航 Bootstrap中可用的导航有相似的标记，用基类/jquery/1/bootstrap/3.2.0/js/bootstrap.min.js"></script>--> </body> </html> 1、标签页注意.nav-tabs类需要.nav基类。

只要加上.nav-stacked,可以竖直堆叠。

<ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> 2、胶囊式标签页 nav-tabs用.nav-pills代替。

禁用的链接: <li ><a >Profile</a></li> 没有鼠标悬停效果,链接功能没有受到影响 3、使用下拉菜单 <ul class="nav nav-pills"> <li class="dropdown active"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown </a> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> </li> <li><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> 4、可用的变体 Default Primary ess Info Warning Danger 5、面包屑导航 <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li> </ol> 以上所述是小编给大家介绍的Bootstrap组件学习之导航、标签、面包屑导航(精品)的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。

在此也非常感谢大家对脚本之家网站的支持！

dreamweaver怎么制作面包屑导航

首先，我2113们打开自己电脑上的网页编辑器，我以DW软件为例。

我们新建一个HTML文档。

然后我们5261在HTML的body部分开始写我们的代码。

面包屑导航是横排的几个文字和图片的组合。

我们可以用ul>li，或者dl>dt>dd来实现。

因为这两个都可以横着在一行显示。

我以dl>dt>dd为例。

我们在html页面中写入dl和dd标签。

4102这个导航的class我们一般使用breadcrumb，这个比较通用。

我们在dd标签中1653输入部分文字。

按下F12，查看不写样式页面在浏览器中的效果。

可以看到不写样式，三段文字是竖着排列的。

我们需内要让三个dd标签横着排列，我们在style中将dd标签设为行内元素。

默认情况下dd是有margin-left的，我们需要将其设为0；这样一个简单的面包屑导航就做好了，一般导航是可以点击的链接，我们可以再为容其添加上a标签。

面包屑导航的来源

很久很久以前，在大森林的边上住着一个贫穷的樵夫，他与妻子和两个孩子相依为命。

他的儿子名叫汉赛尔，女儿名叫格莱特。

后来樵夫的妻子去世了，他又给孩子们娶了一个后母。

后母计划把两个孩子带到森林的深处，然后趁他们睡着的时候跑掉。

汉赛尔无意中知道了后母的计划，于是偷偷地把一块面包藏在了口袋里。

在去森林的路上，汉赛尔悄悄地捏碎了他的面包，并不时地停下脚步，把碎面包屑撒在路上。

后母顺利地趁孩子们睡着的时候溜掉了，汉赛尔和格莱特醒来已是一片漆黑。

汉赛尔安慰他的妹妹说：“等太阳一出来，我们就看得见我撒在地上的面包屑了，它一定会指给我们回家的路。

”但是当太阳升起来时，他们在地上却怎么也找不到一点面包屑了，原来它们都被那些在树林里、田野上飞来飞去的鸟儿一点点地啄食了。

展开全文