zoukankan      html  css  js  c++  java
  • Bootstrap之导航栏(2015年05年20日)

    <nav class="navbar navbar-default" style="border-color: transparent;">
    <div class="container">
    <div class="navbar-header">
    <!-- 自适应隐藏导航展开按钮 -->
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <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="#">
    <img src="images/docker.png">
    </a>

    </div>
    <!--一定要加上id="bs-example-navbar-collapse-1"属性,不然小屏幕的情况下,li链接不可见 -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="margin-top: 12px;">
    <ul class="nav navbar-nav">
    <li><a href="#"><strong>What is Docker?</strong></a></li>
    <li><a href="#"><strong>Use Cases</strong></a></li>
    <li><a href="#"><strong>Try It!</strong></a></li>
    <li><a href="#"><strong>Install &amp; Docs</strong></a></li>
    <li><a href="#"><strong>Browse</strong></a></li>
    </ul>
    <!-- 搜索框-->
    <form class="navbar-form navbar-right" role="search">
    <div class="form-group">
    <input type="text" class="form-control" placeholder="Search"/>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
    </form>
    </div><!--/.collapse-->

    </div><!--/.container -->
    </nav>

    效果图如下:

    适应大屏

    clipboard

    适应小屏

    clipboard[1]

  • 相关阅读:
    migration的报错
    路由与认证
    drf-请求与响应
    django-rest-framework
    Vue -- 基础
    Django -- Auth模块
    Django -- 中间件
    Django -- cookie与session
    Django--ajax
    Django -- 视图层
  • 原文地址:https://www.cnblogs.com/Dreyer/p/4533023.html
Copyright © 2011-2022 走看看