[英]Adding Bootstrap Navbar to create-react-app project
我有一个使用create-react-app
全新项目。 我添加了引导程序:
npm install --save bootstrap@3
我已将其导入到我的根index.js
:
import 'bootstrap/dist/css/bootstrap.css';
现在,我已经将Bootstrap文档中的Navbar示例添加到默认App.js
jsx的顶部,并且得到了一个未格式化的混乱。
我知道引导程序正在此文件中工作,因为我还添加了一个通过引导程序正确设置样式的按钮。 但是导航栏根本不起作用。
这是我的App.js
:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<nav className="navbar navbar-toggleable-md navbar-light bg-faded">
<button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<a className="navbar-brand" href="#">Navbar</a>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item active">
<a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Features</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Pricing</a>
</li>
<li className="nav-item">
<a className="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<button className="btn">Button</button>
</div>
);
}
}
export default App;
问题是使用带有Bootstrap v4示例的Bootstrap v3。 使用v3 Navbar或引导程序版本将代码更新为v4应该可以解决此问题。
不要那样使用Bootstrap。 请改用react-bootstrap
。 这里是一个链接:
示例代码:
const NavDropdownExample = React.createClass({
handleSelect(eventKey) {
event.preventDefault();
alert(`selected ${eventKey}`);
},
render() {
return (
<Nav bsStyle="tabs" activeKey="1" onSelect={this.handleSelect}>
<NavItem eventKey="1" href="/home">NavItem 1 content</NavItem>
<NavItem eventKey="2" title="Item">NavItem 2 content</NavItem>
<NavItem eventKey="3" disabled>NavItem 3 content</NavItem>
<NavDropdown eventKey="4" title="Dropdown" id="nav-dropdown">
<MenuItem eventKey="4.1">Action</MenuItem>
<MenuItem eventKey="4.2">Another action</MenuItem>
<MenuItem eventKey="4.3">Something else here</MenuItem>
<MenuItem divider />
<MenuItem eventKey="4.4">Separated link</MenuItem>
</NavDropdown>
</Nav>
);
}
});
ReactDOM.render(<NavDropdownExample />, mountNode);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.