[html] Bootstrap에서 <button>을 nav-tabs의 일반 링크처럼 보이게 만드는 방법은 무엇입니까?

Program / 글쓴이

저는 (이전의 Twitter) Bootstrap 2에서 작업 중이며 버튼이 일반 링크 인 것처럼 스타일을 지정하고 싶었습니다. 하지만 일반적인 링크는 아닙니다. 이것들은 <ul class="nav nav-tabs nav-stacked">컨테이너에 들어갑니다. 마크 업은 다음과 같이 끝납니다.

<form action="..." method="post">
  <div class="row-fluid">
    <!-- Navigation for the form -->
    <div class="span3">
      <ul class="nav nav-tabs nav-stacked">
        <li><button type="submit" name="op" value="Link 1">Link 1</button></li>
        <li><button type="submit" name="op" value="Link 2">Link 2</button></li>
        <!-- ... -->
      </ul>
    </div>
    <!-- The actual form -->
    <div class="span9">
      <!-- ... -->
    </div>
  </div>
</form>

Bootstrap은 이러한들을 <button>실제로 <a>s 처럼 보이게 할 수있는 방법이 있습니까?

답변

공식 문서에 명시된대로 클래스를 적용하기 만하면됩니다btn btn-link.

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

예를 들어, 제공 한 코드를 사용하면 다음과 같습니다.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />


<form action="..." method="post">
  <div class="row-fluid">
    <!-- Navigation for the form -->
    <div class="span3">
      <ul class="nav nav-tabs nav-stacked">
        <li>
          <button class="btn btn-link" role="link" type="submit" name="op" value="Link 1">Link 1</button>
        </li>
        <li>
          <button class="btn btn-link" role="link" type="submit" name="op" value="Link 2">Link 2</button>
        </li>
        <!-- ... -->
      </ul>
    </div>
    <!-- The actual form -->
    <div class="span9">
      <!-- ... -->
    </div>
  </div>
</form>

스 니펫 확장

답변

일반 링크를 버튼처럼 보이게 만드십시오 🙂

<a href="#" role="button" class="btn btn-success btn-large">Click here!</a>

href 코드 내부의 “역할”은 버튼처럼 보이게하고, 클래스와 같은 변수를 더 추가 할 수 있습니다.

답변

버튼 태그에 remove_button_css를 클래스로 추가하기 만하면됩니다. Link 1의 코드를 확인할 수 있습니다.

.remove_button_css { 
  outline: none;
  padding: 5px; 
  border: 0px; 
  box-sizing: none; 
  background-color: transparent; 
}

여기에 이미지 설명 입력

추가 스타일 편집

추가 color: #337ab7;및 :hover및 :focusOOTB (bootstrap3)와 일치하는

.remove_button_css:focus,
.remove_button_css:hover {
    color: #23527c;
    text-decoration: underline;
}

답변

부트 스트랩 3에서는 다음과 같이 잘 작동합니다.

.btn-link.btn-anchor {
    outline: none !important;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

다음과 같이 사용 :

<button type="button" class="btn-link btn-anchor">My Button</button>

데모

답변

배경색, 테두리를 제거하고 호버 효과를 추가하기 만하면됩니다. 여기 바이올린이 있습니다 : http://jsfiddle.net/yPU29/

<form action="..." method="post">
<div class="row-fluid">
<!-- Navigation for the form -->
<div class="span3">
  <ul class="nav nav-tabs nav-stacked">
    <li><button type="submit" name="op" value="Link 1" class="button-link">Link 1</button></li>
    <li><button type="submit" name="op" value="Link 2" class="button-link">Link 2</button></li>
    <!-- ... -->
  </ul>
</div>
<!-- The actual form -->
<div class="span9">
  <!-- ... -->
</div>
</div>
</form>

CSS :

.button-link {
background-color: transparent;
border: none;
}

.button-link:hover {
color: blue;
text-decoration: underline;
}

답변

여기에 게시 된 모든 예제를 시도했지만 추가 CSS 없이는 작동하지 않습니다. 이 시도:

<a href="http://www.google.com"><button type="button" class="btn btn-success">Google</button></a>

추가 CSS없이 완벽하게 작동합니다.

답변