Bootstrap 与 Material UI

Bootstrap 和 Material UI 都是现代 Web 开发中常用的前端框架，它们提供了丰富的 UI 组件及样式，并且容易上手。

Bootstrap

Bootstrap 是 Twitter 公司推出的前端框架，它提供了大量的 CSS 样式和 JS 组件，使得 Web 开发更加便捷。Bootstrap 的特点包括：

• 响应式设计，支持各种设备
• 众多的 CSS 类，可以通过组合使用来构建复杂的 UI
• 组件库丰富，包括表格、表单、导航栏等等
• 可以通过定制化来适应项目需求

使用方法

直接使用

可以从 Bootstrap 官网上下载最新的源代码和文档，然后将 css 和 js 文件引入到项目中。

<!-- 引入 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+z9zKwzFV+MVIhtXpGJpXw1jwxvL+jR/m0Apn" crossorigin="anonymous">

<!-- 引入 JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper-base.min.js" integrity="sha384-GBMgsP7RKXwFx8o8MLknvM9kzd+IyDLx49oFbbE5lgj4NzWRgI+0DGS9vr/lxCLb" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+z9zKwzFV+MVIhtXpGJpXw1jwxvL+jR/m0Apn" crossorigin="anonymous"></script>

使用 NPM 安装

可以通过 NPM 包管理器来安装 Bootstrap：

npm install bootstrap

然后可以在项目中引入：

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

常用组件

Navbar

Navbar 是一个常用的导航栏组件，可以用于展示网站的主要链接，以下是一个基本的使用方法及效果示例：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

效果如下：

Carousel

Carousel 是一个常用的轮播组件，可以用于展示多张图片或内容，以下是一个基本的使用方法及效果示例：

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/800/400?random=1" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/800/400?random=2" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/800/400?random=3" class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

效果如下：

Material UI

Material UI 是一款基于 Google Material Design 的前端框架，提供了丰富的 React 组件和样式。Material UI 的特点包括：

• 完全响应式设计，支持各种设备
• 基于 React，容易使用和扩展
• 可以根据主题来定制样式
• 提供了许多常用的组件和样式

使用方法

直接使用

可以从 Material UI 的官网上下载最新的源代码和文档，然后将 css 和 js 文件引入到项目中。

<!-- 引入 CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,500,700&amp;display=swap">
<link rel="stylesheet" href="https://unpkg.com/@mui/material@5.0.4/dist/mui.min.css">

<!-- 引入 JS -->
<script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/@mui/material@5.0.4/dist/mui.min.js"></script>

使用 NPM 安装

可以通过 NPM 包管理器来安装 Material UI：

npm install @mui/material

然后可以在项目中引入：

import { Button } from '@mui/material';
import '@mui/material/dist/mui.css';

常用组件

AppBar

AppBar 是一个常用的应用程序栏组件，可以用于展示应用的标题和菜单，以下是一个基本的使用方法及效果示例：

import { AppBar, Toolbar, IconButton, Typography, Button } from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';

export default function MyAppBar() {
  return (
    <AppBar position="static">
      <Toolbar>
        <IconButton edge="start" color="inherit">
          <MenuIcon />
        </IconButton>
        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
          My App
        </Typography>
        <Button color="inherit">Login</Button>
      </Toolbar>
    </AppBar>
  );
}

效果如下：

Tabs

Tabs 是一个常用的选项卡组件，可以在多个内容之间进行切换，以下是一个基本的使用方法及效果示例：

import { Tabs, Tab } from '@mui/material';

export default function MyTabs() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Tabs value={value} onChange={handleChange}>
      <Tab label="Tab 1" />
      <Tab label="Tab 2" />
      <Tab label="Tab 3" />
    </Tabs>
  );
}

效果如下：

结语

Bootstrap 和 Material UI 都是非常优秀的前端框架，有着自己的优势和不同的使用场景。作为开发者，我们可以根据需求来选择合适的框架，并在项目中灵活地运用它们。