美文网首页Web前端
Bootstrap3 - 15.响应式的导航栏

Bootstrap3 - 15.响应式的导航栏

作者: 廖马儿 | 来源:发表于2018-01-03 18:31 被阅读6次
<div class="colloapse navbar-collapse" id="responsive-navbar">这里面放入要折叠起来的东西</div>

代码:

<!doctypoe html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    
    <nav class="navbar navbar-inverse navbar-fixed-top">

        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle" data-toggle="collapse" data-target="#responsive-navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">www.<strong>google</strong>.com</a>
            </div>

            <div class="collapse navbar-collapse" id="responsive-navbar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="">课程</a></li>
                    <li><a href="">博客</a></li>
                    <li><a href="">手册</a></li>
                </ul>
                
                <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">
                        Hello, <a href="#" class="navbar-link">Deng</a>
                    </p>
                </div>  
            </div>  

        </div>  

    </nav>
    <div class="container" style="height:5000px;">  
        <div>
            <h1>title123</h1>
            <p>按时打算是多少对阿斯达方的方式斯蒂芬斯蒂芬按时打算</p>
        </div>
    </div>
    <script src="lib/jquery/jquery.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>   
</body>
</html>


效果:

图片.png

相关文章

  • Bootstrap3 - 15.响应式的导航栏

    代码: 效果:

  • 5.1从0实现响应式导航栏

    本节将分享如何从0实现一个响应式导航栏。 响应式导航栏是静态网站特别常见的需求,多数网站都是基于Twitter推出...

  • 子组件

    制作导航栏组件,使用了bootstrap样式使用响应式布局,在页面宽度缩小时导航栏会变成折叠式导航栏,点击有侧按钮...

  • 第二十六谈:导航栏

    本节课我们来开始学习 Bootstrap 的提供导航栏组件功能。 一.导航栏 导航栏是一种响应式的组件,主要使用....

  • 响应式导航栏

    效果: html: ...

  • 网站开发之Bootstrap篇

    1.概念 2.使用 引用 2.1 布局 响应式网格系统 表格 列表 2.2. 组件 2.2.1 导航栏 导航栏na...

  • Bootstrap-响应式导航

    响应式导航的创建 主要代码 知识点 .navbar-inverse 倒置的导航栏 .navbar-fixed-t...

  • 响应式导航栏实现

    前言 最近想实现定制化的响应式顶部导航栏,即支持主流设备的正常访问(Phone、Pad、PC),并根据屏幕比例实现...

  • Android隐藏和显示虚拟导航栏

    隐藏导航栏 显示导航栏 沉浸式状态下显示导航栏

  • 导航栏总结

    这次所做的导航栏是为了练习components(组件)layout(布局)responsive(响应式)下拉框(c...

网友评论

    本文标题:Bootstrap3 - 15.响应式的导航栏

    本文链接:https://www.haomeiwen.com/subject/nskknxtx.html