美文网首页
web启蒙----面包屑?

web启蒙----面包屑?

作者: 路小漫 | 来源:发表于2017-08-16 11:17 被阅读0次

今天学习中,在jsp代码中,有这样一句代码:

<div class="breadcrumb">
您的当前位置:其他功能 > 练习测试
</div>

因为是菜鸟小白,只能依靠百度了,查到以下内容:

  • 在菜鸟教程中----div

<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
<div>标签常用于组合块级元素,以便通过 CSS 来对这些元素进行格式化。

  • 在DIVCSS5网站----class

在div、spanp标签h1、h2等标签中看见id和class使用,id和class是非常常用的标签内属性。

而现在代码中有class的使用

id和class都可以在网页中任何标签内使用。一般比较重要的部分、比较特别的盒子使用id,而小局部不重要的或小结构使用class。id调用css中以“#”井号命名的样式选择器,class调用css中以“.”英文半角小写句号命名的样式选择器。

  • breadcrumb----面包屑导航

Bootstrap 面包屑导航(Breadcrumbs) 面包屑导航(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 href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">2013</a></li>
  <li class="active">十一月</li>
</ol>

</body>
</html>

结果如下所示:

  • Bootstrap简介

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

Bootstrap教程: http://outofmemory.cn/bootstrap/tutorial/bootstrap-intro.html
中文文档: https://v4.bootcss.com/docs/4.0/getting-started/introduction/

相关文章

  • web启蒙----面包屑?

    今天学习中,在jsp代码中,有这样一句代码: 您的当前位置:其他功能 > 练习测试 因为是菜鸟小白,只能依靠百度了...

  • web启蒙----@RequestMapping

    今天在代码中见到了@RequestMapping,它是什么呢?求助强大的网络。。。。。。参考博客-一个人的天空 R...

  • week2_BreadcrumbNavigation

    面包屑导航 BreadcrumbNavigation BreadcrumbNavigation面包屑导航的作用是告...

  • Don't make me think

    面包屑

  • Web的面包屑导航栏设计

    一: 面包屑导航: 在网页主导航之下,页面主内容之上。 二: 为什么要面包屑导航: 1、为用户定位目前页面在产品全...

  • 面包屑设计

    -面包屑是什么? 对于面包屑这个说法,相信有些人还是对于这个概念有点模糊;看以下几个图片,相信大家就知道何为面包屑...

  • UI组件——面包屑简介

    设计世界充满了与食物相关的类比,例如汉堡菜单、Snackbars或面包屑。面包屑或面包屑路径是一种导航元素,可帮助...

  • Bootstrap 布局组件(二)

    8. Bootstrap 面包屑导航(Breadcrumbs) 面包屑导航(Breadcrumbs)是一种基于网站...

  • 4.article面包屑

    面包屑代码

  • 面包屑 - Breadcrumbs

    怎样创建面包屑 ? 为列表元素 或者 添加一个 .breadcrumb 即可创建面包屑

网友评论

      本文标题:web启蒙----面包屑?

      本文链接:https://www.haomeiwen.com/subject/yeabrxtx.html