12

Sorry for asking such a dumb question, But I am really not clear with these.

Bootstrap is really awesome library which save lot of work of developers. Since it provide the lot of feature like

  1. Save lots of time.
  2. Responsive features.
  3. Consistent design.
  4. Easy to use.
  5. Compatible with different browsers.

I have started working with bootstrap recently. I am really confuse about few things.

When we download the Bootstrap we get a file structure like that.

bootstrap/
|—— css/
|   |—— bootstrap.css
|   |—— bootstrap.min.css
|   |—— bootstrap-theme.css
|   |—— bootstrap-theme.min.css
|—— js/
|   |—— bootstrap.js
|   |—— bootstrap.min.js
|—— fonts/
|   |—— glyphicons-halflings-regular.eot
|   |—— glyphicons-halflings-regular.svg
|   |—— glyphicons-halflings-regular.ttf
|   |—— glyphicons-halflings-regular.woff

So first Thing I want know is

  1. What is the difference between bootstrap.js and bootstrap.min.js. When to use bootstrap.js and bootstrap.min.js ?
  2. What is the difference between bootstrap.css and bootstrap.min.css. When to use bootstrap.css and bootstrap.min.css ?

Along with the above library Bootstrap provide some more library Bootstrap Datatable and Bootstrap Table

Bootstrap Datatable Bootstrap Datatable

Bootstrap Table Bootstrap Table

  1. What is the difference between Bootstrap Datatable and Bootstrap Table. When should I use Bootstrap Datatable and BootstrapTable.

  2. If I include Bootstrap.js will I be able to use Bootstrap Datatable Bootstrap Table?.

Bootstrap provide jar for both of them

  • dataTables.bootstrap.js

  • bootstrap-table.js

This is the screen short form official site of bootstrap enter image description here

Why I am asking because. I faced an strange issue. I was working with Boostrap Table. I include the Bootstrap.js, My Boostrap Table was not working, So I include the bootstrap-table.js and it worked. then what is meaning of this? enter image description here

At the same time when I was facing this issue I asked on Stackoverflow regarding this. and I got this.

enter image description here

after that I included every thing in my page.

<link media="all" rel="stylesheet" type="text/css"
 href="../resources/css/bootstrap-table.css" /> 
<link media="all" rel="stylesheet" type="text/css"
 href="../resources/css/bootstrap.min.css" />
<link media="all" rel="stylesheet" type="text/css"
 href="../resources/css/dataTables.bootstrap.css" />
<link media="all" rel="stylesheet" type="text/css"
 href="../resources/css/bootstrap-dialog.min.css" /> 
 
 <link media="all" rel="stylesheet" type="text/css"
 href="../resources/styles/base.css" />
 
 
<script src="../resources/js/jquery-1.11.2.min.js"></script>
<script src="../resources/js/bootstrap.min.js"></script>
<script src="../resources/js/jquery.dataTables.min.js"></script>
<script src="../resources/js/bootstrap-dialog.min.js"></script>
<script src="../resources/js/dataTables.bootstrap.js"></script>
<script src="../resources/js/bootstrap-table.js"></script>

and I faced a serious issue.What was happening is. I had a bootstrap modal table and i was trying to populate the data from server side.

every thing was fine. but I dont know why the data was not populating in the table. I struggled around 2 days. It dint work. shutdown my system and slept. but when I got in the morning and start the system. same code started working. i dint notice I was relaxed thank God its working.

But today issue forced me to write such long question. I forwarded my code to my senior. Its not working there. Even he struggled a lot. and after around 2 hours of struggled the same code started working I mean the data is populating in Bootstrap table. and I swear we we dint modified any thing.

What is the root cause of this issue?

Varun
  • 4,342
  • 19
  • 84
  • 119
  • 4
    `bootstrap.js` contains only standard bootstrap stuff, i.e. everything documented on the [official bootstrap site](http://getbootstrap.com). If you want to use external bootstrap plugin such as `datatable` or `bootstrap-table` you need to include their specific `js` and `css` files. BAnd the `.min` is only a [minified](https://en.wikipedia.org/wiki/Minification_%28programming%29) version of the standard file. BTW, you should always include default boostrap files before any bootstrap plugin files. – Holt Oct 15 '15 at 14:56

1 Answers1

4
  1. bootstrap.js is the standard version of Bootstrap's javascript. bootstrap.min.js is simply a minified version of the same file; line-breaks and comments are removed to reduce file-size.

In general, you should always use the minified version on production websites since it reduces page-load time for users, and Bootstrap recommends against modifying bootstrap.js directly.

  1. The same applies to bootsrap.css and bootstrap.min.css.

  2. (And 4) Bootstrap Datatable and Bootstrap Table are external libraries built by third-party developers in the style of Bootstrap. They're not officially supported, but you can use them if they suit your needs.

Tim
  • 2,843
  • 13
  • 25