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 不然点击下拉菜单会没反应







  • 相关阅读:
    C语言超大数据相加计算整理
    pc端页面加载更多条信息(loading)
    web前端学习路线
    linux启动流程
    Computer Science: http://www.cs.odu.edu/~cs779/
    编程网站
    sublime-text 键绑定
    monokai-background
    .vimrc
    vim 正则表达式查找ip
  • 原文地址:https://www.cnblogs.com/cherious/p/6726381.html
Copyright © 2011-2022 走看看