Categories: Thủ Thuật Mới

List button bootstrap Chi tiết

Mục lục bài viết

Kinh Nghiệm về List button bootstrap Chi Tiết

Cập Nhật: 2022-01-06 12:53:07,Bạn Cần tương hỗ về List button bootstrap. Bạn trọn vẹn có thể lại Comments ở cuối bài để Tác giả đc lý giải rõ ràng hơn.


List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

Tóm lược đại ý quan trọng trong bài

  • Basic example
  • Disabled items
  • Anchors and buttons
  • Contextual classes
  • Custom content

Contents

Basic example

The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Add tags to any list group item to show unread counts, activity, etc.

  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 Morbi leo risus
  • 14
    Cras justo odio
  • 2
    Dapibus ac facilisis in
  • 1
    Morbi leo risus

Disabled items

Add .disabled to a .list-group-item to gray it out to appear disabled.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

Anchors and buttons

Use anchors or buttons to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action. This separate class contains a few overrides to add compatibility for s and s, as well as the hover and focus states.

Be sure to not use the standard .btn classes here.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

Contextual classes

Use contextual classes to style list items, default or linked. Also includes .active state.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum at eros
Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

Custom content

Add nearly any HTML within, even for linked list groups like the one below.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Reply
3
0
Chia sẻ

đoạn Clip hướng dẫn Share Link Cập nhật List button bootstrap ?

– Một số Keywords tìm kiếm nhiều : ” Video full hướng dẫn List button bootstrap tiên tiến và phát triển nhất , Chia Sẻ Link Tải List button bootstrap “.

Thảo Luận vướng mắc về List button bootstrap

Bạn trọn vẹn có thể để lại Comments nếu gặp yếu tố chưa hiểu nha.
#List #button #bootstrap

Phương Bách

Published by
Phương Bách
3 years ago