ReactJS Reactstrap Jumbotron 组件

Reactstrap 是一个基于引导程序的 react UI 库，用于通过其无缝且易于使用的组件制作美观的网页。

jumbotron 是一个灰色的大框，用于指示一些需要特别注意的文本。任何看起来很重要的文本都可以写在大屏幕中，以使其显得大而引人注目。在本文中，我们将了解如何在 Reactstrap 中使用 Jumbotron 组件。

特性：

• 流体： reactStrap Jumbotron 中的流体属性用于在屏幕中占据整个宽度。它采用默认值 false 并且类型是布尔值。
• as：属性用于查找自定义元素类型，默认值为
  ，类型为 elementType 。
• className： reactStrap 中的 className 属性用于指定 CSS 属性。它采用默认值作为字符串。

句法：

  content

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

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

  npx create-react-app foldername

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

  cd foldername

• 第 3 步：在给定目录中安装 Reactstrap。

npm install --save reactstrap react react-dom

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

项目结构

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

npm start

示例 1：这是展示如何使用 Jumbotron 组件的基本示例。

App.js

import React from "react";
import { Jumbotron } from "reactstrap";
const gfg = (props) => {
    return (
        

            

            
                

                    GeeksforGeeks!
                
                

                

                    A Computer Science portal for geeks. 
                    It contains well written, well 
                    thought and well explained computer 
                    science and programming articles, 
                    quizzes. A Computer Science portal 
                    for geeks. It contains well written, 
                    well thought and well explained 
                    computer science and programming
                    articles, quizzes.We provide a variety 
                    of services for you to learn, thrive 
                    and also have fun! Free Tutorials, 
                    Millions of Articles, Live, Online and 
                    Classroom Courses ,Frequent Coding 
                    Competitions ,Webinars by Industry 
                    Experts, Internship opportunities 
                    and Job Opportunities.
                
            
        
    );
};
  
export default gfg;

输出：

输出：

示例 2：这是我们将使用另一个 Jumbotron 组件的示例。

应用程序.js

import React from "react";
import { Jumbotron, Button } from "reactstrap";
  
const geeksforgeeks = (props) => {
    return (
        

            
                

                    Geeksforgeeks
                
                  
                

                    What We Offer... 


                    Provide a variety of services 
                    for you to learn, thrive and 
                    also have fun!
                
  
                

  
                

                    Free Tutorials, Millions of Articles, 
                    Live, Online and Classroom Courses, 
                    Frequent Coding Competitions, Webinars 
                    by Industry Experts, Internship
                    opportunities and Job Opportunities. 
                    Billions of Users, Millions of Articles 
                    Published, Thousands Got Hired by Top 
                    Companies and the numbers are still growing.
                
            
        
    );
};
  
export default geeksforgeeks;

输出：

新的 Jumbotron 组件

参考： https://reactstrap.github.io/components/jumbotron