Index
一、bootstrap简介与安装
简介
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>
);
注意:jsx 中的 react-dom 内容,本质上会被 babel 翻译成 React.createElement 函数