React-Bootstrap UI 框架中详情页用到的组件

2021-05-24 0 By admin

在开发网站的详情页时,使用 React-Bootstrap UI框架的某些组件能够提高我们的开发效率。可用的组件有卡片(Cards)、图片(Images)、进度条(Progress bars)和加载中(Spinners)。

一、Cards 卡片

Bootstrap的卡Card(组件)提供了具有多种变体和选项灵活且可扩展的内容容器。

1.1、内容类型

Card 组件中的内容类型有Body、Title、Subtitle、Text、Links、List Group、kitchen Sink(厨房水槽)、Header(页眉)和Footer(页脚)。

1.2、Images 图片

Card 卡包括用于处理一些图像的选项。您可以选择在卡片的任一端添加“image caps”,将图像与卡片内容叠加在一起,或仅将图像嵌入卡片中。

1.2.1、Images caps 图片帽子

与页眉和页脚相似,卡片可以包含顶部和底部的“image caps”,即图像顶部或底部的图像。

1.2.2、Image Overlays 图像叠加

将图像变成卡片背景并覆盖卡片的文本。根据图像,您可能需要也可能不需要其他样式或实用程序。

1.3、Navigation 导航

使用React Bootstrap的Nav组件在卡的标题(或块)中添加一些导航 。

1.4、Card Styles 卡样式

可以通过 bg 和 text 属性来更改card的外观。
可以通过 border 属性,设置 Card 的边框样式。

1.5、Card Layout 卡片布局

Card 卡片与卡片间不设置空隙,请使用 CardGroup;设置空隙,请使用 CardDeck。如果要分多列的话,请使用 CardColumns。

1.6、API 接口

  1. Card
  2. Card.Body
  3. Card.Img
  4. Card.ImgOverlay
  5. CardDeck
  6. CardGroup
  7. CardColumns

二、图像 Images

可以通过 Image 组件来设置页面中的图片,此组件提供了形状修改、在父元素中缩放等功能。

2.1、Shape 形状

使用rounded,roundedCircle和thumbnail 属性自定义图像形状。

2.2、Fluid 动态流动

使用fluid 属性可以将图像很好地缩放到父元素中。

2.3、API 接口

  1. Image

三、Progress bars 进度条

通过简单而灵活的进度条提供有关工作流程或操作进度的最新反馈。

3.1、Contextual alternatives带标签

添加 label 标签以显示可见的百分比。对于较低的百分比,请考虑添加最小宽度以确保标签的文本完全可见。

3.2、Screenreader only label 隐藏标签

添加srOnly 属性以可视地隐藏标签。

3.3、Contextual alternatives 上下文替代

进度栏使用某些相同的按钮和警报类来获得一致的样式。

3.4、Striped 有条纹的

使用渐变创建条纹效果。在IE8中不可用。

3.5、Animated 动画的

添加animated 属性以从右到左为条纹设置动画。在IE9及以下版本中不可用。

3.6、Stacked 堆叠式

嵌套 ProgressBar 以堆叠它们。一个进度条使用多种颜色分段。

3.7、API 接口

  1. ProgressBar

四、Spinners 加载中

”加载中“(Spinners)可用于显示项目中的加载状态。

4.1、Animations 动画制作

Bootstrap为”加载中”提供了两种动画样式。可以使用 animation属性配置动画样式。创建”加载中”时,必须始终提供动画样式。

  1. 边框微调器- border
  2. 成长微调器- grow

4.2、Variants 变体(多种样式)

通过设置该variant属性,所有标准视觉变量都可用于两种动画样式。另外,“加载中”可以使用style属性或自定义CSS类自定义大小。

4.3、Sizing 尺寸

除了标准尺寸外,还可以通过将该size属性调整尺寸。

4.4、Buttons 按钮

像原始的Bootstrap “加载中”一样,它们也可以与按钮一起使用。要立即使用此组件,建议您在按钮内部使用“加载中”时,通过配置as属性来将元素类型更改为span。

4.5、Accessibility 辅助功能

为确保“加载中”组件的最大可访问性,建议您提供一个相关的ARIA role属性,并使用Bootstrap的sr-only 类在组件内部包括仅“加载中”的可读文本可读形式,以表示“加载中”的含义。