Bootstrap3基础教程 03 导航栏

Bootstrap导航栏

创建一个默认的导航栏的步骤如下：

1.向 <nav> 标签添加 class .navbar、.navbar-default。

2.向上面的元素添加 role="navigation"，有助于增加可访问性。

3.向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。（手机端的导航按钮放在这里，然后通过一个容器隐藏导航项）

4.为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

（用一个class containter 包裹导航居中）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="Script/Style.css" rel="stylesheet" />
    <title></title>
</head>
<body>

    <!--导航栏:navbar 高度为50px-->
    <div class="container">
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-header">
              <a href="#" class="nav navbar-brand"><strong>logo</strong></a>
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#target">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse " id="target">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">课程</a></li>
                    <li><a href="#">博客</a></li>
                    <li><a href="#">手册</a></li>
                </ul>
            </div>
        </nav>
    </div>


    <script src="Script/2.1.1jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>

</body>
</html>

响应式的导航栏

1.将要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中.

2.折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。

（第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么；

第二个是 data-target，指示要切换到哪一个元素；

然后三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。）

**jquery版本问题！！

body {
    padding-top:70px;
}

.navbar-inverse input[type="text"]{
    background:#313131;
    border:none;
    color:#999;
}

.navbar-inverse .navbar-form{
    position:relative;
}

.navbar-inverse button[type="submit"]{
    position:absolute;
    top:35%;
    right:20px;
    background:none;
    border:none;
}

@media(min-width: 768px){
    .navbar-inverse button[type="submit"] {
        top: 15%;
    }

}


.navbar-inverse .glyphicon{
    color:#999;
}

.profile{
    margin-right:25px;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="Script/2.1.1jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <link href="Script/Style.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <!--移动优先-->
    <!--hidden-xs 手机端隐藏-->
    <!--@media()媒体查询-->
    <nav class="nav navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#zq">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="nav navbar-brand"><strong>logo</strong></a>
            </div>
            <div class="collapse navbar-collapse" id="zq">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">课程</a></li>
                    <li><a href="#">博客</a></li>
                    <li><a href="#">手册</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">.NET<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">jmeter</a></li>
                            <li><a href="#">EJB</a></li>
                            <li><a href="#">Jasper Report</a></li>
                            <li class="divider"></li>
                            <li><a href="#">分离的链接</a></li>
                            <li class="divider"></li>
                            <li><a href="#">另一个分离的链接</a></li>
                        </ul>
                    </li>
                </ul>
                <form action="" class="navbar-form navbar-left">
                    <input type="text" placeholder="search" class="form-control" />
                    <button type="submit">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                </form>
                <a href="#" class="btn btn-primary btn-sm navbar-btn navbar-right hidden-xs">订阅课程</a>
                <div class="profile navbar-right">
                    <ul class="nav navbar-nav">
                        <li><a href="#">登录</a></li>
                        <li><a href="#">注册</a></li>
                    </ul>
                    <p class="navbar-text">您好，<a href="#" class="navbar-link">XXX</a></p>
                </div>
            </div>
        </div>
    </nav>

    <div class="container">
        <p class="alert alert-info">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,
            dapibus nec turpis vel, semper malesuada ante.
            Vestibulum id metus ac nisl bibendum scelerisque non non purus.
            Suspendisse varius nibh non aliquet sagittis.
            In tincidunt orci sit amet elementum vestibulum.
            Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla.
            Vivamus nisl leo, blandit at bibendum eu, tristique eget risus.
            Integer aliquet quam ut elit suscipit, id interdum neque porttitor.
            Integer faucibus ligula.
        </p>
    </div>


</body>
</html>

导航栏中的表单

使用 .navbar-form class.确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="Script/Style.css" rel="stylesheet" />
    <script src="Script/jquery-1.8.3.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <title></title>
</head>
<body>
    <!--导航栏中的表单-->
    <nav class="nav navbar-inverse navbar-fixed-top">
        <div class="container">
            <a href="#" class="nav navbar-brand"><strong>logo</strong></a>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">课程</a></li>
                <li><a href="#">博客</a></li>
                <li><a href="#">手册</a></li>
            </ul>
            <form action="" class="navbar-form navbar-left">
                <input type="text" placeholder="search" class="form-control"/>
                <button type="submit">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </form>
        </div>
    </nav>

    <div class="container">
        <p class="alert alert-info">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,
            dapibus nec turpis vel, semper malesuada ante.
            Vestibulum id metus ac nisl bibendum scelerisque non non purus.
            Suspendisse varius nibh non aliquet sagittis.
            In tincidunt orci sit amet elementum vestibulum.
            Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla.
            Vivamus nisl leo, blandit at bibendum eu, tristique eget risus.
            Integer aliquet quam ut elit suscipit, id interdum neque porttitor.
            Integer faucibus ligula.
        </p>
    </div>


    <script src="Script/jquery-1.8.3.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>

</body>
</html>

导航栏中的按钮

使用 class .navbar-btn

.navbar-btn 可被使用在 <a> 和 <input> 元素上。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="Script/Style.css" rel="stylesheet" />
    <script src="Script/jquery-1.8.3.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <title></title>
</head>
<body>
    <!--导航栏中文字，按钮，和其他菜单-->
    <nav class="nav navbar-inverse navbar-fixed-top">
        <div class="container">
            <a href="#" class="nav navbar-brand"><strong>logo</strong></a>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">课程</a></li>
                <li><a href="#">博客</a></li>
                <li><a href="#">手册</a></li>
            </ul>
            <form action="" class="navbar-form navbar-left">
                <input type="text" placeholder="search" class="form-control" />
                <button type="submit">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </form>
            <a href="#" class="btn btn-primary btn-sm navbar-btn navbar-right">订阅课程</a>
            <div class="profile navbar-right">
                <ul class="nav navbar-nav">
                    <li><a href="#">登录</a></li>
                    <li><a href="#">注册</a></li>
                </ul>
                <p class="navbar-text">您好，<a href="#" class="navbar-link">XXX</a></p>
            </div>
        </div>
    </nav>

</body>
</html>

导航栏中的文本

使用 class .navbar-text。这通常与 <p> 标签一起使用

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鸟教程</a>
    </div>
    <div>
        <p class="navbar-text">Runoob 用户登录</p>
    </div>
    </div>
</nav>

结合图标的导航链接

span标签 class glyphicon glyphicon-* 来设置图标

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
        <div class="navbar-header"> 
            <a class="navbar-brand" href="#">菜鸟教程</a> 
        </div> 
        <ul class="nav navbar-nav navbar-right"> 
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li> 
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li> 
        </ul> 
    </div> 
</nav>

组件对齐方式

class .navbar-left 或 .navbar-right 向左或向右对齐导航栏中的 导航链接、表单、按钮或文本 这些组件。这两个 class 都会在指定的方向上添加 CSS 浮动

固定

class .navbar-fixed-top 顶部固定

class .navbar-fixed-bottom 底部固定

class .navbar-static-top 随着页面一起滚动的导航栏

**创建一个带有黑色背景白色文本的反色的导航栏，只需要简单地向 .navbar class 添加 .navbar-inverse class 即可

posted @ 2018-05-29 14:12 youguess 阅读(684) 评论(0) 编辑收藏举报

刷新页面返回顶部

youguess