React-Bootstrap 徽章组件

React-Bootstrap 是一个前端框架，旨在牢记反应。 Bootstrap 是为 React 重新构建和改进的，因此它被称为 React-Bootstrap。

徽章用于指示目的，例如显示通知编号，我们还可以使用此框架附带的变体显示消息。

徽章道具：

• 丸：用于制作更圆的徽章并添加一些水平填充。
• 变体：用于为徽章添加不同的主题和视觉样式。
• 变体：用于视觉样式。
• bsPrefix：它是一个用于使用强烈定制的引导 css 的逃生舱口。

创建 React 应用程序并安装模块：

• 第 1 步：使用以下命令创建一个 React 应用程序：

  npx create-react-app foldername

• 第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

  cd foldername

• 第 3 步：创建 ReactJS 应用程序后，使用以下命令安装所需的模块：

  npm install react-bootstrap bootstrap

• 第 4 步：在index.js文件中添加以下行：

  import 'bootstrap/dist/css/bootstrap.css';

项目结构：它将如下所示。

项目结构

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React from "react";
import Badge from "react-bootstrap/Badge";
import Button from "react-bootstrap/Button";
  
export default function BadgeExample() {
  return (
    <>
      

        
Notification Indication Badge with multiple variants
        
          Primary variant 
          
            10
          
        {" "}
        
          Secondary variant 
          
            10
          
        {" "}
        
          Success variant 
          
            10
          
        {" "}
        
          Danger variant 
          
            10
          
        {" "}
        
          Warning variant 
          
            10
          
        {" "}
        
          Light variant 
          
            10
          
        {" "}
      
      

  
      

        
Pill Type Badge with multiple variants
        
          Primary pill variant
        {" "}
        
          Secondary pill variant
        {" "}
        
          Success pill variant
        {" "}
        
          Danger pill variant
        {" "}
        
          Warning pill variant
        {" "}
        
          Info pill variant
        {" "}
        
          Light pill variant
        {" "}
        
          Dark pill variant
        
      
      

      

        
Contextual Badge with multiple variants
        
          Primary variant{" "}
        
          Secondary variant{" "}
        
          Success variant{" "}
        
          Danger variant{" "}
        
          Warning variant{" "}
        
          Info variant{" "}
        
          Light variant{" "}
        
          Dark variant 
      
      

      

        
Use of badges in normal text
        

          Heading 
           
            primary badge variant !!!
          
        
        

          Heading 
          
            secondary badge variant
          
        
        

          Heading 
          
            success badge variant
          
        
        

          Heading 
          
            danger badge variant
          
        
        

          Heading 
          
            warning badge variant
          
        
        

          Heading 
          
            info badge variant
          
        
        

          Heading 
          
            dark badge variant
          
        
      
    
  );
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出。

参考： https://react-bootstrap.netlify.app/components/badge/#badges