Bootstrap每天必学之导航条(二)

下面我将详细介绍“Bootstrap每天必学之导航条(二)”的完整攻略。

标题

这是一个H2标题

代码块

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">导航条品牌</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">关于我们</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">联系我们</a>
            </li>
        </ul>
    </div>
</nav>

攻略步骤

1. 复制上面的代码并粘贴到你的html文档中；
2. 替换品牌名称和导航项标题，修改href链接到正确的页面；
3. 根据需要可以添加一个下拉菜单；
4. 原生导航条可能不够满足特殊设计需求，于是可以通过修改CSS样式来自定义导航条。

示例说明

示例一

在网页的顶部添加一个简单的导航条，导航项为“首页”、“文档”、“联系我们”。

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">网站名称</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">文档</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">联系我们</a>
            </li>
        </ul>
    </div>
</nav>

示例二

在网页的顶部添加一个带下拉菜单的导航条，导航项为“首页”、“文档”、“联系我们”，下拉菜单中包含“会员中心”和“购物车”。

<nav class="navbar navbar-expand-md bg-light navbar-light">
    <a class="navbar-brand" href="#">网站名称</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">文档</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">会员中心</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">会员信息</a>
                    <a class="dropdown-item" href="#">订单查询</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">购物车</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">查看购物车</a>
                    <a class="dropdown-item" href="#">购物车结算</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">联系我们</a>
            </li>
        </ul>
    </div>
</nav>

以上就是“Bootstrap每天必学之导航条(二)”的完整攻略，希望可以对你的开发有所帮助。