Nút Bootstrap

Phần tử nút là một trong những phần tử Ngôn ngữ đánh dấu siêu văn bản (HTML) hữu ích hơn theo nghĩa nó cho phép người dùng tương tác với một trang.

Đăng nhập, đăng ký, xóa hoặc mở thứ gì đó, hiển thị menu, thay đổi chủ đề màu sắc là những hành động được thực hiện với các nút.

Các kiểu nút mặc định của trình duyệt không đẹp nhất và không hiện đại bằng bất kỳ phương tiện nào.

Bằng cách tùy chỉnh kiểu của chúng trên mọi dự án, chúng tôi lặp lại cùng một mã nhiều lần để có kết quả giống nhau.

Một lần nữa, Bootstrap đồng hành cùng chúng tôi. Hãy xem những gì có thể với các nút Bootstrap.

Các nút màu

    <button class="btn btn-primary">button 1</button>
    <button class="btn btn-secondary">button 2</button>
    <button class="btn btn-info">button 3</button>
    <button class="btn btn-warning">button 4</button>
    <button class="btn btn-danger">button 5</button>
    <button class="btn btn-success">button 6</button>
    <button class="btn btn-light">button 7</button>
    <button class="btn btn-dark">button 8</button>
    <button class="btn btn-link">button 9</button>

Về màu sắc, chúng ta có thể sử dụng mọi màu sắc được xác định trước của Bootstrap, cùng với tùy chọn BTN-LINK, để áp dụng kiểu dáng của Bootstrap cho các liên kết.

Tất cả các tùy chọn màu đều có được lớp đệm đồng nhất đẹp mắt và chuyển đổi màu nhanh chóng sang bóng tối hơn một chút khi di chuột qua. Liên kết có một gạch dưới khi di chuột.

Nếu chúng ta chỉ khai báo lớp BTN, Bootstrap sẽ chỉ xóa kiểu trình duyệt mặc định:

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

<button>Without Bootstrap</button>
<button class="btn">With Bootstrap</button>

Như chúng ta có thể thấy ở đây:

Các nút phác thảo

Chúng ta có thể sử dụng các màu giống nhau để tạo các nút chỉ với một đường viền:

 	<button class="btn btn-outline-primary">button 1</button>
    <button class="btn btn-outline-secondary">button 2</button>
    <button class="btn btn-outline-info">button 3</button>
    <button class="btn btn-outline-warning">button 4</button>
    <button class="btn btn-outline-danger">button 5</button>
    <button class="btn btn-outline-success">button 6</button>
    <button class="btn btn-outline-light">button 7</button>
    <button class="btn btn-outline-dark">button 8</button>
    <button class="btn btn-outline-link">button 9</button>

Chúng có cùng màu nền với đường viền và văn bản trở thành màu trắng hoặc đen, tùy thuộc vào độ tương phản. Đèn và màu vàng (CẢNH BÁO) nhận được văn bản màu đen. Tuy nhiên, phiên bản liên kết không hỗ trợ tùy chọn này.

Định cỡ

Bootstrap hỗ trợ ba kích thước cho các nút:nhỏ, thông thường và lớn.
Chúng tôi thêm một lớp khác để chọn kích thước như vậy:

<div class="m-5">
      <button class="btn btn-primary btn-sm">small button 1</button>
      <button class="btn btn-warning btn-sm">small button 2</button>
      <button class="btn btn-primary btn-sm">small button 3</button>
    </div>
    <div class="m-5">
      <button class="btn btn-primary">regular button 1</button>
      <button class="btn btn-warning">regular button 2</button>
      <button class="btn btn-danger">regular button 3</button>
    </div>
    <div class="m-5">
      <button class="btn btn-primary btn-lg">large button 1</button>
      <button class="btn btn-warning btn-lg">large button 2</button>
      <button class="btn btn-danger btn-lg">large button 3</button>
    </div>

Ba nút của mỗi kích thước được tạo ra và quấn mỗi kích thước trong một div với lớp M-5 chỉ để tạo cho chúng một chút lề, để tạo khoảng trống cho chúng.

Các nút cấp độ khối

Nếu chúng tôi muốn một nút có chiều rộng bằng toàn bộ chiều rộng của phần tử chứa nó, chúng tôi thêm một lớp BTN-BLOCK vào nó. Hãy tạo một biểu mẫu đơn giản, một trường hợp phổ biến cho phương pháp này.

