当前位置:u赢电竞手机版 > u赢电竞竞猜app > Bootstrap <基础十八>面包屑导航(Breadcrumbs)

Bootstrap <基础十八>面包屑导航(Breadcrumbs)

文章作者:u赢电竞竞猜app 上传时间:2019-05-22

面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式。以博客为例,面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。

Bootstrap 中的面包屑导航(Breadcrumbs)是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS(bootstrap.min.css)中下面所示的 class 自动被添加:

.breadcrumb > li   li:before {      color: #CCCCCC;      content: "/ ";      padding: 0 5px;  }

下面的实例演示了面包屑导航:

<!DOCTYPE html>  <html>  <head>     <title>Bootstrap 实例 - 面包屑导航</title>     <link   rel="stylesheet">     <script src="/scripts/jquery.min.js"></script>     <script src="/bootstrap/js/bootstrap.min.js"></script>  </head>  <body>    <ol >    <li><a  >Home</a></li>    <li><a  >2013</a></li>    <li >十一月</li>  </ol>      </body>  </html>

结果如下所示:

u赢电竞竞猜app 1

 

 

系列文章:

Bootstrap <基础一> css 概览

Bootstrap<基础二>网络系统

Bootstrap<基础三>排版

Bootstrap<基础四> 代码

Bootstrap <基础五>表格

Bootstrap<基础六> 表单

Bootstrap <基础七>按钮

Bootstrap <基础八>图片

Bootstrap<基础九>辅助类

Bootstrap<基础十> 响应式实用工具

Bootstrap<基础十一>字体图标(Glyphicons)

Bootstrap <基础十二>下拉菜单(Dropdowns)

Bootstrap<基础十三> 按钮组

Bootstrap<基础十四> 按钮下拉菜单

Bootstrap<基础十五> 输入框组

Bootstrap<基础十六> 导航元素

Bootstrap<基础十七>导航栏

Bootstrap <基础十八>面包屑导航(Breadcrumbs)

Bootstrap <基础十九>分页

Bootstrap<基础二十> 标签

Bootstrap <基础二十一>徽章(Badges)

Bootstrap <基础二十二>超大屏幕(Jumbotron)

Bootstrap <基础二十三>页面标题(Page Header)

Bootstrap<基础二十四> 缩略图

Bootstrap <基础二十五>警告(Alerts)

Bootstrap <基础二十六>进度条

Bootstrap<基础二十七> 多媒体对象(Media Object)

Bootstrap <基础二十八>列表组

Bootstrap <基础二十九>面板(Panels)

Bootstrap <基础三十>Well

Bootstrap <基础三十一>插件概览

Bootstrap <基础三十二>模态框(Modal)插件


Bootstrap 标签。标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签,如下面的实例所示:

<!DOCTYPE html>  <html>  <head>     <title>Bootstrap 实例 - 标签</title>     <link   rel="stylesheet">     <script src="/scripts/jquery.min.js"></script>     <script src="/bootstrap/js/bootstrap.min.js"></script>  </head>  <body>    <h1>Example Heading Label</h1>  <h2>Example Heading Label</h2>  <h3>Example Heading Label</h3>  <h4>Example Heading Label</h4>      </body>  </html>

结果如下所示:

u赢电竞竞猜app 2

您可以使用修饰的 class label-default、label-primary、label-success、label-info、label-warning、label-danger 来改变标签的外观,如下面的实例所示:

<!DOCTYPE html>  <html>  <head>     <title>Bootstrap 实例 - 标签的变体</title>     <link   rel="stylesheet">     <script src="/scripts/jquery.min.js"></script>     <script src="/bootstrap/js/bootstrap.min.js"></script>  </head>  <body>    默认标签  主要标签  成功标签  信息标签  警告标签  危险标签      </body>  </html>

结果如下所示:

u赢电竞竞猜app 3

 

系列文章:

Bootstrap <基础一> css 概览

Bootstrap<基础二>网络系统

Bootstrap<基础三>排版

Bootstrap<基础四> 代码

Bootstrap <基础五>表格

Bootstrap<基础六> 表单

Bootstrap <基础七>按钮

Bootstrap <基础八>图片

Bootstrap<基础九>辅助类

Bootstrap<基础十> 响应式实用工具

Bootstrap<基础十一>字体图标(Glyphicons)

Bootstrap <基础十二>下拉菜单(Dropdowns)

Bootstrap<基础十三> 按钮组

Bootstrap<基础十四> 按钮下拉菜单

Bootstrap<基础十五> 输入框组

Bootstrap<基础十六> 导航元素

Bootstrap<基础十七>导航栏

Bootstrap <基础十八>面包屑导航(Breadcrumbs)

Bootstrap <基础十九>分页

Bootstrap<基础二十> 标签

Bootstrap <基础二十一>徽章(Badges)

Bootstrap <基础二十二>超大屏幕(Jumbotron)

Bootstrap <基础二十三>页面标题(Page Header)

Bootstrap<基础二十四> 缩略图

Bootstrap <基础二十五>警告(Alerts)

Bootstrap <基础二十六>进度条

Bootstrap<基础二十七> 多媒体对象(Media Object)

Bootstrap <基础二十八>列表组

Bootstrap <基础二十九>面板(Panels)

Bootstrap <基础三十>Well

Bootstrap <基础三十一>插件概览

Bootstrap <基础三十二>模态框(Modal)插件


本文由u赢电竞手机版发布于u赢电竞竞猜app,转载请注明出处:Bootstrap &lt;基础十八&gt;面包屑导航(Breadcrumbs)

关键词: