React-Bootstrap中的卡片

时间:2017-04-02 16:38:36

标签: reactjs react-bootstrap

卡片是否已添加到React-Bootstrap了?

或者是否有任何其他未记录的添加方式?

我现在想的是 - > className = 'bootstrap card class syntax',但我想,它不会起作用,因为它无法识别它。

2 个答案:

答案 0 :(得分:3)

排序找到答案,但不是card

的名称

您可以使用<Thumbnail>,它可以提供与卡片相同的感觉。

答案 1 :(得分:1)

即使不使用react-bootstrap,也可以像在任何 -react项目中一样使用Bootstrap类进行反应。它可以作为CDN导入到index.html文件中...

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

...或者它也可以在本地保存并以这种方式导入。或者,您可以配置webpack以将css文件直接导入到项目中。

您必须确保使用className=代替class=,否则,它的工作方式完全相同。

<div className="col-xs-12 well"></div>

react-bootstrap是一个附加组件,提供执行相同操作的组件。所以,即使它还没有在react-bootstrap中,你仍然可以使用这个功能,但就像直接的css类一样。