-1
[! [이미지 설명을 여기에 입력하십시오.] [1]] [1] 미리 정의 된 탐색 스타일을 다운로드했으며이를 부트 스트랩에 사용하고 싶습니다. 그래서 기본적으로 나는 그들을 섞기를 원한다. 그래서 부트 스트랩은 CSS에 도달하고 원하는 디자인을 달성하기 위해 같은 클래스를 사용할 수있다. 기본 부트 스트랩 navbar를 덮어 써야합니까? 아니면 사소한 방법이 있습니까?bootsrap navbar를 어떻게 덮어 쓰시겠습니까?
다음은 사전 정의 된 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>
자료 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;
}
문제가 있습니다. 그게 뭔지 말해 줄 수 있어요? 나는 질문을 업데이트하고 그림을 추가했다. – JustMatthew
더 많은 CSS가 있습니까? 내 경우에는 잘 작동합니다. 내 코드 스 니펫을 사용해 보셨습니까? – neophyte
예,하지만 그게 전부 내 CSS 아니 었어. 나는 그것을 또한 업데이트한다. 나는 정말로 감사 할 것입니다. 만약 당신이 저에게 마지막 하나를 도와 주었다면 :) – JustMatthew