更改浏览器窗口的宽度以查看响应式设计的实际效果.

导航栏

要添加到示例站点的第一个组件是 导航条. 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 文件. 我们使用文本、链接和控件创建一个基本页脚 容器:

  <容器 className="p-3">
    
Thank you for visiting this website
    
Follow us on social media:
    Instagram
    脸谱网
    Twitter
  

的类 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 到我们的反应-引导导入):

  <容器 className="p-3">
    
Thank you for visiting this website
    
Follow us on social media:
    <行>
      
        Instagram
      
      
        脸谱网
      
      
        Twitter
      
    
  

我们的最后一步是将页脚放置在页面的底部 应用程序:

在这里，我们还设置了网页的最小高度为 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 卡
    <卡.Text>This is an example 反应 card
    Example Button
  

现在我们可以回到 应用程序.tsx 并在导航栏和页脚之间添加行和列的动态网格. 我们必须把我们的网格系统包裹起来 容器:

<容器 className="mt-5">
  <行>
    {数组.从(数组(numberOf项s).键()).map(number => (
      
        <项 />
      
    ))}
  

我们可以选择一个常数 numberOf项s 要控制多少次 项 组件呈现. 列自动调整大小，并响应所有屏幕尺寸. 尝试调整浏览器窗口的大小进行测试 最后的结果.

< / div >

响应式Web开发变得容易

反应-引导’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 >

关于总博客的进一步阅读:

• 反应路由器教程:像专业人士一样重定向

< / 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 >

标签

• 引导
• 反应
• CSS
• ResponsiveWeb

< / div >< / div >< / div >< / div >

聘请Toptal这方面的专家.< / div >现在雇佣< / div >< / div >

< / div >

< / 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 >

---

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 >

专业知识

引导CSS反应.js< / div >< / div >

以前在

< / div >< / div >

雇佣梅< / div >< / div >< / div >

< / div >< / div >

< / div >