Sample App with Backbone.js and Twitter Bootstrap

Backbone.js is a lightweight JavaScript framework that provides the basic infrastructure (Model, Collection, View, and Router classes) to bring structure to your Web applications.

Twitter Bootstrap is a UI toolkit that provides simple and flexible HTML, CSS, and Javascript to implement popular user interface components and interactions.

In other words, Backbone.js and Twitter Bootstrap focus on different areas of your application: core architecture and user interface respectively. Because of their well-defined and non-overlapping scope, Backbone.js and Twitter Bootstrap work well together. In general, I find a lightweight architectural framework and a UI toolkit to be a powerful combination, and an interesting alternative to full-stack frameworks: it gives you the flexibility to choose the library you like (if any) in the respective areas of your application.

The Sample Application

To give this combination a try, I put together a new sample application that uses Backbone.js to organize the code, and Twitter Bootstrap to organize the UI. The application is an Employee Directory that allows you to look for employees by name, view the details of an employee, and navigate up and down the Org Chart by clicking the employee’s manager or any of his/her direct reports.

You can run the application here.



Backbone Directory is a single page application: index.html is essentially empty. Views are injected into and removed from the DOM as needed. Even though it is a single page application, the Backbone.js Router makes it easy to keep the different states of the app “bookmarkable” and “deep-linkable”.

Twitter Bootstrap highlights

“Backbone Directory” uses a number of the Twitter Bootstrap styles, components, and interactions: the 12-column grid with nested columns, a “Navbar”, a “Search Form” with dropdown, the dropdown plugin, the Glyphicons icons, Info and Warning alerts, a “Well”, etc.

Backbone.js highlights

If you are new to Backbone.js, you may want to start with the tutorial (part 1, part 2, part 3, and postface) I blogged recently. “Backbone Directory” includes some interesting elements not covered in the tutorial:

  • One-to-Many association. A one-to-many (Manager-to-Employees) association is defined in the Employee model (model/employeemodel.js) as a collection of employees (the direct reports). That collection is lazily fetched in the render() function of EmployeeFullView (view/employeedetails.js).
  • Composite View. EmployeeFullView (views/employeedetails.js) is an example of a composite view. Its render() function instantiates two subviews: EmployeeView and EmployeeListView (to display the employee’s direct reports).

Source Code

The source code is available in this repository on GitHub.

Your feedback and comments are appreciated.

