Bootstrap 3.0 button in Navbar

Question

I updated bootstrap 3.0 now. And the tag "a", which looks like btn (using the .btn class), is destroyed on 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> 

But it does not work properly. Bootstrap has changed the system, I think.

Answer 1

Wrap a <p class="navbar-btn"> around <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/

Screenshot:

Answer 2

Now bootstrap 3 has buttons in the navigation bar, for example:

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

He uses navbar-btn so that he knows this in the navigation bar.

If you want it to work, do the following:

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

Thus, it still acts as an anchor tag. Just change # to the value you really want to go to.

So for this instance:

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

Answer 3

With bootstrap 3, it is still possible to have a <a> link displayed as a button, but you must include them in the <form> . In addition, <a> must include the navbar-btn .

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

Answer 4

The problem is that the selector for styling the anchor in the navigation bar: .nav > li > a , which means that it has a higher priority than .navbar-btn.

You can fix it by simply wrapping it in another tag, for example, span. I don’t think you should use the form tag as others suggest, as this is not a form at all.

Answer 5

http://learnangular2.com/events/

OBJECT OBJECT

To capture an event object, pass $ event as a parameter in the event callback from the template:

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

This is an easy way to change the event, for example, call preventDefault:

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