Bootstrap组件之导航条

时间：2015-07-31 20:26:45 收藏：0 阅读：30522

.navbar——设置nav元素为导航条组件；

.navbar-default——指定导航条组件为默认主题；

.navbar-inverse——指定导航条组件为黑色主题；

.navbar-fixed-top——设置导航条组件固定在顶部；

.navbar-fixed-bottom——设置导航条组件固定在底部；

.container-fluid——设置宽度充满父元素，即为100%；

.navbar-header——主要指定div元素为导航条组件包裹品牌图标及切换按钮；

.navbar-toggle——设置button元素为导航条组件的切换钮；

.collapsed——设置button元素为在视口小于768px时才显示；

.navbar-brand——设置导航条组件内的品牌图标；

.collapse——设置div元素为视口大于768px时显示；

.navbar-collapse——设置div元素为导航条组件各列表项的父元素；

.navbar-nav——设置ul为导航条组件内的列表元素;

.navbar-left——设置导航条内元素向左对齐；

.navbar-right——设置导航条内元素向右对齐；

.navbar-form——为导航条组件内部的表单组件；

.navbar-btn——为导航条组件内部的按钮样式；

.navbar-text——为导航条组件内部的文本样式；

.navbar-link——在标准的导航组件之外添加标准链接，让链接有正确的颜色和反色设置；

.breadcrumb——设置列表元素显示为路径导航组件；

<!DOCTYPE html>
<html lang="zh_CN">
<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>饭盒儿——发现身边不一样的世界</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        h1{
            margin-top:80px;
            margin-bottom: 80px;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mytab" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Fun Here</a>
            </div>
            <div class="collapse navbar-collapse" id="mytab">
                <p class="navbar-text">发现身边不一样的世界</p>
                <ul class="nav navbar-nav">
                    <li class="active" role="presentation"><a href="#">首页</a></li>
                    <li role="presentation"><a href="#">新闻资讯</a></li>
                    <li role="presentation"><a href="#">关于我们</a></li>
                </ul>
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <label class="sr-only"></label>
                        <input type="text" class="form-control" placeholder="搜索"/>
                    </div>
                    <button type="submit" class="btn btn-default navbar-btn">搜索</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li role="presentation"><a href="#">联系我们</a></li>
                    <li class="dropdown" role="presentation">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            产品分类
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" role="menu">
                            <li role="presentation"><a href="#" role="menuitem" tabindex="-1">男装</a></li>
                            <li role="presentation"><a href="#" role="menuitem" tabindex="-1">女装</a></li>
                        </ul>
                    </li>
                </ul>
                <p class="navbar-text navbar-right"><a href="#" class="navbar-link">收藏</a>本网站</p>
            </div>
        </div>
    </nav>
    <script>
        $(".nav a").click(function(e){
            e.preventDefault();
            $(this).tab("show");
        })
    </script>
    <div class="container">
    <h1>不疯魔不成活</h1>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <h1>不作死就不会死</h1>
    </div>
    <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
        <ol class="breadcrumb">
            <li role="presentation"><a href="#">首页</a></li>
            <li role="presentation"><a href="#">新闻资讯</a></li>
            <li role="presentation"><a href="#">关于我们</a></li>
        </ol>
    </nav>
    </body>
</html>

视口>768px时的显示效果
技术分享

视口<768px时的显示效果

技术分享

rrryyy 2016-01-14 15:15:24

手机屏幕上，导航栏展开之后收不回去，你知道是什么问题吗？

共1条