Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu tiếp về các component ListGroup và Button trong Bootstrap 4. Nào hãy cũng mình tìm hiểu nhé!
Component ListGroup:
Component list group trong Bootstrap rất hữu ích và linh hoạt trong việc tinh chỉnh thẻ danh sách cơ bản của HTML một cách đẹp mắt hơn. Để gọi component này thì bạn chỉ cần thiết lập class list-group cho thẻ cha ul và list-group-item cho các thẻ con li. Để hiểu rõ hơn hãy cùng mình đi vào tìm hiểu ví dụ dưới đây nhé:
Class List Group:
See the Pen list-group Bootstrap by haycuoilennao19 [@haycuoilennao19] on CodePen.
Ở đây mình có lưu ý nhỏ là trong thực tế component này có thể được sử dụng làm sidebar navigation[Thanh menu nằm dọc], hiển thị danh sách sản phẩm, categories[thể loại]... Để giúp bạn có cái nhìn trực quan hơn thì chúng ta sẽ cùng nhau thiết kế một sidebar navigation bằng cách sử dụng Bootstrap và Font Awesome[icon hiển thị trên web]. Để tìm hiểu thêm về Font Awesome thì truy cập ở đây nhé Tìm hiểu thêm.
Nếu bạn gặp khó khăn trong việc mà tải và sử dụng Font Awesome thì mình sẽ đặt đường dẫn CDN ở dưới và bạn chỉ cần copy, đặt nó nằm trong thẻ head là có thể sử dụng được nhé.
Ví Dụ Về List Group:
See the Pen liest-group example by haycuoilennao19 [@haycuoilennao19] on CodePen.
Ở ví dụ trên có một lưu ý là class active giúp người dùng biết mình đang ở trang nào [cái này thì thường được kết hợp với javascript nhé]. Tiếp theo mình sẽ giới thiệu về cách thêm màu nền vào trong thẻ danh sách con li. Như bạn đã biết các màu cơ bản trong Bootstrap là success, primary, danger... thì để gọi nó trong component List Group mình sẽ thêm như sau: list-group-item-[color]. Ví dụ bạn muốn gọi màu nền primary cho nó thì mình sẽ dùng list-group-item-primary. Để nắm rõ hơn hãy xem đoạn code dưới đây nhé:
Color List-Group-Item:
See the Pen background list-group-item by haycuoilennao19 [@haycuoilennao19] on CodePen.
Nãy giờ thì chúng ta chỉ sử dụng những từ hoặc đường dẫn cho component List Group, sau đây mình muốn giới thiệu về cách thêm nội dung như tiêu đề, đoạn văn... vào cho nó. Để hiểu rõ bạn hãy xem ví dụ dưới đây nhé:
Nội dung Cho List Group:
See the Pen Noi dung Bootstrap by haycuoilennao19 [@haycuoilennao19] on CodePen.
Component Button:
Đây là một thành phần không thể thiếu trong một trang web vì nó là nơi để người dùng có thể tương tác với trang web của bạn như là nút gửi đăng kí, đăng nhập, chuyển hướng sang trang khác... Vì thế Bootstrap cung cấp cho chúng ta tinh chỉnh button[nút] một cách nhanh chóng và hiệu quả thông qua việc gọi các class mình muốn. Không giống như những compent khác, nó có thể áp dụng cho nhiều đối tượng như là thẻ , , ....
Để tạo một component button thì mình sẽ gọi class btn và btn-[color] dùng để thêm màu nền cho nó. Ví dụ chúng ta tạo một button có màu primary bằng cách sau:
Trang Chủ
Để nắm rõ hơn thì bạn hãy xem ví dụ dưới đây nhé:
Button
See the Pen button by haycuoilennao19 [@haycuoilennao19] on CodePen.
Như bạn thấy thì ở ví dụ trên có một loại button có class btn btn-link hơi khác so với những button khác dùng để hiển thị cho đường dẫn nhé. Ngoài ra nếu chúng ta không muốn sử dụng màu nền cho button thì Bootstrap cung cấp class btn-outline-[color] có tác dụng là chỉ thay đổi màu của chữ và đường viền cho nút. Để nắm rõ hơn hãy cùng mình đi vào tìm hiểu ví dụ dưới đây:
Class btn-outline:
See the Pen btn-outline Bootstrap by haycuoilennao19 [@haycuoilennao19] on CodePen.
Ở ví dụ trên bạn thử hover[di chuyển chuột lên] các button thì nó sẽ chuyển sang button với màu nền tương ứng. Để cho việc linh hoạt sử dụng component này thì Bootstrap cho phép chúng ta điều chỉnh kích thước của nó thông qua class btn-sm cho button nhỏ và btn-lg cho button lớn. Để hiểu rõ hơn hãy xem ví dụ dưới đây nhé:
Kích Thước Button:
See the Pen size button bootstrap by haycuoilennao19 [@haycuoilennao19] on CodePen.
Ngoài việc chỉnh kích thước cho button thì chúng ta có thể tạo một block button[nó sẽ có độ rộng 100% của thẻ cha chứa nó] bằng cách gọi class btn-block. Để nắm rõ hơn các bạn xem ví dụ dưới đây nhé:
Class btn-block:
See the Pen btn-block by haycuoilennao19 [@haycuoilennao19] on CodePen.
Phần cuối cùng mình muốn giới thiệu trong component là hai class active và disabled. Với class disabled thì nó sẽ không cho phép người dùng nhấn vào để tương tác với trang web. Trong thực tế hai class này được sử dụng khá nhiều ví dụ như bạn có form đăng kí và chỉ muốn người dùng phải nhập hết thông tin thì mới có thể đăng kí thành viên. Vậy đối với button sumit[gửi form] thì sẽ sử dụng class disabled khi người dùng chưa nhập đủ và nếu nhập hết thông tin cần thiết thì mình sẽ chuyển class từ disabled sang active thì lúc này người dùng mới có thể có thể gửi form đăng kí. Hãy xem ví dụ về hai class này để hiểu rõ hơn nhé:
Button Active Và Disabled:
See the Pen btn active va disabled by haycuoilennao19 [@haycuoilennao19] on CodePen.
Component Button Group:
Nó được dùng để nhóm các button lại với nhau bằng cách ta sẽ gọi một thẻ div với class btn-group và đặt các nút con vào trong thẻ div này. Để nắm rõ hơn bạn theo dõi đoạn code sau đây nhé:
Class btn-group:
See the Pen btn-group by haycuoilennao19 [@haycuoilennao19] on CodePen.
Nó cũng có chức năng điề chỉnh kích thước của button-group bằng cách gọi class btn-group-lg cho kích thước lớn và btn-group-sm cho kích thước nhỏ. Để hiểu rõ hơn hãy cùng mình xem ví dụ sau đây nhé:
See the Pen btn-group size by haycuoilennao19 [@haycuoilennao19] on CodePen.
Nếu trong vài trường hợp bạn muốn sử dụng nhóm button-group theo chiều dọc thì ta sẽ gọi class btn-group-vertical cho nó. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:
See the Pen btn-group-vertial by haycuoilennao19 [@haycuoilennao19] on CodePen.
Tổng kết:
Qua đây mình mong bài viết sẽ giúp các bạn nắm được component ListGroup, Button và ButtonGroup trong Bootstrap 4 và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!