引导模板可以在index.html上工作，但不能在任何react组件上工作吗？
引导模板可以在index.html上工作，但不能在任何react组件上工作吗？
提问于 2021-02-03 09:50:43
祝对这篇文章感兴趣的人一天好！
嗨，我一直在做一个react应用程序，很高兴能做一个bootstrap模板集成的事情是，一切都很好，但模板的响应性，它没有任何动画，它只是外观。
工作索引示例：animation when scroll down
不工作的react-component示例：
索引代码是这样的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<!-- Favicon -->
<link rel="icon" href="img/core-img/favicon.ico">
<!-- Core Stylesheet -->
<link rel="stylesheet" href="%PUBLIC_URL%/style.css">
<!-- ##### All Javascript Script ##### -->
<!-- jQuery-2.2.4 js -->
<script src="js/jquery/jquery-2.2.4.min.js"></script>
<!-- Popper js -->
<script src="js/bootstrap/popper.min.js"></script>
<!-- Bootstrap js -->
<script src="js/bootstrap/bootstrap.min.js"></script>
<!-- All Plugins js -->
<script src="js/plugins/plugins.js"></script>
<!-- Active js -->
<script src="js/active.js"></script>
</body>
</html>Header.js代码：
import React, { Component } from 'react'
import '../App.scss';
import 'bootstrap/dist/css/bootstrap.min.css';
export default class Header extends Component {
render() {
return (
<div>
{/* ##### Header Area Start ##### */}
<header className="header-area">
{/* Navbar Area */}
<div className="palatin-main-menu">
<div className="classy-nav-container breakpoint-off">
<div className="container">
{/* Menu */}
<nav className="classy-navbar justify-content-between" id="palatinNav">
{/* Nav brand */}
<a href="index.html" className="nav-brand"><img src="img/core-img/logo.png" alt /></a>
{/* Navbar Toggler */}
<div className="classy-navbar-toggler">
<span className="navbarToggler"><span /><span /><span /></span>
</div>
{/* Menu */}
<div className="classy-menu">
{/* close btn */}
<div className="classycloseIcon">
<div className="cross-wrap"><span className="top" /><span className="bottom" /></div>
</div>
{/* Nav Start */}
<div className="classynav">
<ul>
<li className="active"><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="#">Pages</a>
<ul className="dropdown">
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="rooms.html">Rooms</a></li>
<li><a href="blog.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="elements.html">Elements</a></li>
</ul>
</li>
<li><a href="#">Mega Menu</a>
<div className="megamenu">
<ul className="single-mega cn-col-4">
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="rooms.html">Rooms</a></li>
<li><a href="blog.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="elements.html">Elements</a></li>
</ul>
<ul className="single-mega cn-col-4">
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="rooms.html">Rooms</a></li>
<li><a href="blog.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="elements.html">Elements</a></li>
</ul>
<ul className="single-mega cn-col-4">
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="rooms.html">Rooms</a></li>
<li><a href="blog.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="elements.html">Elements</a></li>
</ul>
<ul className="single-mega cn-col-4">
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="rooms.html">Rooms</a></li>
<li><a href="blog.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="elements.html">Elements</a></li>
</ul>
</div>
</li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
{/* Button */}
<div className="menu-btn">
<a href="#" className="btn palatin-btn">Make a Reservation</a>
</div>
</div>
{/* Nav End */}
</div>
</nav>
</div>
</div>
</div>
</header>
{/* ##### Header Area End ##### */}
</div>
)
}
}app.js代码如下：
import logo from './logo.svg';
import './App.scss';
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import Header from './components/Header';
function App() {
return (
<div className="App">
<Header />
</div>
);
}
export default App;我应该更改或安装什么？
已经执行了"npm install bootstrap“"react-router-dom”"npm install node-sass“
想法快用完了，如果能有一些建议就太好了，谢谢！
回答 1
Stack Overflow用户
发布于 2021-02-03 14:04:51
我推荐使用react-bootstrap模块。它有很好的文档并且是模块化的，所以你只需要导入你需要的组件。
步骤包括：
npm install react-bootstrap bootstrap- include
index.html - include中的
index.js
bootstrap.min.css cdn as bootstrap.bundle.min.js关闭标记上方的脚本标记
- 将
bootstrap.min.css导入根body
在此之后，您应该能够根据需要从react-bootstrap库导入组件。我已经创建了一个沙箱，下面有一个巨型加速器和一个模式窗口。
https://codesandbox.io/s/gifted-wozniak-4wpvi?file=/src/App.js:42-92
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66020158
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号