开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 前端学习笔记——Bootstrap于react -> 正文阅读

[JavaScript知识库]前端学习笔记——Bootstrap于react

一、bootstrap简介与安装

简介

官网：https://getbootstrap.com/

bootstrap 的 github 地址：https://github.com/twbs/bootstrap

bootstrap 是一个用于制作页面界面的框架

框架: 提供一个标准和规范，再由开发人员自行填充内容

安装

点击页面中的 download 按钮：https://getbootstrap.com/docs/5.0/getting-started/download/

或者在 github 中下载 bootstrap 源代码，源代码中的 dist 文件夹就是我们要用的文件

npm 安装

npm i bootstrap

二、布局

响应式布局

响应式布局就是根据屏幕宽度，切换不同页面布局的一种布局方式，这里可以查看 bootstrap 官网在不同屏幕宽度下的表现

bootstrap 是使用断点来完成响应式布局的

断点

断点是 bootstrap 面向不同屏幕宽度，预制好的媒体查询

通常的讲，断点，代表的就是不同的屏幕宽度

bootstrap 中如何体现断点，在class中，添加不同断点的名称，可以采用不同断点的样式

布局容器

通常是页面的根节点，使用 class="container" 来设置布局容器

布局容器受断点影响，可以设置不同断点上的容器，具体可查表：

https://getbootstrap.com/docs/5.0/layout/containers/

网格布局

将内容进行行列分布的布局方式就叫网格布局

bootstrap中网格布局的灵魂样式就是行：row，列：col

三、其他组件和工具类

除了布局和表单元素等基础功能外，bootstrap 还提供了一系列的开箱即用的功能

例如组件（Component）和工具类（Utilities 和 Helper），这些东西需要开发者在需要时，按需引入

https://getbootstrap.com/docs/5.1/components/accordion/

其中，部分组件包含动画，若要使用带动画的组件，请引入 bootstrap.js 文件，并参考文档中的 via JavaScript 部分进行函数调用

四、react 简介

中文官网：https://zh-hans.reactjs.org/

react 是一个 js核心库，如同 jquery 一样，具有大量 react 生态(围绕 react 核心开发的库)

特点：

声明式
- 也就是js中的数据决定页面最终渲染的结果
- 声明式不是响应式，但往往都是同时出现共同作用页面
  - 响应式：数据变化页面会立即更新
组件化
- 一个包含所有外观和行为的，独立可运行的模块，称为组件
- 组件化的思想可以将复杂页面，化繁为简的进行设计
- 组件可提高代码复用性
一次学习，跨平台编写
- 使用 react 可以开发桌面web页面，移动端页面，移动app，桌面app等

五、环境搭建

使用cdn在html引入react

react可以在现用的html页面中直接使用，通过cdn引入以下几个库：

<!-- react 需要引入 react 核心库 和 react-dom 库 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<!-- 为了更方便书写 react 通常会使用 jsx 语法，为了支持该语法 需要引入 babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

然后可以在 body 中加入如下代码：

<body>
    <div id="root"></div>

    <!-- 采用 jsx 语法 需要在 type 处加上 text/babel -->
    <script type="text/babel">

        ReactDOM.render(
            <h1>Hello World</h1>,
            document.getElementById('root')
        );

    </script>
</body>

这里需要介绍几个概念：

react.js 这是框架核心库，用于解析 react 语法
react-dom.js 这个库是用于 react 元素(也就是react的文档对象模型)的创建
babel.js 这个库用来将 jsx 语法翻译为普通的 js

注意：此处为了学习 react 的语法引入了 jsx，在真实项目中不会在页面上直接使用 babel

使用create-react-app创建react应用

这种方法需要安装 node.js

首先安装 create-react-app 命令行工具

官网：https://zh-hans.reactjs.org/docs/create-a-new-react-app.html#create-react-app

github: https://github.com/facebook/create-react-app

create-react-app文档：https://create-react-app.dev/

执行以下命令安装 create-react-app 工具

npm install -g create-react-app

然后在任一目录下执行以下命令创建react应用：

npm init react-app <project-name>
# 或
create-react-app <project-name>
# 其中 <project-name> 是应用的名称

进入到项目目录下并运行 npm run start 启动项目

创建一个使用typescript书写的react项目

https://create-react-app.dev/docs/adding-typescript

六、jsx 语法

jsx 语法保留了js的所有特性，在此基础上扩展了 react 的元素声明语法，例如：

// 声明一个 react-dom
const element = <h1>Hello World</h1>

若 react-dom 标签有多行，可以用圆括号包裹

const element = (
    <h1>
        Hello World
    </h1>
)

每一给 react-dom 只能有一个根节点

const element = (
    <h1>
        Hello World
    </h1>
    // h1 和 h2 都是根节点 这个写法是错误的
    <h2>
        222
    </h2>
)

插值

将变量插入到元素中，使用大括号 {}

const msg = 'hello world !!!'

const element = <h1>{msg}</h1>

花括号内的插值部分可以写入任何有效的 js 表达式

插入html属性

直接使用引号或花括号插入表达式，如：

const styleObj = {backgroundColor: "green"}

// 需要注意的是 style 属性必须用花括号来插入值
// 不是所有的html属性名都是原始名称，例如 class 应该写为 className 并采用驼峰式命名方法 而不是html的短横线 因为本质上这里的标签是js代码
const element = (
    <h1
        style={styleObj}
        className="content"> 
        Hello World
    </h1>
)

使用函数创建对象

// 可以使用函数创建 react-dom 对象
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

// 等价于
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);