[英]Navbar not displaying correctly in Reactjs
I'm trying to build a modular react application but have trouble with the navbar, for some reason the navbar is not formatting correctly. 我正在尝试构建一个模块化的反应应用程序,但导航栏有问题,由于某种原因,导航栏没有正确格式化。
WEbpage:- 网页:-
Here is my complete code. 这是我的完整代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ReactStrap</title>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="root"></div>
<script type="text/babel">
var Navbar = React.createClass({
render(){
return(
<nav className="navbar navbar-default">
<div className="container">
<div className="navbar-header">
<a className="navbar-brand" href="#">ReactStrap</a>
</div>
<div id="navbar">
<ul className="nav navbar-nav">
<li className="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
);
}
});
var Jumbotron = React.createClass({
render(){
return(
<div>
<div className="jumbotron">
<div className="container">
<h1>Hello, world!</h1>
<p className="lead">This is a Bootstrap theme that uses React.js components</p>
<p><a className="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
);
}
});
var Page = React.createClass({
render(){
return(
<div>
<div className="container">
This is the home page
</div>
</div>
);
}
});
var Theme = React.createClass({
render(){
return(
<div>
<Navbar />
<Jumbotron />
<Page />
</div>
);
}
});
ReactDOM.render(
<div>
<Theme />
</div>,
document.getElementById('root'));
</script>
</body>
</html>
bootstrap seem not to be included properly . 似乎没有正确包含bootstrap。 here is a working jsbin
这是一个工作的jsbin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ReactStrap</title>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div id="root">react</div>
<script type="text/babel">
var Navbar = React.createClass({
render(){
return(
<nav className="navbar navbar-default">
<div className="container">
<div className="navbar-header">
<a className="navbar-brand" href="#">ReactStrap</a>
</div>
<div id="navbar">
<ul className="nav navbar-nav">
<li className="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
);
}
});
var Jumbotron = React.createClass({
render(){
return(
<div>
<div className="jumbotron">
<div className="container">
<h1>Hello, world!</h1>
<p className="lead">This is a Bootstrap theme that uses React.js components</p>
<p><a className="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
);
}
});
var Page = React.createClass({
render(){
return(
<div>
<div className="container">
This is the home page
</div>
</div>
);
}
});
var Theme = React.createClass({
render(){
return(
<div>
<Navbar />
<Jumbotron />
<Page />
</div>
);
}
});
ReactDOM.render(
<div>
<Theme />
</div>,
document.getElementById('root'));
</script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.