gpt4 book ai didi

reactjs - bootstrap 在 ReactJS 代码中不起作用

转载 作者:行者123 更新时间:2023-12-05 08:41:55 24 4
gpt4 key购买 nike

我想使用 Bootstrap 在 ReactJS 中创建一个表。我写了下面的代码并使用了 class="container"<div>class="table table-striped"<table>但 Bootstrap 在此代码中不起作用。请告诉可能是什么问题?

app.js

render : function() {
return (
<div class="container">
<table class="table table-striped">
<tbody>
{this.state.rows.map((r) => (
<tr>
<td>{r}</td>
<td>
<button onClick={() => this.deleteRow(r)}>Delete</button>
</td>
</tr>
))}
</tbody>
</table>
<input trype="text" id={"newVal"} onChange={this.updateNewValue}></input>
<button id="addBtn" onClick={this.addRow}>ADD</button>
</div>
);
},

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample Project</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css" type="text/css" rel="stylesheet" />

<script src="app.js" type="text/babel"></script>
</head>
<body>
<div id="display"></div>
</body>
</html>

最佳答案

在 src/index.js 文件的开头导入 Bootstrap CSS 和可选的 Bootstrap 主题 CSS:

import 'bootstrap/dist/css/bootstrap.css';

关于reactjs - bootstrap 在 ReactJS 代码中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46292616/

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