zoukankan      html  css  js  c++  java
  • Bootstrap导航栏

    导航栏:

    <div id="menu-nav" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
    <div class="container-fluid">
    <div class="navbar-header">
    <butotn class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">切换导航</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </butotn>
    <a href="#" class="navbar-brand">现代浏览器博物馆</a>
    </div>
    <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
    <li class="active"><a href="#">综述</a></li>
    <li><a href="">简述</a></li>
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">特点 <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
    <li><a href="#">Chrome</a></li>
    <li><a href="#">Firefox</a></li>
    <li><a href="#">Safari</a></li>
    <li><a href="#">Opera</a></li>
    <li><a href="#">IE</a></li>
    </ul>
    </li>
    <li><a href="#" data-toggle="modal" data-target="#about-modal">关于</a></li>
    </ul>
    </div>
    </div>
    </div>
    </div>

    navbar-inverse:背景色为黑色
    navbar-fixed-top:固定导航栏在顶部
    navbar-collapse:当窗口过小时,自动隐藏
    data-toggle指以什么事件触发,常用的如modal,popover,tooltips等,data-target指事件的目标,一起使用就是代表data-target所指的元素以data-toggle指定的形式显示
    <span class="caret"></span> 显示下拉箭头
    要加载jquery.js 和 bootstrap.min.js 不然点击下拉菜单会没反应







  • 相关阅读:
    matlab中figure 创建图窗窗口
    matlab中imread 从图形文件读取图像
    matlab中imfinfo 有关图形文件的信息
    matlab中bitshift 将位移动指定位数
    matlab中reshape 重构数组
    matlab中find 查找非零元素的索引和值
    比特数
    matlab中fseek 移至文件中的指定位置
    poj 1039 Pipe(几何基础)
    poj 1556 The Doors(线段相交,最短路)
  • 原文地址:https://www.cnblogs.com/cherious/p/6726381.html
Copyright © 2011-2022 走看看