Nút Bootstrap 3.0 trong Navbar

Tôi đã nâng cấp bootstrap 3.0 ngay bây giờ. Và thẻ "a" trông giống như btn (bởi sự trợ giúp của lớp .btn) bị hủy trên thanh điều hướng.

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

Nhưng nó không hoạt động chính xác. Bootstrap đã thay đổi hệ thống mà tôi nghĩ.

Quấn <p class="navbar-btn">quanh <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/

Ảnh chụp màn hình:

Bây giờ, bootstrap 3 có các nút trên thanh điều hướng như sau:

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

Nó sử dụng navbar-btnđể nó biết nó trong thanh điều hướng.

Nếu bạn muốn nó hoạt động, hãy làm như sau:

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

Bằng cách này, nó vẫn hoạt động giống như một thẻ neo. Chỉ cần thay đổi #giá trị mà bạn thực sự muốn nó chuyển đến.

Vì vậy, đối với trường hợp này:

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

Với bootstrap 3, vẫn có thể có một <a>liên kết được hiển thị dưới dạng một nút, nhưng bạn phải đưa chúng vào một <form>. Ngoài ra, <a>nên bao gồm cả navbar-btnlớp.

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

Vấn đề là bộ chọn để tạo kiểu neo trong thanh điều hướng là: .nav > li > acó nghĩa là nó có mức độ ưu tiên cao hơn .navbar-btn.

Bạn có thể khắc phục bằng cách chỉ gói nó trong một thẻ khác như một khoảng. Tôi không nghĩ bạn nên sử dụng thẻ biểu mẫu như những người khác đề xuất vì nó hoàn toàn không phải là biểu mẫu.

http://learnangular2.com/events/

ĐỐI TƯỢNG SỰ KIỆN

Để nắm bắt đối tượng sự kiện, hãy chuyển $ event làm tham số trong lệnh gọi lại sự kiện từ mẫu:

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

Đây là một cách dễ dàng để sửa đổi sự kiện, chẳng hạn như gọi hàm PreventDefault:

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