React.js不会选择按钮上的引导程序格式(React.js doesn't pick

React.js不会选择按钮上的引导程序格式(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">  <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>  <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>  <script src="js/app.js"></script> <script src="js/page-move.js"></script> <script src="js/audioset.js"></script>  <script src="js/controllers/MainController.js"></script> <script src="js/controllers/StoryController.js"></script> <script> </body> </html>

为什么自动样式按钮没有自动样式？ Bootstrap肯定正在加载，Firefox中的调试器不会抛出任何错误。

I am just porting some code over from backbone.marionette into react.js and I notice the browser doesn't seem to be able to pick up the formatting for buttons, though it always used to when working with backbone.marionette.

Relevant HTML/Javascript code:

<!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">  <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>  <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>  <script src="js/app.js"></script> <script src="js/page-move.js"></script> <script src="js/audioset.js"></script>  <script src="js/controllers/MainController.js"></script> <script src="js/controllers/StoryController.js"></script> <script> </body> </html>

Why isn't bootstrap auto-styling the buttons? Bootstrap is definitely being loaded, and the debugger in Firefox throws no errors.