正文

掌握必备技巧：轻松入门UI框架常用命令详解

/0 浏览量
0401

在数字化时代，用户界面（UI）设计的重要性不言而喻。为了提高开发效率，许多开发者选择使用UI框架来构建美观且功能丰富的用户界面。本文将详细介绍几个流行的UI框架及其常用命令，帮助初学者轻松入门。

一、什么是UI框架？

UI框架是一套预定义的UI组件和工具，可以帮助开发者快速构建用户界面。常见的UI框架有Bootstrap、Ant Design、Element UI等。

二、Bootstrap常用命令详解

Bootstrap是一个开源的HTML、CSS和JavaScript框架，用于快速开发响应式、移动设备优先的网站。

1. 基础HTML结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap实例</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>

  <h1>你好，世界！</h1>

  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

2. 常用组件

(1) 按钮

<button type="button" class="btn btn-primary">主按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功按钮</button>
<button type="button" class="btn btn-danger">危险按钮</button>
<button type="button" class="btn btn-warning">警告按钮</button>
<button type="button" class="btn btn-info">信息按钮</button>
<button type="button" class="btn btn-light">浅色按钮</button>
<button type="button" class="btn btn-dark">深色按钮</button>
<button type="button" class="btn btn-link">链接按钮</button>

(2) 表格

<table class="table">
  <thead>
    <tr>
      <th scope="col">编号</th>
      <th scope="col">姓名</th>
      <th scope="col">年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>李四</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

(3) 卡片

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="...">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">这里是卡片内容。</p>
    <a href="#" class="btn btn-primary">按钮</a>
  </div>
</div>

三、Ant Design常用命令详解

Ant Design是一个企业级的UI设计语言和React组件库，服务于企业级产品的设计。

1. 安装

npm install antd

2. 常用组件

(1) Button

import React from 'react';
import { Button } from 'antd';

function App() {
  return (
    <div>
      <Button type="primary">主按钮</Button>
      <Button>默认按钮</Button>
      <Button type="dashed">虚线按钮</Button>
      <Button type="link">链接按钮</Button>
    </div>
  );
}

export default App;

(2) Table

import React from 'react';
import { Table } from 'antd';

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
];

const data = [
  {
    key: '1',
    name: '张三',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '2',
    name: '李四',
    age: 42,
    address: '西湖区湖底公园2号',
  },
];

function App() {
  return <Table columns={columns} dataSource={data} />;
}

export default App;

四、Element UI常用命令详解

Element UI是一个基于Vue 2.0的桌面端组件库。

1. 安装

npm install element-ui

2. 常用组件

(1) Button

<template>
  <el-button type="primary">主要按钮</el-button>
  <el-button>默认按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</template>

<script>
import { Button } from 'element-ui';

export default {
  components: {
    ElButton,
  },
};
</script>

(2) Table

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-04',
        name: '张小刚',
        address: '上海市普陀区金沙江路 1517 弄',
      }, {
        date: '2016-05-01',
        name: '李小红',
        address: '上海市普陀区金沙江路 1519 弄',
      }, {
        date: '2016-05-03',
        name: '周小伟',
        address: '上海市普陀区金沙江路 1516 弄',
      }],
    };
  },
};
</script>

五、总结

掌握UI框架的常用命令对于快速开发高质量的界面至关重要。本文介绍了Bootstrap、Ant Design和Element UI三个常用框架的常用命令，希望对初学者有所帮助。在实际开发过程中，不断积累和总结，相信你会越来越熟练地使用这些框架。

-- 展开阅读全文 --