React.js не набирает форматирование бутстрапа на кнопках

Я просто переношу код с backbone.marionette в react.js и замечаю, что браузер, похоже, не может выбрать формат для кнопок, хотя он всегда используется при работе с backbone.marionette.React.js не набирает форматирование бутстрапа на кнопках

Соответствующий 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 определенно загружается, а отладчик в Firefox не вызывает ошибок.

источник

2015-11-15 Peter David Carter

Чтобы установить 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>

Example

источник

2015-11-15 13:06:30

Кроме того, установка 'class' вместо' className' должен произвести предупреждение консоли и инструкции. – David

React.js не набирает форматирование бутстрапа на кнопках

ответ

Смежные вопросы