如何将Twitter Bootstrap集成到Backbone应用程序中

时间:2015-07-11 19:27:18

标签: javascript twitter-bootstrap backbone.js

所以我有以下index.html:

的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Project</title>
   <link href="public/css/bootstrap.css" rel="stylesheet">
  </head>
  <body>

    <script src="lib/jquery-1.11.3.js"></script>
    <script src="lib/underscore.js"></script>
    <script src="lib/backbone.js"></script>
    <script src="lib/bootstrap.js"></script>
    <script src="public/js/main.js"></script>
  </body>

main.js

  (function($){
         // Object declarations goes here
        var FormLoanView = Backbone.View.extend({
          tagName: 'div',
          template: _.template('<p class="text-uppercase">Uppercased text.</p>'),
          initialize: function(){
            var data = this.$el.html(this.template())
            $('body').html(data)
          }
        })


         $(document).ready(function () {

          var LoanView = new FormLoanView({
          });

        });
       })(jQuery);

我正在尝试创建<p class="text-uppercase">Uppercased text.</p>并将其附加到index.html中的正文中。它确实返回p元素,但引导样式不会启动,因为“大写文本”。不会返回大写字母。任何人都知道为什么会这样吗?可以在_.template中使用引导类吗?

1 个答案:

答案 0 :(得分:0)

看起来你的bootstrap.css没有正确包含。尝试使用CDN或修复css文件的相对路径。

<!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>Project</title>
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <script src="lib/jquery-1.11.3.js"></script>
    <script src="lib/underscore.js"></script>
    <script src="lib/backbone.js"></script>
    <script src="public/js/main.js"></script>
  </body>

以下是仅使用CSS的示例:https://jsfiddle.net/9nm5f0x9/

您不需要像另一位评论者所说的那样包含引导程序JS文件。