20.导航条(一)

来源：互联网发布：为什么要回调 java 编辑：程序博客网时间：2024/04/29 20:03

navbar                导航条的基础样式nav navbar-nav        导航条里菜单的的固定样式组合的classnavbar-default        导航条的默认样式navbar-inverse        黑色的导航条navbar-static-top     直角导航navbar-fixed-top      导航条固定在最上边navbar-fixed-bottom   导航条固定在最下边，不会随滚动条的移动而移动

<!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">    <title>Bootstrap</title>    <link rel="stylesheet" href="css/bootstrap.css" /></head><body>    <div class="container">        <nav class="navbar navbar-default"><!--默认的导航条-->            <ul class="nav navbar-nav">                <li><a href="#">苹果</a></li>                <li><a href="#">香蕉</a></li>                <li><a href="#">橘子</a></li>            </ul>        </nav>        <nav class="navbar navbar-inverse"><!--黑色的导航条-->            <ul class="nav navbar-nav">                <li><a href="#">苹果</a></li>                <li><a href="#">香蕉</a></li>                <li><a href="#">橘子</a></li>            </ul>        </nav>        <nav class="navbar navbar-default navbar-static-top"><!--直角导航-->            <ul class="nav navbar-nav">                <li><a href="#">苹果</a></li>                <li><a href="#">香蕉</a></li>                <li><a href="#">橘子</a></li>            </ul>        </nav>        <nav class="navbar navbar-inverse navbar-fixed-top"><!--固定在上方的导航条,并将第一个导航条盖住-->            <ul class="nav navbar-nav">                <li><a href="#">苹果</a></li>                <li><a href="#">香蕉</a></li>                <li><a href="#">橘子</a></li>            </ul>        </nav>        <nav class="navbar navbar-inverse navbar-fixed-bottom"><!--底部-->            <ul class="nav navbar-nav">                <li><a href="#">苹果</a></li>                <li><a href="#">香蕉</a></li>                <li><a href="#">橘子</a></li>            </ul>        </nav>    </div>    <script src="js/jquery-2.1.0.js"></script>    <script src="js/bootstrap.js"></script></body></html>

这里写图片描述

0 0