Meh*_*ali 113 twitter-bootstrap reactjs webpack
我是反应的新手,我想在我的反应应用程序中包含bootstrap
我已经安装了bootstrap npm install bootstrap --save
现在,想在我的反应应用程序中加载bootstrap css和js.
我正在使用webpack.
webpack.config.js
var config = {
entry: './src/index',
output: {
path: './',
filename: 'index.js'
},
devServer: {
inline: true,
port: 8080,
historyApiFallback: true,
contentBase:'./src'
},
module: {
loaders: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
};
module.exports = config;
我的问题是"如何在node_modules的reactjs app中包含bootstrap css和js？" 如何设置bootstrap以包含在我的反应应用程序中？
Pra*_*M P 200
如果您不熟悉React并使用create-react-app cli setup.然后运行以下NPM命令以包含最新版本的bootstrap.
npm install --save bootstrap
要么
npm install --save bootstrap@4.0.0-alpha.6
然后将以下import语句添加到index.js文件中
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
要么
import 'bootstrap/dist/css/bootstrap.min.css';
不要忘记使用className作为属性(react使用className作为属性而不是类)
bla*_*amb 34
通过npm,你可以运行下面的内容
npm install bootstrap jquery --save
npm install css-loader style-loader --save-dev
如果是bootstrap 4,还要添加popper.js
npm install popper.js --save
将以下内容(作为新对象)添加到webpack配置 loaders: [数组中
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
将以下内容添加到索引或布局中
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
Sho*_*ota 31
你不能在React应用程序中使用基于Bootstrap Jquery的Javascript组件,因为任何试图在React之外操作DOM的东西都被认为是不好的做法.在这里,您可以阅读有关它的更多信息.
1)推荐.您可以包含其他答案指定的Bootstrap的原始CSS文件.
2)看一下react-bootstrap库.它专门为React编写.
3)对于Bootstrap 4,有反应堆
这些天我通常会避免提供即用型组件的Bootstrap库(上面提到的react-bootstrap或reactstrap等).当你变得依赖他们所采用的道具时(你不能在其中添加自定义行为),你就失去了对这些组件产生的DOM的控制.
所以要么只使用Bootstrap CSS,要么退出Bootstrap.一般的经验法则是:如果不确定是否需要它,则不需要它.我已经看过很多应用程序,包括Bootstrap,但只使用少量的CSS,有时大多数CSS被自定义样式覆盖.
Dee*_*and 15
我也遇到过类似的场景。我的设置如下所示
npm install create-react-app
这将为您提供样板代码设置以开始。使用 App.js 文件作为主要逻辑。
稍后您可以在由 CLI 工具创建的 index.html 中使用引导 CDN。或者
npm install bootstrap popper jquery
然后简单地将它包含在 App.js 文件中。
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.bundle'
很少有作者提到使用 className 属性而不是 class，但就我而言，两者的工作方式如下。但是，如果您使用 class 并在浏览器上的开发人员工具中查看控制台，则会看到使用 class 的错误。因此请改用 className。
<div className="App" class = "container"> //dont use class attribute
并且不要忘记删除默认的 CSS 导入以避免与引导程序发生冲突。
希望有帮助，快乐编码！！！
Tha*_*ran 14
您可以import在任何地方使用css文件.如果您根据需要配置了加载程序,Webpack将小心地捆绑css.
就像是,
import 'bootstrap/dist/css/bootstrap.css';
和webpack配置一样,
loaders: [{ test: /\.css$/, loader: 'style-loader!css-loader' }]
注意:您还必须添加字体加载器,否则您将收到错误.
请按照以下链接使用React的bootstrap. https://react-bootstrap.github.io/
安装方式:
$ npm install --save react react-dom
$ npm install --save react-bootstrap
- - - - - - - - - - - - - - - - - - 要么 - - - - - - - ------------------------
将bootstrap CDN for CSS放入react的index.html文件的标签中,并将indexst文件的标签中的Js的Bootstrap CDN放入.使用className而不是class遵循index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="../src/images/dropbox_logo.svg">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="root"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
Bootstrap 5（2021 年更新）
Bootstrap 5 是模块化的，不再需要 jQuery。因此，您可以导入 Bootstrap 组件并直接从bootstrap. 这意味着您不再需要像react-bootstrap或 之类的第三方库reactstrap。
使用 React + Bootstrap 5：
1_ 安装 bootstrap 并将其添加到 package.json...
npm install 'bootstrap' --save
2_导入引导程序和/或特定组件...
import { Collapse, Popover, Toast, Tooltip, Alert, Modal, Dropdown } from bootstrap
3_ 使用 Bootstrap 组件。例如，这是下拉菜单...
// component
const DropdownDemo = () => {
const ddRef = useRef()
useEffect(() => {
var dd = new Dropdown(ddRef.current, {})
})
return (
<div className="py-2">
<div className="dropdown">
<button className="btn btn-secondary dropdown-toggle" type="button" ref={ddRef} aria-expanded="false">
Dropdown button
</button>
<ul className="dropdown-menu" aria-labelledby="dropdown1">
<li><a className="dropdown-item" href="#">Action</a></li>
<li><a className="dropdown-item" href="#">Another action</a></li>
<li><a className="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
)
}
// React app
function App() {
const [mounted, setMounted] = useState(true);
return (
<div>
{mounted &&
<div>
<DropdownDemo />
</div>
}
</div>
)
}
小智 5
npm install --save bootstrap
并将此导入语句添加到您的index.js 文件中
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
或者您可以简单地在您的index.html 文件中添加CDN。
小智 5
希望这有帮助；）
第 1 步：使用 NPM 安装以下命令
npm install --save reactstrap@next react react-dom
第2步：示例index.js主脚本导入以下命令
import 'bootstrap/dist/css/bootstrap.min.css';
步骤3：UI组件参考以下网站 reactstrap.github.io
给你 jquery 和 bootstrap 的完整答案，因为 jquery 是 bootstrap.js 的要求：
将 jquery 和 bootstrap 安装到 node_modules 中：
npm install bootstrap
npm install jquery
使用这个确切的文件路径导入你的组件：
import 'jquery/src/jquery'; //for bootstrap.min.js
//bootstrap-theme file for bootstrap 3 only
import 'bootstrap/dist/css/bootstrap-theme.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
| 归档时间： |
|
| 查看次数： |
175709 次 |
| 最近记录： |