Question

我已将现有网站转换为自适应网站，并且我已进入导航栏。在旧网站上有一个非常简单的导航栏，上面有一些样式。只需<ul>每个项目<li>，下拉列表<ul>。它看起来像这样：

<ul id="nav">
    <li><a href="#">Home</a></li>
</ul>

完整的小提琴：https://jsfiddle.net/t3haykzd/

如果可能的话，我想制作一个看起来完全像这样的响应式导航栏。根据我的理解，直接编辑引导源是不好的做法。看看bootstraps导航栏，我注意到它有2个元素，header，然后是菜单本身，这是一个无序列表。

是否有一种简单的方法可以将我当前的样式合并到此导航栏中，同时确保它具有响应性？

Answer 1

这是一个应该让你入门的例子。要记住的重要事项（至少在这个例子中）是使用媒体查询以类似于您当前的方式构建导航，这样您就不会在768px下干扰移动功能。绝大多数都是简单的造型。

＆＃13;

body {
  font-family: Arial, Helvetica, sans-serif;
}
.navbar.navbar-default {
  background-color: #fff;
  border: none;
  border-bottom: 6px solid #2A92C2;
}
.navbar.navbar-default .navbar-nav > li > a {
  color: #002B5C;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
  color: #fff;
  background-color: #2A92C2;
}
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:focus,
.navbar.navbar-default .navbar-nav > .active > a:hover {
  background-color: #2A92C2;
  color: #FFF;
}
.navbar.navbar-default .navbar-toggle .icon-bar,
.navbar.navbar-default .navbar-toggle .icon-bar:hover {
  background-color: #2A92C2;
  border: none;
}
.navbar.navbar-default .navbar-toggle,
.navbar.navbar-default .navbar-toggle:focus,
.navbar.navbar-default .navbar-toggle:hover {
  background: none;
  border: none;
}
/*Distribute Links*/

@media (min-width: 768px) {
  .navbar.navbar-default .navbar-nav {
    display: table;
    width: 100%;
  }
  .navbar.navbar-default .navbar-nav > li {
    display: table-cell;
    float: none;
  }
  .navbar.navbar-default .navbar-nav > li > a {
    text-align: center;
  }
  .navbar.navbar-default .navbar-header .navbar-brand {
    display: none;
  }
  .navbar.navbar-default > .container-fluid {
    margin-right: 0;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
  }
}
/*Mobile Brand*/

@media (max-width: 767px) {
  .navbar.navbar-default .navbar-header .navbar-brand {
    color: #2A92C2;
    font-size: 28px;
    font-weight: bold;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav1" aria-expanded="false"> <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="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-nav1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>

        </li>
        <li><a href="#">About</a>

        </li>
        <li><a href="#">Products</a>

        </li>
        <li><a href="#">Services</a>

        </li>
        <li><a href="#">Testimonials</a>

        </li>
        <li><a href="#">News</a>

        </li>
        <li><a href="#">Contact</a>

        </li>
      </ul>
    </div>

  </div>
</nav>
<div class="container">
  <div class="alert alert-info">
    <p>Sup</p>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

＆＃13;

Answer 2

使用以下链接执行此操作可能对您有所帮助。

这个是bootstrap自己定制引导程序组件的外观和感觉。

http://getbootstrap.com/customize/

Bootstrap导航栏自定义而不会丢失功能

2 个答案: