作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.< / div >< / div >
Matej是一个精通各种后端和web技术的全栈开发人员, 包括反应, 反应本地, 引导, 和Django. 他专门从事高级web应用程序,并建立了一个全球性的, 使用反应和反应本地的双语旅游应用程序.
< / div >< / div >< / div >现在大部分的网络流量来自 从移动设备,而不是桌面电脑. 像这样, 现代web应用程序必须随时适应各种分辨率, 高宽比, 和设备. 反应-引导库借鉴了两个流行的框架(反应 和 引导),以协助建立有效率、有效率和反应迅速的网页应用程式.
本文讨论了构建块和使用反应-引导布局的好处,并在示例应用程序中探索了详细的示例, 为您的下一个web项目提供改进的开发体验.
引导, 基于CSS和JavaScript, 是一个CSS框架,使响应式网页设计使用行和列的网格布局. 让我们来看看反应-引导在CSS框架和 香草引导 确定它可能最适合的项目.
在建立网站时, CSS描述了页面上的视觉元素, 改变网站的CSS可以提供急需的改头换面. 在现代网页样式中, 然而, 只有CSS是不够的——响应式网页设计是必须的, 框架使得 CSS开发人员生活更轻松.
响应式网页设计允许应用程序根据各种设备和窗口或屏幕尺寸修改布局和元素. CSS框架提供了额外的好处,比如加速开发, 减少代码重复, 改进了代码库的可维护性.
有许多框架可以简化CSS的编写; 顺风CSS 和 基金会 有两个流行的选择. 然而,引导是响应式CSS的标准选择,因为它有以下优点:
让我们在决定反应-引导和香草引导之间进行权衡.
有这么多开箱即用的优点, 为什么我们不想在反应应用程序中使用普通的引导呢? 答案在于反应的构建方式.
反应 doesn’t recommend that developers modify the DOM directly; instead, it primarily employs 虚拟DOM,或VDOM,以跟踪对DOM的所有更改. 反应可能会错过VDOM之外的更改,从而导致bug、错误和意外行为.
引导的过去版本严重依赖于jQuery, 它直接更改DOM,从而可能产生这些不希望的结果. 进入反应-引导, 这个库提供了对每个引导组件的访问,它依赖于纯JavaScript而不是jQuery, 只修改VDOM.
除了防止与DOM相关的不良行为之外, 反应-引导还提供了清晰易读的语法. 让我们使用引导和反应-引导创建相同的示例卡来比较:
我们的引导卡的代码包含许多 div
标签,使每个组件难以识别;
另一方面,我们的反应-引导示例卡的代码清楚地标记了每个组件:
<卡>
<卡.Img variant="top" src="http://upload ..维基.org/wikipedia/commons/a/a7/反应-icon.svg" />
<卡.Body>
<卡.Title>Example 卡卡.Title>
<卡.Text>This is an example 反应 card卡.Text>
卡.Body>
卡>
这两个优点是否使反应-引导在各个方面都优于引导? No. 从版本5开始,引导不再使用jQuery,可以与反应一起使用. 和, 直到最近, 反应-引导不支持引导 5, 这意味着开发人员不能用新的引导版本升级他们的反应-引导项目. 反应-引导 v2 解决了这个问题.
如果你正在考虑将你的项目从反应迁移到其他框架, 比如Vue, 引导提供了最好的灵活性. 您可以重用大多数普通引导代码, 但是反应-引导用户将不得不转换他们的代码. 引导和反应-引导各有优缺点, 您决定使用哪一个取决于您的具体需求. 在我们的例子中,我们优先考虑的是可读性而不是迁移的灵活性.
检查一个功能性的反应-引导实现, 让我们创建一个带有导航条的标准网站UI, 一个页脚, 一个响应式网格.
首先,让我们创建 新的反应应用程序 在终端:
react-bootstrap-example——template typescript
下一个, 同时安装反应-引导和引导(安装引导是必要的,因为它包含了反应-引导组件的所有样式):
NPM install bootstrap react-bootstrap
如果你不打算覆盖引导的默认样式, 此时有必要导入引导的样式表, 引导/ dist / css /引导.最小值.css
,在… src /应用程序.tsx
文件. (我们将覆盖默认的引导样式来使用自定义样式, 所以我们不需要执行这一步.)
通常,有两种方式导入反应-引导组件. 第一种方法是从按钮中单独导入反应-引导容器:
import Button from 'react-bootstrap/Button';
从“react-bootstrap/容器”中导入容器;
然而, 我更喜欢使用解构导入,因为它们压缩和简化了多个组件的代码:
从react-bootstrap中导入{Button, 容器};
最后,我们用下面的语法渲染一个反应-引导组件:
默认的引导样式(如颜色)可以被自定义样式覆盖,以获得更独特的网页设计. 让我们重写引导的 13种文字颜色 用我们自己的. 首先,我们安装 萨斯:
NPM安装sass
接下来,重命名 应用程序.css
文件 应用程序.scss
,以表明它是一个萨斯文件,并且 进口的./应用程序.scss ';
在 应用程序.tsx
文件. 在我们的 应用程序.scss
在导入萨斯 引导样式表之前,我们覆盖了主色调和副色调:
$主要:# 204 ecf;
二次美元:# 262 d3d;
@ import ~引导/ scss /引导的;
在导入引导样式表之前,一定要确保覆盖样式. 否则,将不会应用自定义样式.
容器是最基本的, foundational 反应-引导 component; they are a building block 在 implementation of more complex components such as grids. 容器可选择居中或水平填充其中的内容.
添加导航条之前, footer, 和网格系统到我们的网站, 让我们看看容器是如何影响其内容物的. 我们创建一个简单的文本(p
)内的泛型节(div
)暂时在 src /应用程序.tsx
. 我们将部分设置为蓝色,将整个背景设置为灰色,以使布局更易于查看:
Example
没有一个 反应-引导容器,我们的内容是无填充和无响应的:
让我们用反应-引导尝试相同的代码 容器
而不是通用的 div
我们必须进口 容器
使用前):
<容器 className="bg-primary">
Example
容器>
现在,我们的内容显示了填充:
更改浏览器窗口的宽度以查看响应式设计的实际效果.
要添加到示例站点的第一个组件是 导航条. 为导航栏创建一个单独的反应组件(而不是与其他代码一起编写)可以更容易地找到组件并进行更改.
创建一个 src /组件
文件夹并添加文件 Responsive导航条.tsx
. 我们导入 导航条
以及其他必要的组件. 然后,我们添加一个基本的导航条,包装在响应 容器
组件,它显示我们的网站徽标或标题(导航条.品牌
):
import { 导航条, NavDropdown, Nav, 容器 } from 'react-bootstrap';
const Responsive导航条 = () => {
return (
<导航条 bg="primary" collapseOnSelect 扩大="sm">
<容器>
<导航条.品牌 href="/">Example Site导航条.品牌>
容器>
导航条>
);
};
export default Responsive导航条;
我们将三个参数传递给导航栏:
bg
影响导航条的颜色.collapseOnSelect
导致导航栏在用户选择项目时自动折叠.扩大
确定导航条何时折叠(sm
这意味着它将以768px的宽度折叠).对于更高级的导航栏,我们将添加一个可切换的汉堡菜单(导航条.切换
)显示“主页”、“链接”和“下拉”部分. 导航条.切换
在桌面模式下不可见. 然而,当在较小的屏幕上浏览网站时,它会压缩水平部分,由 导航条.崩溃
,变成了一个适合移动设备的汉堡菜单.
<导航条 bg="primary" collapseOnSelect 扩大="sm">
<容器>
<导航条.品牌 href="/">Example Site导航条.品牌>
<导航条.切换 aria-controls="导航条-toggle" />
<导航条.崩溃 id="导航条-toggle">
导航条.崩溃>
容器>
导航条>
导航条.切换
和 导航条.崩溃
是否有强大的工具可以帮助开发人员用几行代码创建响应式导航栏.
最后,我们 导入Responsive导航条./组件/ Responsive导航条”;
并将其包含在main中 应用程序
:
您可以在任何时候通过运行测试应用程序 npm开始
以查看每个组件添加后的更新.
我们的导航栏已经完成,所以让我们在网站的页脚工作. 与 Responsive导航条
,我们需要申报 Footer
并将其导出为新的 Footer.tsx
文件. 我们使用文本、链接和控件创建一个基本页脚 容器
:
的类 p-3
和 mt-5
表示padding和margin-top,它们的值可以在0到5 (e)之间.g., p-5
和 mt-1
也是选项)还是被设置为 汽车
. 补充一点也很重要 mt-汽车
,因为它会将页脚推到页面底部,一旦我们添加 Footer
对我们的 应用程序
在下一步中.
接下来,为了以正确的间距并排显示社交链接,我们添加一个 行
组件和嵌套中的每个链接 Col
(列)组件(我们还必须添加 行
和 Col
到我们的反应-引导导入):
我们的最后一步是将页脚放置在页面的底部 应用程序
:
在这里,我们还设置了网页的最小高度为 100vh
; this is the full height of the screen (100% of the viewport height) 和 ensures the footer appears at the true bottom of the screen instead of appearing directly below other content.
我们的导航栏和页脚到位,我们完成了网站添加 网格系统 转到页面. 我们的网格将包含 卡
组件,我们在新的 项.tsx
文件:
<卡 style={{ 最小值Width: '18rem', margin: '20px' }}>
<卡.Img variant="top" src="..." />
<卡.Body>
<卡.Title>Example 卡卡.Title>
<卡.Text>This is an example 反应 card卡.Text>
卡.Body>
卡>
现在我们可以回到 应用程序.tsx
并在导航栏和页脚之间添加行和列的动态网格. 我们必须把我们的网格系统包裹起来 容器
:
<容器 className="mt-5">
<行>
{数组.从(数组(numberOf项s).键()).map(number => (
<项 />
))}
行>
容器>
我们可以选择一个常数 numberOf项s
要控制多少次 项
组件呈现. 列自动调整大小,并响应所有屏幕尺寸. 尝试调整浏览器窗口的大小进行测试 最后的结果.
反应-引导简洁的语法和直接的组件使得响应式设计在任何项目中都很容易实现. 能够使用引导和反应-引导对前端开发人员来说是必须的. 有了这些工具,你就可以更轻松地进行web应用程序设计和原型制作了.
Toptal工程博客的编辑团队向 说Kholov 查看本文中提供的代码示例和其他技术内容.
< / div >< / div >< / div >是的,你可以使用反应与香草(JavaScript) 引导或与反应-引导库.
< / div >< / div >不,使用反应时不需要安装引导. 然而,引导是一个非常流行的框架,用于开发响应式web应用程序.
< / div >< / div >反应组件是一些函数或类,它们代表应用UI中要呈现在屏幕上的单个部分.
< / div >< / div >There are many different types of 反应 components; in this article, 我们将讨论那些特定于反应-引导的特性. 容器是最基本的 type of component; they contain, pad, 和 center other components. 反应-引导还支持导航条、页脚、卡片和网格系统.
< / div >< / div >反应 components simplify 和 expedite the process of building an application’s UI when paired with 反应-引导; they are reusable 和 make code more readable.
< / div >< / div >< / div >< / div >位于 Bošnjaci,克罗地亚
成员自 2021年11月4日
< / div >< / div >Matej是一个精通各种后端和web技术的全栈开发人员, 包括反应, 反应本地, 引导, 和Django. 他专门从事高级web应用程序,并建立了一个全球性的, 使用反应和反应本地的双语旅游应用程序.
< / div >< / div >< / div >