zoukankan html css js c++ java

Bootstrap之导航条

基本导航条

<!-- navbar-inverse相反颜色风格 -->
        <!-- navbar-static-top去除圆角 -->
        <!-- navbar-fixed-top滚动时固定在顶部 (根据导航条的高度 给body的margin-top可以解决导航条遮盖问题)
        navbar-fixed-bottom滚动时固定在底部
        -->
        <nav class="navbar navbar-default navbar-inverse navbar-static-top navbar-fixed-top">
            <!-- 把容器写在导航里(常用做法) -->
            <div class="container">
            <!-- navbar-brand用来存放logo (需要一个容器navbar-header包裹住) -->
             <div class="navbar-header">
                <a href="" class="navbar-brand">此处存放logo</a>
            </div>
            <!-- nav navbar-nav 菜单 -->
            <!-- 导航左浮动navbar-left
                右浮动navbar-right
             -->
            <!-- navbar-btn使导航中的按钮垂直居中 -->

            <!-- navbar-link 改变链接颜色 -->
        
            <!-- navbar-text使文字垂直居中 -->

            <!-- navbar-form用于form表单 -->
            <ul class="nav navbar-nav">
                <li class="active"><a href="">one</a></li>
                <li><a href="">two</a></li>
                <li><a href="">three</a></li>            
            </ul>
            </div>
        </nav>

响应式导航条

<nav class="navbar navbar-default">
        
            <div class="container">
            
            <div class="navbar-header">
                <!-- navbar-toggle导航条点击切换 -->
                <!-- data-target指定要切换的菜单 -->
                <button class="navbar-toggle" data-toggle="collapse" data-target="#myCollapse">
                <!-- icon-bar 横条 -->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="" class="navbar-brand">此处存放logo</a>
            </div>
            <!-- collapse navbar-collapse 折叠 -->
            <div class="collapse navbar-collapse" id="myCollapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="">one</a></li>
                <li><a href="">two</a></li>
                <li><a href="">three</a></li>            
            </ul>
            </div>
            </div>
        </nav>

滚动监听

<!-- data-offset='200'距离顶端200px时发生变化 -->
<!-- data-target 指定监听的元素 -->
<!-- data-spy 指定监听事件 -->
<body data-spy="scroll" data-target="#myNavbar" data-offset="200">

    <!-- 滚动监听 在监听的元素必须有相对定位 -->
        <nav id="myNavbar" class="navbar navbar-default navbar-fixed-top">
        
            <div class="container">
            
            <div class="navbar-header">
            
                <a href="" class="navbar-brand">此处存放logo</a>
            </div>

            <div class="collapse navbar-collapse" id="myCollapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#aa">one</a></li>
                <li><a href="#bb">two</a></li>
                <li><a href="#cc">three</a></li>            
            </ul>
            </div>
            </div>
        </nav>
        <div id="aa" class="pos">aaaaaaaa</div>
        <div id="bb" class="pos">bbbbbbbb</div>
        <div id="cc" class="pos">cccccccc</div>
</body>

查看全文

相关阅读:
电子邮件为什么要编码以及产生乱码的原因？
UTF8国际通用为什么还要用GBK？
python 调用shell命令的方法
 script —— 终端里的记录器
 IP数据报是如何在网络中转发的？
网际协议：无连接数据报交付（IPv4）
fork与vfork
strlen与sizeof有什么区别？
网络地址到物理地址的映射(ARP)
分类的因特网地址

原文地址：https://www.cnblogs.com/dreamerC/p/6208182.html