bootsrap入门【导航条，导航条的使用】

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

小章鱼哥

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

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/u014787301/article/details/44001587

javascript 专栏收录该内容

107 篇文章

订阅专栏

本文将引导初学者深入理解Bootstrap框架中的导航条组件，包括如何创建基本的导航条、响应式导航、下拉菜单等，助你在网页设计中轻松实现专业级的导航功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
    $(".mytab a").click(function(e){
        e.preventDefault();
        $(this).tab("show");
    })
</script>      为所有的ul标签添加class为mytab，增添点击函数

nav-justified     充满父级容器

nav-pills     胶囊式导航条

nav-stacked  垂直显示

class="disabled"  禁用状态


class="navbar-header"为导航条添加一个头部，宇哥a标签class="navbar-collapse" 为导航条添加一个三列的按钮组（a标签形成的按钮）
navbar-form   为导航条添加一个输入框form（由input和button组成）
最后在最右侧navbar-right 添加一个link链接和下拉菜单dropdown



路径导航： navbar-fixed-bottom  完全固定在底部 top头部


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="bootstrap.min.css" rel="stylesheet">
    <script src="jquery-2.1.3.min.js"></script>
    <script src="bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <p>最基本的标签页，充满全屏的标签页,不能点击</p>
      <ul  class="mytab nav  nav-justified" rol="tablist">
          <li role="presentation" class="active">
              <a href="home">hello</a>
          </li>
          <li role="presentation" >
              <a href="home">hello</a>
          </li>
          <li role="presentation" class="disabled" >
              <a href="home">hello</a>
          </li>
      </ul>
        <p>胶囊式的标签页  垂直展示，下拉菜单</p>
        <ul   class="mytab nav nav-pills nav-stacked" rol="tablist">
            <li role="presentation" class="active">
                <a href="home">hello</a>
            </li>
            <li role="presentation" >
                <a href="home">hello</a>
            </li>
            <li role="presentation" class="dropdown">
                <a class="dropdown-toggle"data-toggle="dropdown" href="home">hello
                    <span class="caret"></span>
                </a>
                    <ul class="dropdown-menu mytab" role="menu">
                        <li role="presentation"><a role="menuitem" tabindex="-1">1</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1">2</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1">3</a></li>
                    </ul>
            </li>
        </ul>
        <p>导航条</p>
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">章鱼哥哥</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav mytab">
                        <li class="active"><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                    </ul>
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="search">
                        </div>
                        <button type="submit" class="btn btn-default">搜索</button>
                    </form>
                    <ul class="nav navbar-right navbar-nav">
                        <li><a href="#">link</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                点我<span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <!--navbar-fixed-top-->

        </nav>
    </div>
    <p>路径导航</p>
    <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
        <ol class="breadcrumb">
            <li><a href="#">h1</a></li>
            <li><a href="#">h2</a></li>
            <li><a href="#">h3</a></li>
            <li><a href="#">h4</a></li>
        </ol>
    </nav>
    <script>
        $(".mytab a").click(function(e){
            e.preventDefault();
            $(this).tab("show");
        })
    </script>
</body>
</html>