authors are vetted experts 在ir fields 和 write on topics in which they have demonstrated experience. All of our content is peer reviewed 和 validated by Toptal experts 在 same field.< / div >< / div >
Matej is a full-stack developer with expertise across a variety of back-end 和 web technologies, 包括反应, 反应本地, 引导, 和Django. 他专门从事高级web应用程序,并建立了一个全球性的, 使用反应和反应本地的双语旅游应用程序.
< / div >< / div >以前在
现在大部分的网络流量来自 从移动设备,而不是桌面电脑. 像这样, 现代web应用程序必须随时适应各种分辨率, 高宽比, 和设备. 反应-引导库借鉴了两个流行的框架(反应 和 引导) to facilitate the creation of effective, efficient, 和 responsive web applications.
This article discusses the building blocks 和 benefits of using a 反应-引导 layout 和 explores detailed examples in a sample application, 为您的下一个web项目提供改进的开发体验.
引导, 基于CSS和JavaScript, is a CSS framework that enables responsive web design using a grid layout of rows 和 columns. 让我们来看看反应-引导在CSS框架和 香草引导 确定它可能最适合的项目.
在建立网站时, CSS描述了页面上的视觉元素, 改变网站的CSS可以提供急需的改头换面. 在现代网页样式中, 然而, 只有CSS是不够的——响应式网页设计是必须的, 框架使得 CSS开发人员生活更轻松.
Responsive web design allows applications to modify layouts 和 elements based on a variety of devices 和 window or screen sizes. CSS框架提供了额外的好处,比如加速开发, 减少代码重复, 改进了代码库的可维护性.
有许多框架可以简化CSS的编写; 顺风CSS 和 基金会 有两个流行的选择. 然而, 引导 is a st和ard choice for responsive CSS due to benefits like:
Let’s exa最小值e the trade-offs when deciding between 反应-引导 和 香草引导.
有这么多开箱即用的优点, 为什么我们不想在反应应用程序中使用普通的引导呢? 答案在于反应的构建方式.
反应 doesn’t recommend that developers modify the DOM directly; instead, it primarily employs 虚拟DOM,或VDOM,以跟踪对DOM的所有更改. 反应 can miss changes outside the VDOM, leading to bugs, errors, 和 unexpected behaviors.
引导的过去版本严重依赖于jQuery, which directly changes the DOM 和 can therefore produce these undesirable outcomes. 进入反应-引导, the library that provides access to every 引导 component 和 depends on pure JavaScript instead of jQuery, 只修改VDOM.
除了防止与DOM相关的不良行为之外, 反应-引导还提供了清晰易读的语法. Let’s create the same example card using 引导 和 反应-引导 to compare:
我们的引导卡的代码包含许多 div
标签,使每个组件难以识别;
On the other h和, our 反应-引导 example card’s code clearly labels each component:
<卡>
<卡.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, which meant that developers could not upgrade their 反应-引导 projects with new 引导 releases. 反应-引导 v2 解决了这个问题.
如果你正在考虑将你的项目从反应迁移到其他框架, 比如Vue, 引导提供了最好的灵活性. 您可以重用大多数普通引导代码, 但是反应-引导用户将不得不转换他们的代码. 引导和反应-引导各有优缺点, 您决定使用哪一个取决于您的具体需求. 在我们的例子中,我们优先考虑的是可读性而不是迁移的灵活性.
检查一个功能性的反应-引导实现, 让我们创建一个带有导航条的标准网站UI, 一个页脚, 一个响应式网格.
首先,让我们创建 新的反应应用程序 在终端:
react-bootstrap-example——template typescript
下一个, install both 反应-引导 和 引导 (installing 引导 is necessary because it contains all the styles for 反应-引导 components):
NPM install bootstrap react-bootstrap
如果你不打算覆盖引导的默认样式, 此时有必要导入引导的样式表, 引导/ dist / css /引导.最小值.css
,在… src /应用程序.tsx
文件. (我们将覆盖默认的引导样式来使用自定义样式, 所以我们不需要执行这一步.)
通常,有两种方式导入反应-引导组件. The first way imports the 反应-引导容器 separately from the button::
import Button from 'react-bootstrap/Button';
从“react-bootstrap/容器”中导入容器;
然而, I prefer using destructured imports because they condense 和 simplify the code for multiple components:
从react-bootstrap中导入{Button, 容器};
最后,我们用下面的语法渲染一个反应-引导组件:
Default 引导 styles (such as colors) can be overridden with custom styling for a more unique web design. 让我们重写引导的 13种文字颜色 用我们自己的. 首先,我们安装 萨斯:
NPM安装sass
接下来,重命名 应用程序.css
文件 应用程序.scss
,以表明它是一个萨斯文件,并且 进口的./应用程序.scss ';
在 应用程序.tsx
文件. 在我们的 应用程序.scss
文件, we override the primary 和 secondary colors before importing the 萨斯 引导 stylesheet:
$主要:# 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
. We make the section blue 和 our overall background gray to make the layout easier to view:
Example
没有一个 反应-引导容器,我们的内容是无填充和无响应的:
让我们用反应-引导尝试相同的代码 容器
而不是通用的 div
我们必须进口 容器
使用前):
<容器 className="bg-primary">
Example
容器>
现在,我们的内容显示了填充:
更改浏览器窗口的宽度以查看响应式设计的实际效果.
要添加到示例站点的第一个组件是 导航条. Creating a separate 反应 component for the 导航条 (as opposed to writing it alongside other code) makes it easier to find components 和 make changes.
创建一个 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的宽度折叠).对于更高级的导航栏,我们将添加一个可切换的汉堡菜单(导航条.切换
)显示“主页”、“链接”和“下拉”部分. 导航条.切换
在桌面模式下不可见. 然而, when viewing the website on smaller screens, it condenses horizontal sections, wrapped by 导航条.崩溃
,变成了一个适合移动设备的汉堡菜单.
<导航条 bg="primary" collapseOnSelect 扩大="sm">
<容器>
<导航条.品牌 href="/">Example Site导航条.品牌>
<导航条.切换 aria-controls="导航条-toggle" />
<导航条.崩溃 id="导航条-toggle">
导航条.崩溃>
容器>
导航条>
导航条.切换
和 导航条.崩溃
are powerful tools that help developers create responsive navigation bars with few lines of code.
最后,我们 导入Responsive导航条./组件/ Responsive导航条”;
并将其包含在main中 应用程序
:
您可以在任何时候通过运行测试应用程序 npm开始
以查看每个组件添加后的更新.
我们的导航栏已经完成,所以让我们在网站的页脚工作. 与 Responsive导航条
,我们需要申报 Footer
并将其导出为新的 Footer.tsx
文件. 我们使用文本、链接和控件创建一个基本页脚 容器
:
的类 p-3
和 mt-5
represent padding 和 margin-top, 和 their values can range between zero 和 five (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
要控制多少次 项
组件呈现. 列自动调整大小,并响应所有屏幕尺寸. 尝试调整浏览器窗口的大小进行测试 最后的结果.
反应-引导’s clean syntax 和 straightforward components make responsive design simple to implement on any project. The ability to work with 引导 和 反应-引导 is a must for front-end developers. With these tools in your skill set, you’re ready for easier web application design 和 prototyping.
Toptal工程博客的编辑团队向 说Kholov for reviewing the code samples 和 other technical content presented in this article.
< / div >< / div >< / div >< / div >Yes, you can use 反应 with vanilla (JavaScript) 引导 or with the 反应-引导 library.
< / div >< / div >不,使用反应时不需要安装引导. 然而, 引导 is a highly popular framework for developing responsive web applications.
< / div >< / div >反应 components are functions or classes representing an individual part of an app’s UI to be rendered on the screen.
< / 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 >< / div >Matej is a full-stack developer with expertise across a variety of back-end 和 web technologies, 包括反应, 反应本地, 引导, 和Django. 他专门从事高级web应用程序,并建立了一个全球性的, 使用反应和反应本地的双语旅游应用程序.
< / div >< / div >