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

导航栏

要添加到示例站点的第一个组件是 导航条. 为导航栏创建一个单独的反应组件(而不是与其他代码一起编写)可以更容易地找到组件并进行更改.

创建一个 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 文件. 我们使用文本、链接和控件创建一个基本页脚 容器:

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

的类 p-3 和 mt-5 表示padding和margin-top，它们的值可以在0到5 (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开发变得容易

反应-引导简洁的语法和直接的组件使得响应式设计在任何项目中都很容易实现. 能够使用引导和反应-引导对前端开发人员来说是必须的. 有了这些工具，你就可以更轻松地进行web应用程序设计和原型制作了.

Toptal工程博客的编辑团队向 说Kholov 查看本文中提供的代码示例和其他技术内容.

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

标签

• 引导
• 反应
• CSS
• ResponsiveWeb

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

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

< / div >

< / div >

梅箱内ć

验证专家 在工程< / div >< / div >< / div >

Bošnjaci,克罗地亚

自2021年11月4日成为会员

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

作者简介

Matej是一个精通各种后端和web技术的全栈开发人员, 包括反应, 反应本地, 引导, 和Django. 他专门从事高级web应用程序，并建立了一个全球性的, 使用反应和反应本地的双语旅游应用程序.

< / div >阅读更多< / div >

---

作者都是各自领域经过审查的专家，并撰写他们有经验的主题. 我们所有的内容都经过同行评审，并由同一领域的Toptal专家验证.< / div >

专业知识

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

以前在

< / div >< / div >

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

< / div >< / div >

< / div >