<div class="form-group">
          <label for="username">username</label>
          <input type="text" class="form-control" />
          <div class="form-group"></div>
          <label for="email">Email</label>
          <input type="email" class="form-control" />
        </div>
        <button class="btn btn-lg btn-block btn-primary">
          Block Level Button
        </button>
        <button class="btn btn-lg btn-secondary my-2">Regular button</button>
      </form>

Chúng tôi sẽ không đi vào chi tiết về các lớp biểu mẫu Bootstrap.

Chúng tôi chỉ tạo một biểu mẫu đơn giản chấp nhận tên người dùng và email, đồng thời có một nút cấp khối và một nút thông thường.

MT-2 một lần nữa chỉ được thêm vào lề (trên cùng) để tách hai nút.

Và ở đây chúng ta có thể thấy sự khác biệt:

Trạng thái nút

Giống như với nhiều thành phần Bootstrap khác, chúng ta có thể thay đổi giao diện của một nút bằng lớp trạng thái, đó là ACTIVE hoặc DISABLED.

Trạng thái hoạt động

Một nút hoạt động có nền, đường viền và bóng tối hơn một chút.

      <button class="btn btn-primary">Regular</button>
      <button class="btn btn-primary active">Active</button>
      <button class="btn btn-primary">Regular</button>

Trạng thái bị vô hiệu

Ngược lại, các nút bị vô hiệu hóa sử dụng các sắc thái nhẹ hơn cho các thuộc tính giống nhau. Biết rằng việc thêm lớp ĐÃ HÓA sẽ chỉ cung cấp cho nút có màu sáng hơn. Để làm cho nó thực sự bị vô hiệu hóa, chúng ta phải khai báo nó dưới dạng thuộc tính button:

	<button class="btn btn-primary disabled">Disabled Looking</button>
    <button class="btn btn-primary" disabled>Truly Disabled</button>

Người có lớp bị TẮT vẫn có thể nhấp được và sẽ thực hiện một hành động nếu có.

Đối với công nghệ hỗ trợ, chúng tôi cũng cần bao gồm thuộc tính ARIA-DISABLED =“TRUE”, để người dùng trình đọc màn hình biết có một nút bị tắt trên màn hình.

Ngoài ra, hiện tại các phần tử không hỗ trợ thuộc tính DISABLED, vì vậy, để có được giao diện bị vô hiệu hóa, chúng tôi phải đưa vào lớp.

<a class="btn btn-danger" disabled>Attribute Not Supported</a>
      <a href="#" class="btn btn-danger disabled">Disabled Look</a>

Trong trường hợp thẻ , lớp DISABLED thêm quy tắc CSS POINTER-EVENTS:NONE, vô hiệu hóa các lần nhấp chuột.

Dù sao thì bạn cũng không nên sử dụng các thẻ làm nút, nhưng bạn nên biết.

Nhóm nút

Cũng giống như với CARDS <(đang xuất bản tại thời điểm viết bài) trong Bootstrap, chúng ta có thể sử dụng lớp GROUP để kết hợp các nút với nhau thành một phần tử một cách trực quan.

<div class="btn-group">
      <button class="btn btn-primary">button 1</button>
      <button class="btn btn-warning">button 2</button>
      <button class="btn btn-info">button 3</button>
      <button class="btn btn-danger">button 4</button>
    </div>

Chúng tôi chỉ cần bọc chúng trong một div với lớp BTN-GROUP và thế là xong!

Hoạt động hoàn toàn giống nhau, nhưng giờ đây chúng nằm ngay cạnh nhau và các góc bên ngoài được bo tròn đẹp mắt.

Tóm tắt lại

Các nút có thể được tìm thấy trên hầu hết mọi trang web và chúng là một phần rất quan trọng của trải nghiệm trực tuyến. Chúng tôi có thể đăng nhập vào tài khoản của mình, đặt hàng trực tuyến, đăng ký nhận bản tin hoặc chặn tất cả thư rác đổ bộ vào hộp thư đến của chúng tôi bằng các nút. Nếu không có chúng, các trang web sẽ là danh thiếp kỹ thuật số. Thông qua Bootstrap, chúng tôi cũng có thể làm cho các nút trở thành một thành phần đẹp mắt của các trang web của chúng tôi.