[英]using bootstrap with reactjs in browser
我正在用python開發Django項目。 我試圖將bootstrap3.3與ReactJS一起使用。 我不使用任何包管理器,因為我想在瀏覽器中使用ReactJS來瀏覽幾頁,因此我簡化了它。
我按以下順序包含javascript庫
<script src="/static/jquery/3.1.0/jquery.min.js"></script>
<script src="/static/react/15.3.0/react.min.js"></script>
<script src="/static/react-dom/15.3.0/react-dom.min.js"></script>
<script src="/static/babel-standalone/6.12.0/babel.min.js"></script>
<script src="/static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/bootstrap/3.3.7/css/bootstrap.min.css">
現在,在我的app / template / app文件夾中,創建login.html並使用bootstrap編寫一些html,如下所示:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Enter email below</h3>
</div>
<div class="panel-body">
<form role="form">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="E-mail" name="email" type="email" autofocus />
</div>
<a href="index.html" class="btn btn-lg btn-success btn-block">Login</a>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
我的頁面上有漂亮的表格
現在我嘗試通過ReactJS注入相同的html,但是整個CSS的顏色消失了
我不知道我在做什么錯,有人可以幫助我嗎?
以下是ReactJS代碼:
var ReactLoginForm = React.createClass({
render: function() {
return (
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Enter email below</h3>
</div>
<div class="panel-body">
<form role="form">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="E-mail" name="email" type="email" autofocus />
</div>
<a href="index.html" class="btn btn-lg btn-success btn-block">Login</a>
</fieldset>
</form>
</div>
</div>
</div>
</div>
);
}
});
ReactDOM.render(
<ReactLoginForm />,
document.getElementById('loginFrm')
);
和html代碼:
<div class="container">
<div id="loginFrm"></div>
</div>
嘗試使用“ className”作為屬性,而不是“ class”,因為“ class”是javascript中的保留字,而JSX基於javascript。 “ for”屬性也是如此。 您將不得不使用'htmlFor'代替。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.