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

bootsrap入门【导航条,导航条的使用】_第1张图片



<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>




你可能感兴趣的:(bootsrap入门【导航条,导航条的使用】)