Where in the HTML file should Jquery and Bootstrap be placed?
Typically stylesheets in the head and scripts before the closing
<html> <head> <link rel="stylesheet" href="bootstrap.css"> <link rel="stylesheet" href="your-other-styles.css"> </head> <body> <!-- content --> <script src="jquery.js"></script> <script src="bootstrap.js"></script> <script src="your-other-scripts.js"></script> </body> </html>
You’ll want files from vendors such as jQuery and Bootstrap to be included before yours. This means that:
- CSS: You can override their styles with your own*
- Scripts: You have access to any objects added to the global scope such as
However, if you require a script to be available before your content loads (such as Modernizr), then putting it in the
<head> ensures it’s ready before any of your content.
Including scripts at the bottom ensures that the actual page content is loaded first; when the scripts are finally downloaded the content (DOM) will be ready for your scripts to manipulate.
* assuming your selector specificity is at least equal to those in your vendor CSS
Bottom is best to place all your script references at the end of the page before
</body>.It should look like below in normal page.
You can decorate your script tags with the
defer attribute so that the browser knows to download your scripts after the HTML has been downloaded:
<script src="demo_async.js" async></script>
When present, it specifies that the script will be executed asynchronously as soon as it is available.
If you need script to access in page for use then script need to available before using it. Although it need to be sure the browser support defer=”defer”. Async is supported by all major browsers.
Style css need to present in top
<Head> to access in page.
It really depends on what you want to achieve, but generally JS is placed at the bottom and CSS in your head section. Make sure that jquery library loads before Bootstrap’s JS library and your custom css file loads after Bootstrap’s CSS, so it will override. You can load Bootstrap’s CSS from their CND (or others, like cloudflare – for example http://cdnjs.com/libraries).
Make sure you minify all that & activate compression and you shouldn’t experience any performance issues.
Advanced technics imply using the most important part of your CSS in your head area, then send the rest of the CSS in the bottom area. Or have your whole static content (CSS + JS) hosted on a CDN.
- Database Administration Tutorials
- Programming Tutorials & IT News
- Linux & DevOps World
- Ebook Reviews
- PES Matches, Skills & News