backbone.jsHow can I use Backbone.js and Bootstrap together?

Backbone.js and Bootstrap can be used together to create powerful and responsive web applications. Bootstrap provides the styling and layout, while Backbone.js provides the structure and logic for the application.

An example of how to use them together is shown below:

<html>
  <head>
    <link rel="stylesheet" href="bootstrap.min.css">
  </head>
  <body>
    <div id="main-container"></div>

    <script src="jquery.js"></script>
    <script src="underscore.js"></script>
    <script src="backbone.js"></script>
    <script src="bootstrap.min.js"></script>
    <script>
      // Create a Backbone model
      var MyModel = Backbone.Model.extend({
        // Define model attributes
        defaults: {
          name: '',
          age: 0
        }
      });

      // Create a Backbone view
      var MyView = Backbone.View.extend({
        // Set the view element
        el: '#main-container',

        // Render the view
        render: function() {
          // Use Bootstrap to add styling
          this.$el.html('<div class="alert alert-success">Hello, world!</div>');
        }
      });

      // Create an instance of the model and view
      var myModel = new MyModel();
      var myView = new MyView({ model: myModel });

      // Render the view
      myView.render();
    </script>
  </body>
</html>

The example code above will display a Bootstrap alert with the text "Hello, world!" on the page.

Code explanation

<link rel="stylesheet" href="bootstrap.min.css">: This line of code includes the Bootstrap stylesheet in the page.
<div id="main-container"></div>: This is an empty div element which will be used to render the view.
<script src="jquery.js"></script>, <script src="underscore.js"></script>, <script src="backbone.js"></script>, <script src="bootstrap.min.js"></script>: These lines of code include the necessary libraries for using Backbone.js and Bootstrap.
var MyModel = Backbone.Model.extend({...}): This creates a Backbone model with the specified attributes.
var MyView = Backbone.View.extend({...}): This creates a Backbone view with the specified element and render function.
var myModel = new MyModel();, var myView = new MyView({ model: myModel });: These lines of code create an instance of the model and view.
myView.render();: This line of code renders the view.

Helpful links

Edit this code on GitHub

More of Backbone.js

See more codes...