bootstrap 导航

bootstrap导航加下拉菜单(二级导航)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>导航</title>
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
    <ul class="nav nav-tabs nav-justified">
        <li><a href="##">Home</a></li>
        <li><a href="##">CSS</a></li>
        <li><a href="##">JS</a></li>
        <li><a href="##">PHP</a></li>
    </ul>

    <ul class="nav nav-pills nav-justified">
        <li class="active"><a href="##">商品介绍</a></li>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown">规格参数<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="##">CSS3</a></li>
                <li><a href="##">HTML</a></li>
                <li><a href="##">JS</a></li>
            </ul>
        </li>
        <li><a href="##">商品评价</a></li>
        <li><a href="##">售后保证</a></li>
    </ul>

    <script src="./bootstrap-3.3.7-dist/js/jquery.js"></script>
    <script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>

如图


屏幕快照 2016-08-26 13.09.35.png

说明
在Bootstrap框架中制作二级导航,只需要将li当作父容器,使用类名“dropdown”,同时在li中嵌套另一个列表ul,使用前面介绍下拉菜单的方法就可以

面包屑式导航

面包屑导航主要是起的作用是告诉用户现在所处页面的位置(当前位置)
,效果如图


屏幕快照 2016-08-26 13.20.12.png

实现如下

<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">我的书</a></li>
  <li class="active">《图解CSS3》</li>
</ol>

完整代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>面包屑式导航</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
<!--代码-->
<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">我的书</a></li>
  <li class="active">《图解CSS3》</li>
</ol> 

<ol class="breadcrumb">
    <li><a href="#">首页</a></li>
    <li><a href="#">名师简介</a></li>
    <li class="active">大漠</li>
</ol>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 5,087评论 0 66
  • 1、导航(基础样式) 导航对于一位前端人员来说并不陌生。可以说导航是一个网站重要的元素组件之一,可以便于用户查找网...
    200813阅读 474评论 0 1
  • 知识点: 1、导航2、导航条3、面包屑导航 1、导航(标签) nav 1)标签页 nav-tabs 2)...
    东东丶酱阅读 981评论 0 0
  • 学习资料Bootstrap 导航元素 | 菜鸟教程 Bootstrap 导航如何实现? 利用给ul标签添加nav类...
    鸭梨山大哎阅读 291评论 0 2
  • 其实一直不想写关于你的事情,就像是某个午后,和着蝉声吹来的缕清风,我觉得你还在我身边,可是你已经化作星辰,化作细雨...
    莲笙吖阅读 524评论 0 0