css - glyphicon - Botón Bootstrap 3.0 en Navbar

navbar bootstrap template

Question

Actualicé bootstrap 3.0 ahora. Y la etiqueta "a" que parece btn (con la ayuda de la clase .btn) está arruinada en la barra de navegación.

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

Pero no está funcionando correctamente. Bootstrap cambió el sistema, creo.

Answer 1

Ahora, bootstrap 3 tiene botones en la barra de navegación de esta manera:

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

Utiliza navbar-btn para que sepa que está en la barra de navegación.

Si quieres que funcione, haz esto:

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

De esta manera, todavía actúa como una etiqueta de anclaje. Simplemente cambie # por el valor que realmente desea que vaya.

Entonces para esta instancia:

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

Answer 2

Ajustar una <p class="navbar-btn"> alrededor de la <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/

Captura de pantalla:

Answer 3

Con bootstrap 3, aún es posible tener un enlace <a> representado como un botón, pero debe incluirlos en un <form> . Además, <a> debería incluir la clase navbar-btn .

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

Answer 4

El problema es que el selector para diseñar un anclaje en una barra de navegación es: .nav > li > a que significa que tiene una precedencia más alta que .navbar-btn.

Puedes arreglarlo simplemente envolviéndolo en otra etiqueta como un lapso. No creo que deba usar una etiqueta de formulario como otros sugieren, ya que no es una forma en absoluto.

Answer 5

http://learnangular2.com/events/

OBJETO DE EVENTO

Para capturar el objeto del evento, pase $ event como parámetro en la devolución de llamada del evento desde la plantilla:

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

Esta es una manera fácil de modificar el evento, como llamar a preventDefault:

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