How to add Bootstrap & jQuery - Mobile Friendly Application
To add Bootstrap and jQuery to Write a Mobile-Friendly and Responsive Web Application
In this article we are going to discuss about jQuery and Bootstrap. By adding this jQuery and Bootstrap to our html coding will allows us to create a Mobile-Friendly and Responsive Web Sites.
Adding jQuery and Bootstrap into our project
To download jQuery
Go to the jQuery official site for downloading stable and latest version. Go to the official link http://jquery.com and download the compressed (.min.js) version of jQuery.
To download Bootstrap
Go to the official linkhttp://getbootstrap.com to download Bootstrap.
After downloading, Go to your download directory and uncompress the bootstrap zip file using unzip command.
root@linuxhelp:~# cd Downloads/ root@linuxhelp:~/Downloads# ls bootstrap-3.3.6.zip jquery-1.12.3.min.js root@linuxhelp:~/Downloads# unzip -a bootstrap-3.3.6.zip root@linuxhelp:~/Downloads# ls bootstrap-3.3.6 bootstrap-3.3.6.zip jquery-1.12.3.min.js
Now a new directory will be created. Move to the newly created directory. Then navigate to the dist directory and list the directories (CSS, fonts, js) inside the directory.
root@linuxhelp:~/Downloads# cd bootstrap-3.3.6/ root@linuxhelp:~/Downloads/bootstrap-3.3.6# ls bower.json _config.yml fonts less package.json CHANGELOG.md CONTRIBUTING.md grunt LICENSE README.md CNAME dist Gruntfile.js nuget test-infra composer.json docs js package.js root@linuxhelp:~/Downloads/bootstrap-3.3.6# cd dist/ root@linuxhelp:~/Downloads/bootstrap-3.3.6/dist# ls css fonts js root@linuxhelp:~/Downloads/bootstrap-3.3.6/dist# ls css/ bootstrap.css bootstrap.min.css.map bootstrap-theme.min.css bootstrap.css.map bootstrap-theme.css bootstrap-theme.min.css.map bootstrap.min.css bootstrap-theme.css.map root@linuxhelp:~/Downloads/bootstrap-3.3.6/dist# ls fonts/ glyphicons-halflings-regular.eot glyphicons-halflings-regular.woff glyphicons-halflings-regular.svg glyphicons-halflings-regular.woff2 glyphicons-halflings-regular.ttf root@linuxhelp:~/Downloads/bootstrap-3.3.6/dist# ls js/ bootstrap.js bootstrap.min.js npm.js
Now copy some files inside the three directories css, fonts and js to our " NetBeansProjects" directory using the following command. Copy the jQuery file that we have downloaded, early to the NetBeansProject directory.
root@linuxhelp:~/Downloads/bootstrap-3.3.6/dist# cp css/bootstrap.min.css /home/user1/NetBeansProjects/linuxhelp/public_html/data-styles
root@linuxhelp:~/Downloads/bootstrap-3.3.6/dist# cp fonts/* /home/user1/NetBeansProjects/linuxhelp/public_html/fonts
root@linuxhelp:~/Downloads/bootstrap-3.3.6/dist# cp js/bootstrap.min.js /home/user1/NetBeansProjects/linuxhelp/public_html/scripts
root@linuxhelp:~/Downloads/bootstrap-3.3.6/dist# cp /home/user1/Downloads/jquery-1.12.3.min.js /home/user1/NetBeansProjects/linuxhelp/public_html/scripts
The structure of your site in Netbeans look like this, after copying the above mentioned files.
To write Responsive mobile friendly web application
Write your own html coding to develop a mobile friendly web application or else you can use our sample code given below for testing purpose.
Example HTML code for Responsive web design
Execute the code below, by copy and pasting the code into the index.html file under the site root of your project.
< !DOCTYPE html> < html> < head> < meta charset=" utf-8" > < title> jQuery and Bootstrap< /title> < /head> < body> < div class=" container" > < nav class=" navbar navbar-default" > < div class=" container-fluid" > < div class=" navbar-header" > < button type=" button" class=" navbar-toggle collapsed" data-toggle=" collapse" data-target=" #navbar" aria-expanded=" false" aria-controls=" navbar" > < span class=" sr-only" > Toggle navigation< /span> < span class=" icon-bar" > < /span> < span class=" icon-bar" > < /span> < span class=" icon-bar" > < /span> < /button> < a class=" navbar-brand" href=" #" > Linux Help< /a> < /div> < div id=" navbar" class=" navbar-collapse collapse" > < ul class=" nav navbar-nav" > < li class=" active" > < a href=" #" > Home< /a> < /li> < li> < a href=" #" > About Us< /a> < /li> < li> < a href=" #" > Contact Us< /a> < /li> < li class=" dropdown" > < a href=" #" class=" dropdown-toggle" data-toggle=" dropdown" role=" button" aria-haspopup=" true" aria-expanded=" false" > Dropdown < span class=" caret" > < /span> < /a> < ul class=" dropdown-menu" > < li> < a href=" #" > Databases< /a> < /li> < li> < a href=" #" > File Systems< /a> < /li> < li> < a href=" #" > Advanced Commands< /a> < /li> < li role=" separator" class=" divider" > < /li> < li class=" dropdown-header" > Security and Firewall< /li> < li> < a href=" #" > Security< /a> < /li> < li> < a href=" #" > Firewall< /a> < /li> < /ul> < /li> < /ul> < /div> < !--/.nav-collapse --> < /div> < !--/.container-fluid --> < /nav> < /div> < /body> < /html>
After copying the sample html code into index.html file just drag and drop below mentioned files from the project navigator section to the html code, in between the and tags
Files to drag and drop into html code
Filename Location
jquery-1.12.3.min.js located under scripts folder under site root of your project.
bootstrap.min.js located under scripts folder under site root of your project.
bootstrap.min.css located under data-styles folder under site root of your project.
After adding jquery and bootstrap file into your html coding choose your default browser and click the play button to open and see your output in a selected web browser.
According to the screen size of a device, the page will be automatically resized to view the full content of the webpage within that screen size of the device.
verb
Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops