如何从Bootstrap过渡到Semantic-UI React

DebugUsery
386 阅读8分钟

从Bootstrap过渡到Semantic-UI React

9月13日, 2021

网站造型和设计是前端网络开发的一个组成部分。我们期望网络开发人员能够构建一个完美无缺的界面，以增强用户体验。直到现在，Bootstrap一直是许多前端开发人员所青睐的领先设计库。

Semantic UI React和其他现代设计库通过提供先进的元素和功能，正在降低网络造型的复杂性。

前提条件

读者应具备React.js、CSS和Bootstrap的基本知识。对于绝对的初学者来说，他们需要对上述内容进行速成学习，才能开始本教程。

第一部分：在ReactJS中设置Bootstrap

为了充分理解从Bootstrap过渡到语义-UI React的理由，本文将分为两个部分。

  • 创建一个React应用。
  • 向App添加Bootstrap的依赖项。
  • 用React创建一个包括Form、Table和Button的样本页面。
  • 考察使用Bootstrap的缺陷和限制。

第1步 - 开始使用React应用程序

我们将使用我们的命令终端来创建一个React应用，我们通过运行来实现。

npx create-react-app Design-demo

或者，如果你是yarn用户。

yarn create-react-app Design-demo

第2步 - 将Bootstrap添加到你的React应用中

有多种方法可以将bootstrap包添加到你的新react ，但我们将看看两种方法，即。

  1. 使用command terminal ，将Bootstrap作为一个依赖项安装。
  2. 使用BootstrapCDN。

将Bootstrap作为依赖关系安装

这种方法被那些熟悉command terminal 的React开发者广泛使用。你的public/index.html ，而软件包会自动安装到node-modules 。

这是通过运行来完成的。

npm install react-bootstrap

如果你是一个yarn用户。

Yarn add react-bootstrap

使用Bootstrap内容交付网络(CDN)

这个方法包括到你的public/index.html ，然后把包含bootstrapCDN的<link> 粘贴到<head> 标签上。

代码片段如下。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

之后，你的public/index.js ，看起来会是这样的。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>Design-demo</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

请注意，bootstrap v4需要jQuery ，以启用其JavaScript功能。

第3步 - 用Bootstrap创建一个样本页面

在这一点上，我们的react 应用程序已经运行了bootstrap。而且，我们将使用react-bootstrap创建一个包含导航条、表单、按钮和一些文本的主页。

为了做到这一点，我们将在我们的src 目录中创建两个文件Navbar.js 和Forms.js 。

Bootstrap导航条组件

导航条组件将显示在页面的顶部，里面有一些元素。

要使用Bootstrap创建一个导航条，应该实现下面的导入和代码块。

import React, {Component} from 'react';
import {
  Navbar,
  NavItem,
  NavDropdown,
  MenuItem,
  Nav,
  Grid,
  PageHeader
} from 'react-bootstrap';

class App extends Component {
  render() {
    return (
     <div>
      <Grid fluid>
        <Navbar inverse="inverse" collapseOnSelect="collapseOnSelect">
          <Navbar.Collapse>
            <Nav>
              <NavItem eventKey={1} href="#">
                Link
              </NavItem>
              <NavItem eventKey={2} href="#">
                Link
              </NavItem>
              <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
                <MenuItem eventKey={3.1}>Action</MenuItem>
                <MenuItem eventKey={3.2}>Another action</MenuItem>
              </NavDropdown>
            </Nav>
            <Nav pullRight="pullRight">
              <NavItem eventKey={1} href="#">
                Link Right
              </NavItem>
              <NavItem eventKey={2} href="#">
                Link Right
              </NavItem>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </Grid>
    </div>
    )}
}
export default App;

Bootstrap表单组件

我们准备继续制作页面Form 组件，它将包含以下Bootstrap元素。

  • 网格
  • 行
  • 表格-组
  • 按钮、单选和复选框。

下面的代码块是一个实现的视图。

import React, {Component} from 'react';
import {
  Panel,
  PageHeader,
  Col,
  Grid,
  Row,
  FormGroup,
  Checkbox,
  FormControl,
  Radio,
  ControlLabel,
  Button,
} from 'react-bootstrap';

