如何使用 Bootstrap 将徽章放在表格单元格中?
在本文中,我们将学习如何使用 Bootstrap 在表格单元格中使用徽章。我们将首先学习如何使用 Bootstrap 徽章,然后将它们添加到表格的单元格中。
Bootstrap 徽章:响应式徽章包含在最新的 Bootstrap 版本中。徽章为任何内容添加额外的信息,如计数或标签。徽章的样式提供了其用途的可见线索。这些标记可以出现在句子、链接或按钮的尖端。下面的示例演示了 Bootstrap 徽章。
示例:这里我们将使用 noramll 形式的 bafges,在下一个示例中,我们将在表格单元格中使用它。
HTML
Button
Headings
GFG Classic
Krishna K
GFG Classic
Krishna K
GFG Classic
Krishna K
Pill Badges
GFG S
GFG D
GFG W
Links
GFG P
GFG I
GFG L
HTML
Badge inside cell Example 1
Badge
Content
Success
This is the success content
Warning
This is the warning content
Danger
This is the danger content
Dark
This is the dark content
HTML
Badge inside cell Example 2
S.No
Policy Name
1
Spring Sale
new
2
Summer Special 21
new
3
Winter Wardrobe 19
expired
4
All Day Bonanza
expired
输出:
单元格中的徽章:只需将包含徽章的分区包含在一个表格单元格中,就可以将徽章放置在表格单元格中。这可用于突出显示表格中的某些文本。下面的示例演示了在表格单元格中使用徽章。
示例 1:在此示例中,我们将在第一列中显示徽章,在第二列中显示其他文本。
HTML
Badge inside cell Example 1
Badge
Content
Success
This is the success content
Warning
This is the warning content
Danger
This is the danger content
Dark
This is the dark content
输出:
示例 2:在此示例中,我们将在表格单元格的内容旁边显示徽章。
HTML
Badge inside cell Example 2
S.No
Policy Name
1
Spring Sale
new
2
Summer Special 21
new
3
Winter Wardrobe 19
expired
4
All Day Bonanza
expired
输出: