React-Bootstrap 示例 - JavaScript

React-Bootstrap 是一个基于 React 库的 UI 组件库，用于构建美观且高效的网页应用程序。它汇集了 Bootstrap 的强大样式和组件，并以 React 组件的形式提供给开发者使用。

以下是一些 React-Bootstrap 示例，展示了如何使用不同组件来创建各种交互性和响应式的界面。

安装 React-Bootstrap

要使用 React-Bootstrap，需要先安装相关的依赖：

npm install react-bootstrap bootstrap

导入样式

在应用程序的入口文件中，导入 Bootstrap 样式表：

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

示例代码

Button 按钮

import React from 'react';
import Button from 'react-bootstrap/Button';

const App = () => {
  return (
    <Button variant="primary">点击我</Button>
  );
};

export default App;

Navbar 导航栏

import React from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';

const App = () => {
  return (
    <Navbar bg="dark" variant="dark">
      <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
      <Nav className="mr-auto">
        <Nav.Link href="#features">特性</Nav.Link>
        <Nav.Link href="#pricing">定价</Nav.Link>
      </Nav>
    </Navbar>
  );
};

export default App;

Modal 对话框

import React, { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';

const App = () => {
  const [showModal, setShowModal] = useState(false);

  const handleModal = () => {
    setShowModal(!showModal);
  };

  return (
    <>
      <Button variant="primary" onClick={handleModal}>
        打开对话框
      </Button>

      <Modal show={showModal} onHide={handleModal}>
        <Modal.Header closeButton>
          <Modal.Title>对话框标题</Modal.Title>
        </Modal.Header>
        <Modal.Body>这是对话框的内容。</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleModal}>
            关闭
          </Button>
          <Button variant="primary" onClick={handleModal}>
            保存
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

export default App;

结论

React-Bootstrap 是一个强大且易于使用的 UI 组件库，提供了丰富的组件和样式选项，可帮助您快速构建漂亮的网页应用程序。以上示例只是其中的一小部分，您可以查阅 React-Bootstrap 文档以获取更多组件的使用示例和详细信息。