Navbar의 부트 스트랩 3.0 버튼

지금 부트 스트랩 3.0을 업그레이드했습니다. 그리고 btn (클래스 .btn의 도움으로)처럼 보이는 "a"태그는 navbar에서 망가졌습니다.

<li>
   <a href="<?php echo BASE_PATH; ?>register.php" class="btn btn-primary btn-sm">
       <?php echo "<strong>" . _('Bayilik Başvurusu') . "</strong>"; ?>
   </a>
</li>

그러나 제대로 작동하지 않습니다. 부트 스트랩은 내가 생각하는 시스템을 변경했습니다.

<p class="navbar-btn">주위를 감싸 십시오 <a class="btn">:

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <ul class="nav navbar-nav">
            <li>
                <p class="navbar-btn">
                    <a href="#" class="btn btn-default">I'm a link button!</a>
                </p>
            </li>
        </ul>
    </div>
</nav>

JSFiddle : http://jsfiddle.net/lachlan/398kj/

스크린 샷 :

이제 부트 스트랩 3에는 다음과 같은 navbar에 버튼이 있습니다.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

navbar-btnnavbar에 있음을 알 수 있도록 사용합니다 .

작동하려면 다음을 수행하십시오.

<li>
    <form action="#">
        <button class="btn btn-default navbar-btn">Link</button>
    </form>
</li>

이런 식으로 여전히 앵커 태그처럼 작동합니다. #실제로 원하는 값으로 변경 하십시오.

따라서이 경우 :

<li>
    <form action="<?php echo BASE_PATH; ?>register.php">
        <button class="btn btn-default navbar-btn">Link</button>
    </form>
</li>

부트 스트랩 3을 사용하면 <a>링크를 버튼으로 렌더링 할 수 있지만 <form>. 또한에 클래스를 <a>포함해야합니다 navbar-btn.

<li>
  <form>
    <a href="#" class="btn btn-primary btn-sm navbar-btn">
      register
    </a>
  </form>
</li>

문제는 navbar에서 앵커 스타일을 지정하는 선택기 .nav > li > a가 .navbar-btn보다 우선 순위가 더 높다는 것입니다.

스팬과 같은 다른 태그로 감싸서 수정할 수 있습니다. 양식이 전혀 아니기 때문에 다른 사람들이 제안한 것처럼 양식 태그를 사용해서는 안된다고 생각합니다.

http://learnangular2.com/events/

이벤트 개체

이벤트 객체를 캡처하려면 템플릿의 이벤트 콜백에서 매개 변수로 $ event를 전달합니다.

<button (click)="clicked($event)"></button>

이것은 preventDefault를 호출하는 것과 같이 이벤트를 수정하는 쉬운 방법입니다.

@Component(...)
class MyComponent {
  clicked(event) {
    event.preventDefault();
  }
}