class Forms extends Component {
  render() {
    const formInstance = (
      <form>
        <FieldGroup
          id="formControlsText"
          type="text"
          label="Text"
          placeholder="Enter text"
        />
        <FieldGroup
          id="formControlsEmail"
          type="email"
          label="Email address"
          placeholder="Enter email"
        />
        <FieldGroup id="formControlsPassword" label="Password" type="password" />
        <Checkbox checked readOnly>
          Checkbox
        </Checkbox>
        <FormGroup>
          <Radio name="radioGroup" inline>
            true
          </Radio>{' '}
          <Radio name="radioGroup" inline>
            false
          </Radio>{' '}

        </FormGroup>

        <FormGroup controlId="formControlsSelect">
          <ControlLabel>Select</ControlLabel>
          <FormControl componentClass="select" placeholder="select">
            <option value="select">select</option>
            <option value="other">...</option>
          </FormControl>
        </FormGroup>
        <FormGroup controlId="formControlsSelectMultiple">
          <ControlLabel>Multiple select</ControlLabel>
          <FormControl componentClass="select" multiple>
            <option value="select">select (multiple)</option>
            <option value="other">...</option>
          </FormControl>
        </FormGroup>

        <Button type="submit">Submit</Button>
      </form>
    );

    return (<div>
      <div className="_gradient-purple section-padding">
        <Grid>
          <PageHeader className="white">
            Forms <small>Inverse</small>
          </PageHeader>
          <Row className="white">
            <Col sm={12}>
              {formInstance}
            </Col>
          </Row>
        </Grid>
      </div>
      <Grid>
        <PageHeader>
          Forms
        </PageHeader>
        <Row>
          <Col sm={12}>
            {formInstance}
          </Col>
        </Row>
      </Grid>
      <div className="section-padding"></div>
    </div>);
  }
}
export default Forms;

应用组件

在app.js ，我们将导入Navbar.js 和Forms.js ，它们将显示在我们的主页面上。

下面是代码片段。

import React, { Component } from 'react';
import Navbar from '/Navbar;
import Forms from '/Forms;

class App extends Component {
  render() {
    return (
      <div className="App">
        <Navbar />
        <Forms />
      </div>
    );
  }
}
export default App;

一旦代码被正确导入，我们将启动我们的开发服务器。

要做到这一点，我们运行以下命令。

对于npm用户。

npm start

或者对于yarn用户。

Yarn start

编译成功后，一个包含以下bootstrap元素的主页将显示在你的浏览器窗口。

  • 表格
  • 按钮
  • 输入字段
  • 导航栏
  • 页眉文本

Bootstrap的设计缺陷和局限性

Bootstrap虽然流行并被广泛使用，但也有一些缺陷和局限性，例如。

  1. BootstrapIcons 包不如其他现代设计库，如Semantic-UI react。
  2. Bootstrap元素和组件是通用的，很容易识别，从而产生类似的网站。
  3. BootstrapClassName 很复杂。
  4. 与其他库相比，Bootstrap中的元素定制很困难。

第二部分：在React.js中设置Semantic-UI

在本文的第一部分中，我们讨论了在react应用中使用Bootstrap的概念。我们还研究了bootstrap的局限性和设计缺陷。

文章的第二部分将重点讨论以下内容。

  • 开始使用Semantic-UI React。
  • 用Semantic-UI元素创建一个样本网页。
  • Semantic-UI中元素的定制。
  • Semantic-UI所提供的现代功能和进步。
  • 为什么要选择Semantic-UI React。

开始使用Semantic-UI React

Semantic-UI是一个现代网页设计和造型框架。

它提供了高效和可定制的元素，例如。

  1. 头像
  2. 模板
  3. 弹出式窗口
  4. 卡片和图标，等等。

在您的React 应用程序中使用语义用户界面很简单。但是，对于绝对的初学者来说，我们将通过这些步骤来让您熟悉这一过程。

将Semantic-UI软件包安装到您的项目之中

将该软件包作为一个依赖项安装到您的React 应用程序中的最简单方法是，运行以下命令。

npm:

npm install semantic-ui-react

对于yarn用户。

Yarn add semantic-ui-react

一旦安装完成，您就应该能够在您的react 项目中使用semantic-ui-react 。

利用Semantic-UI React构建一个样本页面

我们现在可以访问该库了，我们将利用它来创建一个样本页面。

该页面将包含以下元素。

  • 导航栏
  • 头像
  • 标题文本
  • 弹出窗口
  • 按钮和输入字段
  • 卡片

为了实现这一目标，我们将创建两个文件Navbar.js 和Body.js 。之后，我们将导入上述元素并将它们添加到我们的网页中。

请确保在你的src 目录中创建这些文件。

第1步 - 创建导航条组件。

为了创建一个具有语义用户界面（semantic-UI）的导航条，我们打开我们的Navbar.js 文件，并实施下面的代码片断。

import React "react";
import {
    Icon,
    Loader,
    Menu,
    Avatar
} from "semantic-ui-react";

function Navbar() {
	<>
    <div className="header">
      <Menu className="navbar" pointing secondary size="massive" color="blue">
        <div className="navbar-left">
          Name
          <Menu.Item
            style={{ paddingLeft: "5px", color: "white" }}
            name="Username"
            as={Link}
            to="/profile"
          />
        </div>

        <Menu.Menu position="right">
          <div className="nav-input">
            <Icon name="search" />
            <input type="text" placeholder="search anything" />
          </div>
          <Menu.Item
            style={{ color: "white" }}
            name="Logout"
          />
        </Menu.Menu>
      </Menu>
    </div>
    <div className="header">
      <Menu className="navbar" pointing secondary size="massive" color="blue">
        <Menu.Item
          style={{ color: "white" }}
          name="home"
          onClick={handleItemClick}
          as={Link}
          to="/"
        />
        </Menu.Menu>
      </Menu>
    </div>
	</>
  return navBar;
}
export default Navbar;

