Bootstrap 3.0-Schaltfläche in der Navigationsleiste

Ich habe jetzt Bootstrap 3.0 aktualisiert. Und "ein" Tag, das wie btn aussieht (mithilfe der Klasse .btn), ist auf der Navigationsleiste ruiniert.

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

Aber es funktioniert nicht richtig. Bootstrap hat das System verändert, denke ich.

Wickeln Sie ein <p class="navbar-btn">um <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/

Bildschirmfoto:

Jetzt hat Bootstrap 3 folgende Schaltflächen in der Navigationsleiste:

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

Es wird verwendet, navbar-btndamit es weiß, dass es sich in der Navigationsleiste befindet.

Wenn Sie möchten, dass es funktioniert, gehen Sie folgendermaßen vor:

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

Auf diese Weise verhält es sich immer noch wie ein Ankertag. Ändern #Sie einfach den Wert, zu dem er tatsächlich gehen soll.

Also für diesen Fall:

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

Mit Bootstrap 3 ist es weiterhin möglich, einen <a>Link als Schaltfläche zu rendern, aber Sie müssen ihn in eine einfügen <form>. Außerdem <a>sollte die navbar-btnKlasse enthalten sein.

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

Das Problem ist, dass der Selektor zum Stylen eines Ankers in einer Navigationsleiste lautet: Dies .nav > li > abedeutet, dass er eine höhere Priorität hat als ein .navbar-btn.

Sie können das Problem beheben, indem Sie es einfach wie eine Spanne in ein anderes Tag einwickeln. Ich denke nicht, dass Sie ein Formular-Tag verwenden sollten, wie andere vorschlagen, da es überhaupt kein Formular ist.

http://learnangular2.com/events/

EREIGNISOBJEKT

Übergeben Sie zum Erfassen des Ereignisobjekts $ event als Parameter im Ereignisrückruf aus der Vorlage:

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

Dies ist eine einfache Möglichkeit, das Ereignis zu ändern, z. B. den Aufruf von prepareDefault:

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