Bootstrap3 导航之个人学习笔记

最新推荐文章于 2022-07-18 23:34:26 发布

原创最新推荐文章于 2022-07-18 23:34:26 发布 · 488 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #导航

Bootstrap 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用Bootstrap 3构建多种类型的导航组件，包括标签页、胶囊式标签、垂直堆叠、两端对齐的导航及下拉菜单等，并展示了如何应用标签和面包屑导航。

Boostrap3 导航

标签（空格分隔）： Bootstrap

1 目的

学习bootstrap导航栏

效果图：
这里写图片描述

参考代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>导航和标签</title>
</head>
<body>
    <!--标签页-->
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Message</a></li>
    </ul>
<hr>
    <!--胶囊标签 加上.nav-stacked垂直堆叠-->
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Message</a></li>
    </ul>
<hr>

    <!--两端对齐的导航-->
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Message</a></li>
    </ul>
    <ul class="nav nav-pills nav-justified">
        <li class="active"><a href="#">Home</a></li>
        <li class="disabled"><a href="#">Profile</a></li>
        <li><a href="#">Message</a></li>
    </ul>

<hr>

    <!--下拉菜单-->
    <ul class="nav nav-tabs">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Dropdown <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Message</a></li>
            </ul>
        </li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Message</a></li>
    </ul>
<hr>
    <!--下拉菜单胶囊式-->
    <ul class="nav nav-pills">
        <li class="dropdown active">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Dropdown <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Message</a></li>
            </ul>
        </li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Message</a></li>
    </ul>
<hr>
    <!--标签-->
    <h1>Example heading <span class="label label-default">New</span></h1>
    <h2>Example heading <span class="label label-default">New</span></h2>
    <h3>Example heading <span class="label label-default">New</span></h3>
    <h4>Example heading <span class="label label-default">New</span></h4>
    <h5>Example heading <span class="label label-default">New</span></h5>
    <h6>Example heading <span class="label label-default">New</span></h6>
    <hr>
    <span class="label label-default">Default</span>
    <span class="label label-primary">Primary</span>
    <span class="label label-success">Success</span>
    <span class="label label-info">Info</span>
    <span class="label label-warning">Warning</span>
<hr>
    <!--面包屑导航-->
    <ol class="breadcrumb">
        <li>
            <a href="#">Home</a>
        </li>
        <li><a href="#">Library</a></li>
        <li class="active">Current</li>
    </ol>

</body>
</html>

2 实验内容

2.1 导航

标签页 nav nav-tabs
胶囊式标签 nav nav-pills
垂直堆叠 nav nav-pills nav-stacked
两端对齐 nav nav-pills nav-justified
禁用 disabled
下拉菜单，结合 dropdown dropdown-toggle data-toggle="dropdown" dropdown-menu
标签 label label-default 可用变体 label-primary label-success label-info label-warning label-danger
面包屑导航 <ol class="breadcrumb">