Bootstrap 3.7 导航组件响应式CSS样式

 

.navbar{ 
    margin-bottom: 0px; 
    background-color: #fff; 
    border-right: 0px; 
    border-left:0px;
    border-radius: 0px;
}
.navbar-brand { padding:10px 15px; }
.navbar-brand img{ height: 30px; }
@media (min-width: 768px) {
    .navbar-wrapper {margin-top: 20px;}
    .navbar-wrapper .container {padding-right: 15px;padding-left: 15px;}
    .navbar-wrapper .navbar {padding-right: 0;padding-left: 0;}
    .navbar-wrapper .navbar {border-radius: 4px;}
    .carousel-caption p {margin-bottom: 20px;font-size: 21px;line-height: 1.4;}
    .featurette-heading {font-size: 50px;}
    .navbar-right{display: none;}
  }
  
  @media (min-width: 992px) {
    /* body{padding-top: 70px;} */
    .featurette-heading {margin-top: 0px;}
    .navbar{min-height:70px;}
    .navbar-nav>li>a {padding-top: 25px !important;padding-bottom: 25px !important;}
    .navbar-brand {padding-top: 15px;}
    .navbar-brand img{height:40px; /* width:200px; */ }
    .navbar-form{margin-bottom: 0px; margin-top: 20px;}
    .navbar-right{display: block;}
  }

 

<nav class="navbar navbar-default" role="navigation">
  <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"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">
        <img src="__STATIC__/assets/index/images/logo.png" alt="">
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="/">首页</a></li>
        <li><a href="{:url('index/image/list',['id'=>23])}">成品网站</a></li>
        <li><a href="{:url('index/image/list',['id'=>24])}">网站模板</a></li>
        <li><a href="{:url('index/index/list',['id'=>25])}">建站知识</a></li>
        <li><a href="{:url('index/index/page',['id'=>9])}">关于我们</a></li>


        <!-- <li><a href="{:url('index/index/app')}">下载App</a></li> -->

      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <form method="get" action="{:url('index/index/search')}"
            class="navbar-form navbar-left margin-left-0 margin-right-0" role="search">
            <div class="form-group">
              <input type="text" name="k" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">搜索</button>
          </form>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

 

 

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
随机推荐
Rollup 教程
WordPress 常用函数 / sanitize_user
Cookie 的 HTTP Only 属性
Node.js 使用 Jest 做单元测试
JavaScript class 的 this 指向
JavaScript 修改 CSS 样式
WordPress 中如何在主题和插件中使用
Node.js 模块概念