gpt4 book ai didi

typescript - 如何在我的 Typescript 和 React 应用程序中使用 @types/bootstrap

转载 作者:行者123 更新时间:2023-12-04 01:36:09 28 4
gpt4 key购买 nike

我有一个用 webpack、typescript 和 react 编写的应用程序。我向它添加了 Bootstrap

yarn add bootstrap @types/bootstrap jquery popper

然后我写了一个类似的组件

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import * as Bootstrap from 'bootstrap'

class Main extends React.Component {
render() {
return (
<div className="container">
<h1 className="page-header">Hello</h1>
<p className="text-right">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p className="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
)
}
}
ReactDOM.render(
<Main />,
document.getElementById("root")
)

但它似乎并没有从 Bootstrap 中获取任何样式。

我用谷歌搜索了一下,那里有很多引导教程。但我找不到一个向我展示如何在使用 @types/bootstrap

的 typescript 应用程序中使用 bootstrap 的工具

最佳答案

经过几天的尝试,我能够解决这个问题。

这是在 React 组件中使用 bootstrap 的方式

将 Bootstrap 添加到 typescript 项目

 yarn add bootstrap @types/bootstrap react-bootstrap @types/react-bootstrap -D

现在将 Bootstrap 控件添加到您的 tsx 文件中

 import {Grid, Row, Col, Button} from 'react-bootstrap'

由于 npm 中未包含 css 文件,因此您需要手动链接 css。我在 <HEAD> 中做了这个我的 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">

就是这样。

如果您正在寻找一个使用 typescript、react、bootstrap 和 webpack 的示例项目,那么这里有一个示例

https://github.com/abhsrivastava/ts-react-bootstrap

关于typescript - 如何在我的 Typescript 和 React 应用程序中使用 @types/bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49703425/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com