Bootstrap(导航&导航条)

最新推荐文章于 2024-06-04 08:58:47 发布

世间百态不过尔尔

最新推荐文章于 2024-06-04 08:58:47 发布

阅读量1.2k

点赞数

分类专栏： Bootstrap 文章标签： Bootstrap(导航&导航条)

本文链接：https://blog.csdn.net/weixin_44706842/article/details/88562619

版权

Bootstrap 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、导航
1）标签页
通过给列表添加class = nav-tabs和 nav

2）胶囊式导航栏
给列表设置class为nav和nav-pills

3）垂直胶囊式
在原有nav的基础上添加类.nav-stacked
通过给li添加.active表示当前所处的导航位置

4）两端对齐的导航
可以通过添加类.justified 让导航栏与父元素等宽

2、导航条
通过向nav标记添加类.navbar .navbar-default

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale = 1">       
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="jquery-3.2.1.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <ul class="nav nav-tabs">
        <li><a href="#">导航一</a></li>
        <li><a href="">导航二</a></li>
        <li><a href="">导航三</a></li>
        <li><a href="">导航四</a></li>
        <li><a href="">导航五</a></li>
    </ul>
    <!-- 胶囊式导航 -->
    <br><br>
    <ul class="nav nav-pills">
        <li class="active"><a href="">导航一</a></li>
        <li><a href="">导航二</a></li>
        <li><a href="">导航三</a></li>
        <li><a href="">导航四</a></li>
    </ul>
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="">导航一</a></li>
        <li><a href="">导航二</a></li>
        <li><a href="">导航三</a></li>
        <li><a href="">导航四</a></li>
    </ul>
    <br><br>
    <ul class="nav nav-tabs nav-justified">
        <li><a href="">wqqwe</a></li>
        <li><a href="">qweqw</a></li>
        <li><a href="">dedw</a></li>
        <li><a href="">cdcsd</a></li>
    </ul>
    <br><br>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- 导航条类似logo部分 -->
            <div class="navbar-header">
                <a class="navbar-brand" href="">logo</a>
            </div>
            <div>
                <!-- 导航标签 -->
                <ul class="nav navbar-nav">
                    <li><a href="">导航1</a></li>
                    <li><a href="">导航2</a></li>
                    <li><a href="">导航3</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 响应式导航栏 -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- 导航栏头部 -->
            <div class="navbar-header">
                <!-- 导航栏缩小后的三道杠:class = navbar-toggle表示是一个导航栏的按钮，data-toggle="collapse"表示点击按钮需要展开或关闭导航 data-target="下方div的id值"，表示按钮要操作的列表-->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav1">
                    <!-- 每个span代表一道杠 -->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">德州科技</a>
            </div>
            <div class="collapse navbar-collapse" id="nav1">
                <ul class="nav navbar-nav" style="float: right;">
                    <li><a href="">导航一</a></li>
                    <li><a href="">导航二</a></li>
                    <li><a href="">导航三</a></li>
                    <li><a href="">导航四</a></li>
                </ul>
            </div>
        </div>
    </nav>
</body>
</html>

世间百态不过尔尔

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap(导航&导航条)

1、导航1）标签页通过给列表添加class = nav-tabs和 nav2）胶囊式导航栏给列表设置class为nav和nav-pills3）垂直胶囊式在原有nav的基础上添加类.nav-stacked通过给li添加.active表示当前所处的导航位置4）两端对齐的导航可以通过添加类.justified 让导航栏与父元素等宽2、导航条通过向nav标记添加类.navbar...
复制链接

扫一扫

专栏目录