132 Responses to Sample App with Backbone.js and Twitter Bootstrap

  1. Patrick Dobson February 13, 2012 at 8:55 pm #

    What server scripting languages and frameworks have you used with backbone.js? Have you found it to be backend agnostic, or does it work best with node.js, python, ruby, php, etc?

    • Mike Ryan February 13, 2012 at 10:22 pm #

      Backbone.js is completely backend agnostic – as long as you can implement something that resembles a RESTful API, you can use Backbone.js.

      • Rick July 26, 2012 at 8:17 pm #

        So the Slim Restful API is a requirement, I guess because it maps the browser state to a faux url – although I thought backbone was doing that with the router object(?). If I am looking to implement backbone to build a UI in suppport of a CMS backside, then I could map the Slim API functions per url to a series of CMS class methods – so long as I am returning a JSON object for underscore to parse into the backbone templates(?).

        I feel my understanding of the Slim api in relation to the backbone router is foggy. Can someone please highlight that relationship – and perhaps how it might work from a cms backend?

        Thank you, Christophe, for your excellent work! I appreciate the time you put into this tutorial.

        • jabbett July 30, 2012 at 5:44 pm #

          The Slim Framework is used to build a RESTful API with PHP. You could use whatever server-side language you prefer (Java, Ruby, etc.). The router should have nothing to do with the REST API; it maps application URLs to front-end (i.e. Backbone) functionality. However, the models & collections get linked to the REST API by URL – the URLs tell Backbone what REST services to use for loading/persisting data contained in the model/collection.

  2. Esteban Felix February 13, 2012 at 11:28 pm #

    Not sure if it’s a bug with Backbone or the app, but if I click to any other page other than the homepage and try to go back and click the “Show Me!” button it doesn’t bring up the list of employees.

    Also, does Backbone not support pushState for history? I don’t know much about this library and am just starting to get into it.

    Great little app though! Thanks.

    • Masklinn February 15, 2012 at 9:47 am #

      Backbone has optional support for pushstate. It is not enabled by default because not all browsers handle it yet (iOS Safari pre 5.0 is buggy, IE9 still does not support it, not sure about the Android browser and Safari may have issues there as well).

      You can enable `pushState` support by passing in the `pushState: true` option when starting the history handler: `Backbone.history.start({pushState: true})`

      • di April 16, 2012 at 4:39 pm #

        yes

        • di April 16, 2012 at 4:54 pm #

          hi

  3. JoshLeaves February 14, 2012 at 12:20 am #

    Thanks! I’ve been looking for a nice BackBone.js starting point for quite some time. Your source code should be a good help for my next project :)

  4. Motyar February 14, 2012 at 3:27 am #

    Good work COENRAETS, thanks for sharing this.

  5. Dan February 14, 2012 at 4:14 am #

    Was looking for something exactly like this! Am playing around with Bootstrap but it’s all UI. This is awesome!

  6. Christophe February 14, 2012 at 4:18 am #

    @Patrick: Yes Backbone is backend agnostic. For access to remote services, it works really well with RESTful services by default. But you can override Backbone.sync to implement any kind of synchronization strategy. See this post for an example of using the local database on a local device.

  7. Dan February 14, 2012 at 5:24 am #

    Seems to not want to render in IE 9 (I know, I know, BUT many big companies use it). I can “view source” and the source loads – just no rendering happening… looks great in chrome.

  8. Sandeep February 14, 2012 at 6:02 am #

    Looks great in Chrome as previous poster said. Doesn’t seem to work in FF 3.6 though. Do you know if this is because Bootstrap doesn’t support it?

  9. Hamund February 14, 2012 at 7:22 am #

    Great to see that the HTML+CSS+JS workflow is improving. However, I cannot help to think that this “app” would feel smoother in Flash. I think it has to do with small details such as how dropdown lists are rendered, how the page resizes when the elements are loaded, how the hoover selection in the dropdown feels a bit too instant etc. I guess this can be improved by tweeking the css, but these things are natively done right in Flash.

    • Don July 6, 2012 at 8:19 pm #

      Flash? Seriously.

      • Nick Sophinos October 30, 2012 at 12:48 am #

        In 2012, Flash is still superior from a technical quality point of view. Not that I use it anymore. It got hit with the same ugly stick that Java applets were whacked with back in 1999 and that is that.

  10. Kory February 14, 2012 at 9:06 am #

    Nice tutorial. I was wondering how I would go about not showing a particular piece of an html template, is that possible? For example in employee-details.html how could I conditionally show or not show the manager field? Normally I would surround that in an if block with my server side scripting language but with backbone I don’t understand how to accomplish that. Any suggestions?

  11. Alan February 14, 2012 at 10:29 am #

    Great work Christophe. I’ve been getting to grips with Twitter Bootstrap 2.0 for an internal work tool the last couple of weeks and this sample is well timed.

    If you’re stuck for your next sample a backbone.js and Twitter Bootstrap CRUD app would be great ; )

  12. Daniel February 14, 2012 at 11:01 am #

    The app is great but there are two problems that I found.

    1: the contact link doesn’t get the focus when clicked.
    2: if I click one of the top menus, home or contact, the show me doesn’t work, I have to remove the # from url and click again.

    I’m gonna try that application with knockout.

    Thanks for you time Christophe

  13. Lucía-Chupetes con nombre February 14, 2012 at 11:44 am #

    Great information. I’ve been searching a long time for something like this.
    I should start now learning the aplication with the tutorial and your “Backbone Directory”, i’m new…hahaha
    Thanks a million!

  14. Christophe February 14, 2012 at 4:39 pm #

    @Daniel & Esteban: Thanks for reporting this. I’ll post an update with minor fixes along with the Mobile version.

  15. Benj February 15, 2012 at 9:01 am #

    Hi Christophe,
    Really nice App. Thank you. I am a beginner and it will help to start learning backbone and Bootstrap. I have some ideas I will try to learn and do my webapp on my own. I am wondering why you didn’t commercialize this. Small companies can buy this right and is very useful for them just like any time tracking app.

    Need small Info: Based on backbone+Bootstrap, are there any open srcd/example templates where a simple app that has support for user login/signups. I want to create an app that allows user to login and enter some details for app to work. One cant access others data. Any pointers how to go about ?? Any one else can also help me.

  16. Bjorn Thor Jonsson February 16, 2012 at 7:05 pm #

    Thanks for all the educating posts!

    Looking forward to the mobile update and maybe some thoughts on how this Bootstrap approach compares to the one with jQuery Mobile?

  17. Stefane Fermigier February 17, 2012 at 1:33 pm #

    Thanks! What’s the license for your project ?

  18. Carlos Martins February 17, 2012 at 3:08 pm #

    Using this url patterns do you believe that google indexation will work fine?

  19. mohsen February 21, 2012 at 1:44 am #

    I wrote Perl backend ( using Mojolicious ) for your sample, let me know if you would like to add it to source code. Thanks for sample code

    • tudorconstantin February 21, 2012 at 4:47 am #

      I’d like to see your mojo source code. I have just put a mojolicious with bootstrap boilerplate on github and maybe we could complement it with some mojo with backbone boilerplate. Please feel free to contact me at tudorconstantin at gmail

  20. James Brown February 23, 2012 at 4:41 pm #

    Christophe, I found a minor bug:

    If you visit the main app: http://coenraets.org/directory/

    Click “Show Me” under “Try It”. Select someone. Click back. Then click “Show Me” again… nothing happens.

    Very minor but FYI

  21. snick February 27, 2012 at 7:47 am #

    You know what would be really cool?

    An extended version of this tutorial w/ additional login and admin capabilities.
    One of the biggest question to newcomers on rest-like architecture is how handling login and performance security operations (like adding or removing contents, auth, and so on).

    I’m sure it will be a great follow up article
    Best
    snick

  22. Ernesto Pino February 28, 2012 at 4:54 pm #

    I wonder how I can do to mount this tool locally (localhost). Right now I work, if not due to .htaccess is not set in my MAMP. Or is that the folder “api” PHP is not well located within the project and is not accessible.

    Thanks.
    PD: Sorry for my English.

    • Tom May 20, 2012 at 8:37 pm #

      Hi
      Did you manage to solve this problem as I appear to have the same issue? – does it have to be on live server?

      Cheers

  23. Dimitris March 2, 2012 at 8:36 am #

    Waiting for a new backbone.js article.!!!!

  24. BackboneGuy March 4, 2012 at 2:09 pm #

    Hey,
    This is amazing! Thank you for your work.

    This uses Twitter Bootstrap 2 right?

    Regards

  25. leon March 15, 2012 at 10:08 am #

    Amazing example of using backbone.js.

    A little confuse about property model of EmployeeListView in “employeelist.js” file.
    I think it is better to name it as collection. Actually, it is assigned an instance of EmployeeCollection in “header.js”.

  26. doug March 19, 2012 at 7:22 pm #

    did you find more UI flexibility with Bootstrap over JqMobile? or the other way around?

    have you tried compiling a twitter bootstrap mobile site through phone gap

  27. Nambi April 1, 2012 at 4:25 pm #

    I’m totally new to javascript, twitter-bootstrap and backbone. This is a great tutorial to get started with these.
    Read http://backbonetutorials.com/ before starting this tutorial, it will explain the basics of backbone.

    btw, how did you create the image that shows the employee hierarchy?

  28. BillSaysThis April 6, 2012 at 12:10 am #

    Chris,

    Thanks for this and the other great Backbone code and articles. One thing I’d love to see you cover that I haven’t found a good tutorial for yet is handling Bootstrap’s modals, tooltips and popovers–is this something you plan to cover soon?

  29. Arnaud April 16, 2012 at 9:25 pm #

    I solved 2 bugs in this great application:
    1. the first one is the “Show Me” button bug : if you click on Contact, then on Home and on the “Show Me” button, the search popup does not appear. This is due to the view recycling system: events are lost when you reinject the HTML into #content. To solve this, you can call the delegateEvents() method of the View.
    So in the main.js file, change the home function as this:
    home:function () {
    // Since the home view never changes, we instantiate it and render it only once
    if (!this.homeView) {
    this.homeView = new HomeView();
    this.homeView.render();
    } else {
    this.homeView.delegateEvents(); // delegate events when the view is recycled
    }
    $(‘#content’).html(this.homeView.el);
    },

    2. I found another bug with the search field: if you press Enter in this field, the page is reloaded!
    Quite easy to solve: in the header.js file, add the keypress event and filter the Enter key:
    events:{
    “keyup .search-query”:”search”,
    “keypress .search-query”:”onkeypress”
    },

    onkeypress:function (event) {
    if (event.keyCode == 13) {
    event.preventDefault();
    }
    }

    Hope this helps!
    And many thanks to Christophe for all your great tutorials!

  30. Luiz Geovani Vier April 22, 2012 at 10:33 pm #

    Very nice sample. Thanks!
    I’ve created a node.js backend in case anyone is interested: https://github.com/lgvier/directory
    Cheers

  31. khedrane Jnom May 2, 2012 at 7:36 am #

    nice example using backbone.js+Bootstrap.css+Slim.php.
    i hope to see amdjs version….
    regards.

  32. Tom May 20, 2012 at 5:01 pm #

    Hi
    First of all – a big thanks for this tutorial – it’s set me on the right path.

    …but one problem. I have downloaded the app and trying to get it going on my MAMP setup. I have also imported your directoy.sql file into a ready made database and everything seems to work just great. The problem arises when I select an employee from the drop-down list. It sets the correct URL but nothing shows and I’m not sure why. Obviously I’m connecting to the DB ok as the people wouldn’t appear in the drop-down list so not sure where to start looking.

    Any help from anyone would be much appreciated.

    Thanks

    • Tom May 20, 2012 at 5:07 pm #

      Sorry – I should be more specific. When I select an employee from the drop-down list it just stays on the homepage but the URL changes in the address bar! I’m thinking it might be to do with the fact I’m on a local setup???

  33. Rick July 27, 2012 at 2:40 pm #

    I found Christophe’s use of the backbone Collection object to be a bit confusing because it was different from other tutorials on Backbone that I have read. Most other tutorials show a Collection to be a grouping of Models.

    In this tutorial, The ‘EmployeeCollection’ Collection instantiates the ‘Employee’ model (see: js/models/employeemodel.js) but the ‘grouping’ of fellow employees under the “reports” variable is a json_encoded data set that was…
    …. retrieved through the ‘EmployeeCollection’ url Slim Restful ‘getEmployeeByName()’ in the ‘api/index.php’
    …. instantiated back inside the ‘Employee’ model with:
    this.reports = new EmployeeCollection();
    …. then looped through in the ‘EmployeeListView’ View render with:
    _.each(this.model.models, function (employee) {
    $(this.el).append(new EmployeeListItemView({model:employee}).render().el);

    Note that this is NOT “wrong.” Backbone does not establish how anyone uses the MVC pattern. But to me, it sort of broke the concept of a ‘Collection’ of ‘Models’. Creating such a variable (‘reports’) within the ‘Employee’ model may well be the best implementation and certainly shows the power of Backbone to do whatever you want. I just thought it needed some clarification.

    My take would have been to loop through the list of employees who report to a person (i.e. the Restful resource URI ‘getEmployeeByName()’ and create a model for each of those employees, then instantiate those into the ‘EmployeeCollection’ collection and go from there. To me, that would have kep the concept of a “collection” intact.

    Please advise if I misunderstood something.

  34. Prabhat Kumar Kashyap August 8, 2012 at 5:49 am #

    Great job done.
    I am looking for Java back end source codes.
    When its coming.

    Thanks,
    Prabhat

  35. tresloukadu September 1, 2012 at 2:54 am #

    great article man! I was trying to find an article explaning how to use twitter bootstrap beyond the examples in the site and you proposed it!

  36. M September 7, 2012 at 7:28 pm #

    Great blog, i am learning backbone last 2 months, i have learnt lot in this tutorial,
    I have forked this project and added AMD support using require.js,

  37. Terry Smith September 25, 2012 at 8:50 pm #

    If you do a Globalogiq html search for “js/bootstrap.min.js” you can find a bunch of examples of sites using bootstrap. Or do a search for “backbone-min.js” to find sites using backbone.

  38. Leonard October 1, 2012 at 2:06 pm #

    Hi, I’m quite new to js and backbone and I’ve just taken a quick look at your code but don’t you think that exposing sql statements in javascipt files represents a big security hole?

  39. kz October 11, 2012 at 5:52 am #

    How I can use bootstrap dropdown box with backbone. hover is disabled for DD in bootstrap, I have to click. It’s okay but backbone router take over and route to href instead of open Dropdown box. How to deal with that?

  40. Andrea October 24, 2012 at 2:24 am #

    excellent stuff! thanks a lot for sharing

  41. Fermuar November 23, 2012 at 4:54 am #

    Thank you bro it’s the best blog!

  42. Bobby Khan December 5, 2012 at 6:29 am #

    Now is the time to take action and make money. Be your own boss with http://www.PleasureBuilder.com

  43. espresso maker brands December 14, 2012 at 11:08 am #

    It’s nearly impossible to find educated people for this topic, but you seem like you know what you’re talking about!
    Thanks

  44. Karl December 20, 2012 at 3:36 am #

    Nice demo!

    I did notice that when you go to contact the active state on the .nav doesn’t change.

  45. sohbet odalari December 20, 2012 at 5:50 pm #

    hello good blog

  46. Katharina January 20, 2013 at 7:46 pm #

    Hi, every time i used to check blog posts here early in the dawn, as i enjoy to gain knowledge of more and more.

  47. JJ February 25, 2013 at 11:26 pm #

    Does The Sample Application work on IE? I open it on IE, but nothing display. Does Twitter Bootstrap component work on IE?

  48. Onchie March 4, 2013 at 7:35 am #

    Hi. How do I get rid of the # from the URL?

  49. Roy M J June 12, 2013 at 2:22 am #

    Awesome.. Thankyou for sharing this. Going nuts over bootstrap & backbone now.. :)..

  50. James Matthews July 29, 2013 at 9:21 pm #

    Great post- thanks for sharing. I’ve been looking for something like this for awhile, and this definitely helped clear up some confusion for me. Love how you mentioned composite view, that was super helpful!

  51. demirdöküm kombi servisi September 6, 2013 at 11:18 am #

    Note that this is NOT “wrong.” Backbone does not establish how anyone uses the MVC pattern. But to me, it sort of broke the concept of a ‘Collection’ of ‘Models’. Creating such a variable (‘reports’) within the ‘Employee’ model may well be the best implementation and certainly shows the power of Backbone to do whatever you want. I just thought it needed some clarification.ddf

  52. ferroli kombi servisi September 7, 2013 at 3:40 pm #

    Rex Ryan Talks Trash About authentic nfl jerseys authentic nfl jerseys Vs.
    Multiple sources, including ESPN, are reporting that the Saints are
    going into this season with the team, according to NBC Connecticut.
    Marshawn Lynch did put together another good game, rushing for 474 yards and 5
    touchdowns. Could the Green Bay Packers and first appeared as if they are
    found innocent in the long term.

  53. vaillant kombi servisi September 7, 2013 at 3:42 pm #

    Oh my goodness! a fantastic write-up dude. Thank you Nonetheless I’ll be experiencing trouble with ur rss . Do not know why Struggling to sign as much as it. Probably there’s any particular person getting identical rss difficulty? Any individual who knows kindly respond. Thnkx

  54. eca kombi servisi September 7, 2013 at 3:45 pm #

    I’m curious to find out what blog platform you have been using? I’m having some minor security issues with my latest blog and I would like to find something more risk-free. Do you have any solutions?

  55. baykan kombi servisi September 7, 2013 at 3:47 pm #

    I love your blog.. very nice colors & theme. Did you design this website yourself or did you hire someone to do it for you? Plz answer back as I’m looking to design my own blog and would like to find out where u got this from. thanks a lot

  56. bosch kombi servisi September 7, 2013 at 3:47 pm #

    Hello! This is my 1st comment here so I just wanted to give a quick shout out and say I really enjoy reading your blog posts. Can you recommend any other blogs/websites/forums that deal with the same topics? Appreciate it!

  57. kombi servisi September 7, 2013 at 3:48 pm #

    I do trust all the concepts you have presented in your post. They’re really convincing and can definitely work. Nonetheless, the posts are too short for starters. May you please lengthen them a little from next time? Thanks for the post.

  58. beylikdüzü kombi servisi September 7, 2013 at 3:48 pm #

    However, I don’t forget Walt Mossberg’s comment some weeks ago: your concurrent application, Parallels 8, remains slightly more fluid that yours, as it has always been.

  59. vestel klima servisi September 7, 2013 at 3:49 pm #

    This said, I must let you know that they are not strong for support and that their license is valid for one computer only.

  60. klima servisi September 7, 2013 at 3:49 pm #

    I wonder Which version all these reviewers used? Probably it is not 5.0.2 because it crashes on

  61. klima servisi September 7, 2013 at 3:50 pm #

    Marshawn Lynch did put together another good game, rushing for 474 yards and

  62. protherm kombi servisi September 7, 2013 at 3:53 pm #

    So I considered switching to Fusion or Parallels. But then it occurred to me that Fusion or Parallels may take a big chunk of memory for itself like Boot Camp apparently does, still leaving me with much less memory in Windows.

  63. vaillant kombi servisi November 8, 2013 at 8:51 pm #

    Out of interest, some of the apps you tested, did some of them use local storage? I am having issues after upgrading to ios7 with phonegap 3.1 that the tx.executeSql does not seem to run. However doing a check in the background localstorage is supported.

  64. mynet chat December 4, 2013 at 1:35 pm #

    goood super blogoins

  65. Iwan Harnoko December 31, 2013 at 3:08 am #

    Hello Chris, I try to install this sample but the data is not connect to mysql database, how to fix that?

  66. ortaköy çilingir February 23, 2014 at 7:59 am #

    thano you admin

  67. demirdöküm kombi servisi April 11, 2014 at 5:47 am #

    Well, I guess you just have to wait a few days more

  68. Infamous Second Son Download April 15, 2014 at 7:55 am #

    Pinball: E-Games’ Pinball is a 3D pinball simulation with three tables.
    This ability to be creative and have so much freedom in
    gameplay makes Farmcraft one of the better free downloads
    thus far. Steam can render games you purchased, and have a legal license to use, unplayable.

  69. Shawnee April 22, 2014 at 8:07 am #

    Hello, yes this post is genuinely nice and I have learned lot of things from it regarding blogging.
    thanks.

  70. fatih klima servisi May 4, 2014 at 2:16 pm #

    thano you admin

  71. x Chienne May 16, 2014 at 12:18 am #

    Vous faîtes toujours des posts attractifs

  72. http://storify.com May 21, 2014 at 3:58 pm #

    Je finirai de voir tout cela après

  73. Christian Dior bags May 25, 2014 at 8:10 pm #

    Hey would you mind sharing which blog platform you’re using?
    I’m looking to start my own blog in the near future but I’m having a difficult time choosing between BlogEngine/Wordpress/B2evolution
    and Drupal. The reason I ask is because your design seems different then most blogs and I’m
    looking for something completely unique. P.S My apologies for being off-topic but I had to ask!

  74. Robin May 26, 2014 at 6:36 am #

    Thanks for the article, helped me a lot.

  75. http://www.sacs-celine.com May 28, 2014 at 5:00 am #

    Hi, Neat post. There is a problem along with your web site in internet explorer, might check this?
    IE nonetheless is the market chief and a large part of other folks
    will pass over your wonderful writing due to this problem.

  76. Ericka May 28, 2014 at 4:13 pm #

    It’s an remarkable article in support of all the internet people; they will take advantage from it I am
    sure.

  77. internet June 11, 2014 at 3:41 am #

    The frustration lies within many online marketers of the multiple and maybe even unnecessary changes the search engines make to their
    so called “algorithm” and YES I will agree I have shared these frustrations.

    I have just wasted over an hour playing around with a new site – a
    new site that I have no time to build. Off page SEO services
    provide external support to a website by providing links from various leading websites.

  78. midea klima servisi June 13, 2014 at 2:30 pm #

    your web thanks

  79. Paul Dobin June 21, 2014 at 1:59 am #

    Oh my goodness! Incredible article dude! Thank you, However I am experiencing issues with your RSS. I don

  80. Allumeuse Cul June 22, 2014 at 1:48 am #

    Un post plein de conseils

  81. car repair June 30, 2014 at 10:25 pm #

    And spending a small amount of money to repair some of those nuisance problems
    on your vehicle can cause you to fall in love with it all over again.
    You could even find some easy solutions to the issues you need to know within your owner’s manual.

    Most of us panic upon hearing strange sounds in our
    cars.

  82. car sales July 1, 2014 at 9:26 am #

    However, there are prevalent beliefs among car sales professionals
    that prevent them from obtaining a high conversion rate.
    The next step to buying a new car is to see which
    car would suit your budget the most. You will not need
    a college degree, real-estate license, or spiffy dark colored
    suit.

  83. Foster July 17, 2014 at 8:21 am #

    Great post. I was checking constantly this blog and I’m impressed!

    Very useful information specifically the last part :
    ) I care for such information much. I was looking for this
    particular info for a very long time. Thank you and best of
    luck.

Trackbacks/Pingbacks

  1. Bookmarks for February 16th from 19:47 to 21:20 | Netweb Interactive - February 16, 2012

    [...] Sample App with Backbone.js and Twitter Bootstrap – [...]

  2. My Daily Shared Bookmarksfboiton's blog | fboiton's blog - February 16, 2012

    [...] Sample App with Backbone.js and Twitter Bootstrap – [...]

  3. Using Backbone.js with jQuery Mobile - March 5, 2012

    [...] and it lets you use the UI toolkit of your choice or simply roll your own styles and widgets. In my previous post, I demonstrated how to use Twitter Bootstrap on top of [...]

  4. backbone.js | Pearltrees - March 7, 2012

    [...] Backbone.js is a lightweight JavaScript framework that provides the basic infrastructure (Model, Collection, View, and Router classes) to bring structure to your Web applications. Twitter Bootstrap is a UI toolkit that provides simple and flexible HTML, CSS, and Javascript to implement popular user interface components and interactions. In other words, Backbone.js and Twitter Bootstrap focus on different areas of your application: core architecture and user interface respectively. Sample App with Backbone.js and Twitter Bootstrap [...]

  5. Crafting Native Looking iOS Apps with HTML, Backbone.js, and PhoneGap - March 28, 2012

    [...] good? For traditional web apps (delivered through a browser), Twitter Bootstrap can help (read here). But what about Mobile apps? I explored Backbone.js + jQuery Mobile here. Depending on what you [...]

  6. Simple webinterface for AD (ldap) | PHP Developer Resource - April 23, 2012

    [...] to be a big thing and should be read-only. Just as a simple employee directory. I came across http://coenraets.org/blog/2012/02/sample-app-with-backbone-js-and-twitter-bootstrap/, this sample app look like what I'm searching. But they use MySQL (yes I could try to dump our AD [...]

  7. Tutorials/Guides/Articles/Etc | backbone.js | Pearltrees - April 30, 2012

    [...] | Framework Get flash to fully experience Pearltrees 004 JSJ Backbone.js with Jeremy Ashkenas Sample App with Backbone.js and Twitter Bootstrap In other words, Backbone.js and Twitter Bootstrap focus on different areas of your application: [...]

  8. Single-Page CRUD Application with Backbone.js and Twitter Bootstrap - May 3, 2012

    [...] few weeks weeks ago, I posted a first Backbone.js and Twitter Bootstrap sample application. While interesting, “Employee [...]

  9. Backbone.js giving structure to your application - javascripted.me - June 5, 2012

    [...] Sample App with Backbone.js and Twitter Bootstrap by Christophe Coenraets http://coenraets.org/blog/2012/02/sample-app-with-backbone-js-and-twitter-bootstrap/ [...]

  10. Super Simple Backbone Starter Kit / Boilerplate | webApp(B)log - June 29, 2012

    [...] half an hour of going through Backbone Boilerplate and other samples and tutorials I ended up using Sample App with Backbone.js and Twitter Bootstrap as a [...]

  11. 本人收集了一些Bootstrap的资源,供大家参考。 | 南龙的小站 - July 8, 2012

    [...] Bootstrap + Backbonehttp://coenraets.org/blog/2012/02/sample-app-with-backbone-js-and-twitter-bootstrap/http://blog.csdn.net/anhulife/article/details/6960366 [...]

  12. Using Backbone.js to create list views with multiple layouts | Javier Manzano's Blog - July 15, 2012

    [...] one of the best javascript MVC frameworks out there. You can find some good tutorials here and here to get started with [...]

  13. Using Backbone.js to create list views with multiple layouts | Javier Manzano's Blog - July 15, 2012

    [...] one of the best javascript MVC frameworks out there. You can find some good tutorials here and here to get started with [...]

  14. Backbone.js apps with Authentication Tutorial | Clint Berry - September 1, 2012

    [...] I will be using an already created backbone.js application called Backbone Directory, created by Christophe Coenraets who has some great tutorials and information about backbone on his blog. He has some mobile [...]

  15. Twitter bs (Bootstrap) « TechnoBuzz - September 17, 2012

    [...] http://coenraets.org/blog/2012/02/sample-app-with-backbone-js-and-twitter-bootstrap/ [...]

  16. Bootstrap:优秀的社区标准化前端框架 | 拼客王十三 Www.WangShiSan.Com - September 24, 2012

    [...] http://coenraets.org/blog/2012/02/sample-app-with-backbone-js-and-twitter-bootstrap/                 bootstrapAJAX搜索栏插件 [...]

  17. 10 posts de Backbone.js que no debes perderte « Silvercorp - October 9, 2012

    [...] Sample App with Backbone.js and Twitter Bootstrap [...]

  18. 新溪转发博客 » [javascript]Bootstrap:优秀的社区标准化前端框架 - October 24, 2012

    [...] http://coenraets.org/blog/2012/02/sample-app-with-backbone-js-and-twitter-bootstrap/ BootstrapAJAX搜索栏插件 [...]

  19. 新溪转发博客 » Bootstrap的资源 - October 25, 2012

    [...] + Backbone http://coenraets.org/blog/2012/02/sample-app-with-backbone-js-and-twitter-bootstrap/ [...]

  20. Confluence: TengFei Qi, 齐腾飞 - October 29, 2012

    ②Bootstrap和其他前端UI框架的集成和整合方案…

    一、Bootstrap和其他前端UI框架的集成和整合问题            BootStrap…

  21. The Best BootStrap Resources | lotshe - November 6, 2012

    [...] 5、Sample App with Backbone.js and Twitter Bootstrap [...]

  22. 前端框架利器-Bootstrap – CSSwang-CSS网站 - November 8, 2012

    [...] 5、Sample App with Backbone.js and Twitter Bootstrap [...]

  23. Employee Directory Sample App with Backbone.js and jQuery Mobile | Christophe Coenraets - November 16, 2012

    [...] A Backbone.js + Twitter Bootstrap version of this application is available here. [...]

  24. 前端框架利器-Bootstrap - November 29, 2012

    [...] 5、Sample App with Backbone.js and Twitter Bootstrap [...]

  25. Using Backbone.JS with jQuery Mobile | Appliness - December 5, 2012

    [...] it lets you use the UI toolkit of your choice or simply roll your own styles and widgets. In my previous post, I demonstrated how to use Twitter Bootstrap on top of [...]

  26. BootStrap资源 | 易老师课堂 - December 24, 2012

    [...] 5、Sample App with [...]

  27. The Best BootStrap Resources - 华子博客 - 前端技术博客,一起研究关于前端的那点事 - January 11, 2013

    [...] 5、Sample App with Backbone.js and Twitter Bootstrap [...]

  28. The Best BootStrap Resources学习BootStrap的一个最好最全的资源 | JSUED ·前端开发· 视觉设计· 交互设计· 用户体验· 界面设计 - February 27, 2013

    [...] 5、Sample App with Backbone.js and Twitter Bootstrap [...]

  29. Sip a cup of Backbarstrap: Backbone, Handlebars, and Bootstrap with CoffeeScript and RequireJS | Agile Development Blog - April 3, 2013

    [...] came across Adobe Technical Evangelist Christophe Coenraets’ very illustrative Sample App with Backbone.js and Twitter Bootstrap a couple of days ago and used it as a baseline for building this early prototype of an entry detail [...]

  30. The Best BootStrap Resources | 觉 - April 13, 2013

    [...] 5、Sample App with Backbone.js and Twitter Bootstrap [...]

  31. Sample Application with Backbone.js and Twitter Bootstrap: Updated and Improved | Christophe Coenraets - April 17, 2013

    [...] year ago, I blogged Employee Directory, a sample application that demonstrates how to build modern web apps with Backbone.js and Twitter [...]

  32. Rough roadmap for the next releases ← Application Maker - CRM Edition - June 3, 2013

    [...] Consider maybe a FULL  AJAX + JS UI. Looking at bootstrap +  backbone [...]

  33. Backbone Example Sites with Tutorials | Hugo Mineiro Portfolio - July 21, 2013

    [...] Backbone.js + Twitter Bootstrap version [...]

  34. Microsoft Adds Bootstrap Support To Visual Studio 2013 | whatsweb - July 27, 2013

    [...] Sample App with Backbone.js and Twitter Bootstrap (coenraets.org) [...]

  35. Mehmet Akif SÖNMEZ - October 1, 2013

    [...] backbone.js + Boostrap ile Örnek Uygulaması buyrun [...]

  36. Sample App with Backbone.js and Twitter Bootstrap » Pagellan - January 8, 2014

    [...] http://coenraets.org/blog/2012/02/sample-app-with-backbone-js-and-twitter-bootstrap/ [...]

  37. Learning Full Stack Web Development | Mitchell Fang's Coding - February 9, 2014

    […] http://coenraets.org/blog/2012/02/sample-app-with-backbone-js-and-twitter-bootstrap/ […]

Leave a Reply

css.php