第2步--创建Body组件。

我们将为我们的网页创建主体组件。

要做到这一点，我们打开我们的Body.js 文件，并实现下面的代码块。

import React, { useContext, useState } from "react";
import {
 Button,
 Avatar,
 Card,
 Image,
 Modal,
 Popup } from "semantic-ui-react";

Export default function PostCard() {
  return (
    <Card fluid className="post-card">
      <Card.Content style={{ padding: 0 }}>
        <div className="post-content">
          <div className="user-details">
              <Avatar src=""/>
                  <div className="form">
                    <h3>Susan Colins h3>
                <Card.Meta className="post-time">
                  {moment().fromNow(true)}
                </Card.Meta>
              </div>
          </div>
          </div>


        <Modal
          onClose={() => setOpen(false)}
          onOpen={() => setOpen(true)}
          open={open}
          size="tiny"
          trigger={
            <Image
              floated="right"
              size="large"
              src="https://images.pexels.com/photos/4300986/pexels-photo-4300986.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
            />
          }
        >
          <Modal.Content image>
            <Image size="massive" src="https://images.pexels.com/photos/4300986/pexels-photo-4300986.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" wrapped />
          </Modal.Content>
        </Modal>
      </Card.Content>
      <Card.Content extra>
        <Popup
          content="Comment"
          trigger={
            <Button
              color="teal"
              basic
              content="Comment"
              icon="comments"

            />
          }
        />
      </Card.Content>
    </Card>
  );
}

第3步 - 主页面组件

主页面将使Navbar 和Body 两个组件在网页上显示。

为了实现这一点，我们打开我们的app.js 文件，导入这两个组件，如下图所示。

import React from 'react';
import Navbar from '/Navbar;
import Body from '/Body;

Function App(){

    return (
      <div className="App">
        <Navbar />
        <Body />
      </div>
    );
}
export default App;

在Semantic-UI React中定制元素

Semantic-UI组件和元素的设计在颜色、大小、方向和布局方面都有默认值。借助于CSS 文件，您可以按照您所需要的规格来定制每个Semantic-UI元素。

下面是一个使用CSS进行元素定制的例子。

import React from "react";
import { Card, Image } from "semantic-ui-react";
import "/demo.css"

function Demo(){
  return (
    <div className='app-demo'>
      <a href="http://facebook.com">
        <Card fluid className="demo-card">
          <div className="header">
            <Card.Meta>25 Mins ago</Card.Meta>
            <h3>
              Hello World
            </h3>
          </div>
          <Image
            className="demo-img"
            src="https://images.pexels.com/photos/4300986/pexels-photo-4300986.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
            wrapped
            ui={false}
          />

          <Card.Content>
            <Card.Description>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit.
              Reprehenderit similique officia ratione? Ad, corrupti!
            </Card.Description>
          </Card.Content>
        </Card>
      </a>
    </div>
  );
}

export default Demo;

从上面的demo.js ，每个元素都被分配了一个className ，最终将在我们的demo.css 文件中被锁定和定制。

下面是自定义的例子。

.app-demo{
 margin-top: 20px
}
.demo-img {
  width: 100% !important;
  max-height: 70vh !important;
  overflow: hidden;
}
.post-card {
  margin: auto !important;
  width: 100% !important;
  background: #ecf3ff;
  height: fit-content !important;
  border-radius: 10px !important;
  padding-top: 10px !important;
}
.card {
  margin: 0 !important;
}

请注意，!important 标志是用来覆盖Semantic-UI 元素的默认值的。

Semantic-UI的现代功能

Semantic-UI软件包带有许多现代功能。

其中的一些特点包括以下内容。

  • 简化的错误处理和调试。
  • 高水平的主题化变量。
  • 高级元素，例如Accordions、Dividers、Segments、Menu等。
  • 易于使用的API。
  • 可定制的布局和方向。

为什么要选择Semantic-UI React？

每个开发人员都希望用最简单、最有效的方式来解决问题。我将分享我认为您在下一个项目中应该考虑Semantic-UI React的几个原因。

它们包括以下几点。

  • Semantic-UI设计库是轻量级的，易于使用--这意味着它不会增加您的项目的软件包大小。
  • Semantic-UI包含数百个可定制的图标--你所要做的就是将你想使用的任何一个图标导入你的项目中。
  • Semantic-UI具有很高的效率和编译率。
  • Semantic-UI易于使用和理解。
  • 许多科技公司都在使用Semantic-UI，例如Snapchat、Google Cloud Partners等。

结论

在这篇文章中，我们对Bootstrap和Semantic-UI设计库进行了比较。结论已经出来了，由您来决定哪一个最适合您的网络需求，但是我强烈推荐Semantic-UI。

avatar
文章
阅读
粉丝