React.js 没有在按钮上提取 bootstrap 格式
React.js doesn't pick-up bootstrap formatting on buttons
我只是将一些代码从 backbone.marionette
移植到 react.js
并且我注意到浏览器似乎无法获取按钮的格式,尽管它总是习惯于何时与 backbone.marionette
.
合作
相关HTML/Javascript代码:
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>The Order of the Mouse</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/jpg" href="./ico/favicon.jpg">
<meta name="description" content="Psychological horror/detective/spiritual RPG set the medieval, magical future world of 2079; Web-Based">
<meta name="keywords" content="RPG, Horror, Detective, Order of the Mouse, Rabbit-Cat, Dragon-Bear, Clown-Fox, Deer-Wolf">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
<script src="./js/vendor/jquery-1.11.3.min.js"></script>
<script src="./js/vendor/bootstrap.min.js"></script>
<script src="./js/vendor/underscore-min.js"></script>
<script src="./js/vendor/backbone-min.js"></script>
<script src="./js/vendor/backbone.marionette.min.js"></script>
<script src="./js/vendor/react.min.js"></script>
<script src="./js/vendor/react-dom.min.js"></script>
<script src="./js/vendor/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:500,300,700,200' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<div class="main" ng-controller="MainController">
<!-- Main Header -->
<div class="jumbotron" id="top-bar">
<div class="container" id="header"><h1 id="title-text1"><span class="brand">ORDER of the MOUSE: Alpha</span></h1>
<img id="deer-wolf" height="128" width="128" src="./img/alphaDeer-Wolf_small.png" alt="deer-wolf">
<img id="tiger-humming" height="92" width="128" src="./img/alphaTiger-Humming_small.png" alt="tiger-hummingbird">
<h4 id="main-sub">Rabbit-Cat, Dragon-Bear and Clown-Fox experience horror in the Castle of Cages and Revolving Walls.</h4>
</div>
</div>
</div>
<!-- MVC starts here-->
<div id="content"></div>
<script type="text/babel">
var StoryBox = React.createClass({
render: function() {
return (
<div className="storybox">
<p><em>You are Drogon Barre, aka Dragon-Bear.</em></p>
<p>The date is October 3rd. You are sitting quietly at your father's house when a letter arrives through the door with details of a rape and murder. The letter says that the murder was committed by a member of the infamous cult <strong>The Order of the Mouse</strong>. The writer claims the victim was her sister and that she looked on powerless as the assailant took her sister's life. She claims that the perpetrator currently resides in a hotel just outside Plymouth. The letter gives the address but no further details.</p>
<p>Do you choose to investigate?</p><button type="button" class="btn btn-success" id="yesbtn">Yes</button><button type="button" class="btn btn-danger" id="nobtn">No</button>
</div>
);
}
});
ReactDOM.render(
<StoryBox />,
document.getElementById('content')
);
</script>
<!-- Modules -->
<script src="js/app.js"></script>
<script src="js/page-move.js"></script>
<script src="js/audioset.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
<script src="js/controllers/StoryController.js"></script>
<script>
</body>
</html>
为什么 bootstrap 不自动设置按钮样式? Bootstrap 肯定正在加载,并且 Firefox 中的调试器没有抛出任何错误。
要设置 class
属性,您应该使用 className
而不是 class
、
<button type="button" className="btn btn-success" id="yesbtn">Yes</button>
<button type="button" className="btn btn-danger" id="nobtn">No</button>
我只是将一些代码从 backbone.marionette
移植到 react.js
并且我注意到浏览器似乎无法获取按钮的格式,尽管它总是习惯于何时与 backbone.marionette
.
相关HTML/Javascript代码:
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>The Order of the Mouse</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/jpg" href="./ico/favicon.jpg">
<meta name="description" content="Psychological horror/detective/spiritual RPG set the medieval, magical future world of 2079; Web-Based">
<meta name="keywords" content="RPG, Horror, Detective, Order of the Mouse, Rabbit-Cat, Dragon-Bear, Clown-Fox, Deer-Wolf">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
<script src="./js/vendor/jquery-1.11.3.min.js"></script>
<script src="./js/vendor/bootstrap.min.js"></script>
<script src="./js/vendor/underscore-min.js"></script>
<script src="./js/vendor/backbone-min.js"></script>
<script src="./js/vendor/backbone.marionette.min.js"></script>
<script src="./js/vendor/react.min.js"></script>
<script src="./js/vendor/react-dom.min.js"></script>
<script src="./js/vendor/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:500,300,700,200' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<div class="main" ng-controller="MainController">
<!-- Main Header -->
<div class="jumbotron" id="top-bar">
<div class="container" id="header"><h1 id="title-text1"><span class="brand">ORDER of the MOUSE: Alpha</span></h1>
<img id="deer-wolf" height="128" width="128" src="./img/alphaDeer-Wolf_small.png" alt="deer-wolf">
<img id="tiger-humming" height="92" width="128" src="./img/alphaTiger-Humming_small.png" alt="tiger-hummingbird">
<h4 id="main-sub">Rabbit-Cat, Dragon-Bear and Clown-Fox experience horror in the Castle of Cages and Revolving Walls.</h4>
</div>
</div>
</div>
<!-- MVC starts here-->
<div id="content"></div>
<script type="text/babel">
var StoryBox = React.createClass({
render: function() {
return (
<div className="storybox">
<p><em>You are Drogon Barre, aka Dragon-Bear.</em></p>
<p>The date is October 3rd. You are sitting quietly at your father's house when a letter arrives through the door with details of a rape and murder. The letter says that the murder was committed by a member of the infamous cult <strong>The Order of the Mouse</strong>. The writer claims the victim was her sister and that she looked on powerless as the assailant took her sister's life. She claims that the perpetrator currently resides in a hotel just outside Plymouth. The letter gives the address but no further details.</p>
<p>Do you choose to investigate?</p><button type="button" class="btn btn-success" id="yesbtn">Yes</button><button type="button" class="btn btn-danger" id="nobtn">No</button>
</div>
);
}
});
ReactDOM.render(
<StoryBox />,
document.getElementById('content')
);
</script>
<!-- Modules -->
<script src="js/app.js"></script>
<script src="js/page-move.js"></script>
<script src="js/audioset.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
<script src="js/controllers/StoryController.js"></script>
<script>
</body>
</html>
为什么 bootstrap 不自动设置按钮样式? Bootstrap 肯定正在加载,并且 Firefox 中的调试器没有抛出任何错误。
要设置 class
属性,您应该使用 className
而不是 class
、
<button type="button" className="btn btn-success" id="yesbtn">Yes</button>
<button type="button" className="btn btn-danger" id="nobtn">No</button>