📅  最后修改于: 2023-12-03 15:29:39.039000             🧑  作者: Mango
Bootstrap 和 Material UI 都是现代 Web 开发中常用的前端框架,它们提供了丰富的 UI 组件及样式,并且容易上手。
Bootstrap 是 Twitter 公司推出的前端框架,它提供了大量的 CSS 样式和 JS 组件,使得 Web 开发更加便捷。Bootstrap 的特点包括:
可以从 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 包管理器来安装 Bootstrap:
npm install bootstrap
然后可以在项目中引入:
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
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 是一个常用的轮播组件,可以用于展示多张图片或内容,以下是一个基本的使用方法及效果示例:
<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 是一款基于 Google Material Design 的前端框架,提供了丰富的 React 组件和样式。Material UI 的特点包括:
可以从 Material UI 的官网上下载最新的源代码和文档,然后将 css 和 js 文件引入到项目中。
<!-- 引入 CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&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&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 包管理器来安装 Material UI:
npm install @mui/material
然后可以在项目中引入:
import { Button } from '@mui/material';
import '@mui/material/dist/mui.css';
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 是一个常用的选项卡组件,可以在多个内容之间进行切换,以下是一个基本的使用方法及效果示例:
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 都是非常优秀的前端框架,有着自己的优势和不同的使用场景。作为开发者,我们可以根据需求来选择合适的框架,并在项目中灵活地运用它们。