如何像这样覆盖bootsrap导航栏？

时间：2017-02-15 13:29:30

标签： css twitter-bootstrap navbar

[！[在此处输入图像说明] [1]] [1]我已经下载了预定义的导航样式，我想在bootstrap上使用它。所以基本上我想混合它们，以便引导程序可以使用相同的类，以达到css并实现所需的设计。我应该覆盖默认的bootstrap导航栏，还是有一个简单的方法？

这是预定义的html。 

     <nav class="menu menu--iris">
        <ul class="menu__list">
            <li><a href="#" id="fbox">FoundryBox</a></li>
            <li class="menu__item menu__item--current"><a href="asdsa" class="menu__link">SELFIES</a></li>
            <li class="menu__item"><a href="dasd" class="menu__link">PARTNERS</a></li>
            <li class="menu__item"><a href="asdasd" class="menu__link">DATALOGISTIC</a></li>
        </ul>
      </nav>

Base Bootsrap：

  <nav class="navbar navbar-default" role="navigation">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>    
      </div>
  <a class="navbar-brand" href="#">Brand</a>
    <div class="navbar-collapse collapse">  
   <ul class="nav navbar-nav navbar-right">
     <li><a href="#about">SELFIES</a></li>
     <li><a href="#contact">PARTNERS</a></li>
     <li><a href="#">DIALOGISTIC</a></li>
  </ul>
 </div>
</nav>

css：

   .menu__list {
   position: relative;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   margin: 0;
   padding: 0;
   list-style: none;
   background-image: url('img/fejlec.png');
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: auto 100%;  
   text-align: right;
   }

  .menu--iris .menu__item .menu__link:nth-child(2){
  float: right;

             }

 .menu--iris .menu__item .menu__link:nth-child(2){
 float: right;

 }

 .menu--iris .menu__item .menu__link:nth-child(2){
 float: right;

 }

 .menu__item {
 display: block;
 margin: 1em 0;

 }

 .menu__link {
  font-size: 1.05em;
  font-weight: bold;
  display: block;
  padding: 1em;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  display: table-cell;

   }

  .menu__link:hover,
  .menu__link:focus {
   outline: none;
    }

  /* Iris */
 .menu--iris .menu__item {
  margin: 0 1em;

  }

  .menu--iris .menu__link {
   position: relative;
   text-align: center;
   color: #D1D1D1;
   -webkit-transition: color 0.3s;
   transition: color 0.3s;

   }

 .menu--iris .menu__link:hover,
 .menu--iris .menu__link:focus {
  color: #ffb4b4;
  } 

 .menu--iris .menu__item--current .menu__link {
  color: #E32228;
  }

 .menu--iris .menu__link::before,
 .menu--iris .menu__link::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: 0;
  border: 2px solid #d94f5c;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
  transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
  }

 .menu--iris .menu__link::before {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
  -webkit-transform: translate3d(10px, 10px, 0);
  transform: translate3d(10px, 10px, 0);
  }

.menu--iris .menu__link::after {
 right: 0;
 bottom: 0;
 border-width: 0 2px 2px 0;
 -webkit-transform: translate3d(-10px, -10px, 0);
 transform: translate3d(-10px, -10px, 0);
 }

 .menu--iris .menu__item--current .menu__link::before,
 .menu--iris .menu__item--current .menu__link::after {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  }

 a {
  text-decoration: none !important;
  display:inline-block; 
  }

body{
background-image: url('img/selfii.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-size:cover;
}

#fbox{
font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin    Gothic", 
font-weight: 100px;
color:  #E32228;
text-decoration: none;
font-size: 30px;
text-shadow: 1px 1px #0f0f0f;
}

1 个答案:

答案 0 :(得分：0)

你可以用下面提到的方式做到这一点。它会起作用 -

工作示例

＆＃13;
＆＃13; 
.menu__list {
   position: relative;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   margin: 0;
   padding: 0;
   list-style: none;
   background-image: url('img/fejlec.png');
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: auto 100%;  
   text-align: right;
   }

  .menu--iris .menu__item .menu__link:nth-child(2){
  float: right;

             }

 .menu--iris .menu__item .menu__link:nth-child(2){
 float: right;

 }

 .menu--iris .menu__item .menu__link:nth-child(2){
 float: right;

 }

 .menu__item {
 display: block;
 margin: 1em 0;

 }

 .menu__link {
  font-size: 1.05em;
  font-weight: bold;
  display: block;
  padding: 1em;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  display: table-cell;

   }

  .menu__link:hover,
  .menu__link:focus {
   outline: none;
    }

  /* Iris */
 .menu--iris .menu__item {
  margin: 0 1em;

  }

  .menu--iris .menu__link {
   position: relative;
   text-align: center;
   color: #D1D1D1;
   -webkit-transition: color 0.3s;
   transition: color 0.3s;

   }

 .menu--iris .menu__link:hover,
 .menu--iris .menu__link:focus {
  color: #ffb4b4;
  } 

 .menu--iris .menu__item--current .menu__link {
  color: #E32228;
  }

 .menu--iris .menu__link::before,
 .menu--iris .menu__link::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: 0;
  border: 2px solid #d94f5c;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
  transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
  }

 .menu--iris .menu__link::before {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
  -webkit-transform: translate3d(10px, 10px, 0);
  transform: translate3d(10px, 10px, 0);
  }

.menu--iris .menu__link::after {
 right: 0;
 bottom: 0;
 border-width: 0 2px 2px 0;
 -webkit-transform: translate3d(-10px, -10px, 0);
 transform: translate3d(-10px, -10px, 0);
 }

 .menu--iris .menu__item--current .menu__link::before,
 .menu--iris .menu__item--current .menu__link::after {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  }

 a {
  text-decoration: none !important;
  display:inline-block; 
  }

body{
background-image: url('img/selfii.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-size:cover;
}

#fbox{
font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin    Gothic", 
font-weight: 100px;
color:  #E32228;
text-decoration: none;
font-size: 30px;
text-shadow: 1px 1px #0f0f0f;
}
＆＃13; 
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           
           </head>
           <body>
           
           <nav class="navbar navbar-default menu menu--iris" role="navigation">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>    
      </div>
  <a id="fbox"class="navbar-brand" href="#">Brand</a>
    <div class="navbar-collapse collapse">  
   <ul class="nav navbar-nav navbar-right">
     <li class="menu__item menu__item--current"><a class="menu__link" href="#about">SELFIES</a></li>
     <li class="menu__item" ><a class="menu__link" href="#contact">PARTNERS</a></li>
     <li class="menu__item"><a class="menu__link" href="#">DIALOGISTIC</a></li>
  </ul>
 </div>
</nav>
           </body>
           </html>
＆＃13;
＆＃13;
＆＃13;

注意

在某些情况下，css样式可能存在冲突，在这种情况下使用!important来覆盖不需要的样式。

相关问题
最新问题