bootstrap 导航

作者: 天天发呆 | 来源:发表于2016-08-26 13:22 被阅读64次

Bootstrap Affix导航——附加导航
Flask 实现导航栏
bootstrap 导航
DaoCloud前端实习生面试题
Bootstrap导航
bootstrap导航
Bootstrap-导航菜单-2018.07.07
项目：单页面官网制作（Bootstrap）总结
H5-2.20bootstrap中js插件的应用
Bootstrap3-导航

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>