By Carmel Schvartzman
In this tutorial we'll learn how to add the Twitter Bootstrap to the jQueryUI widgets in Asp.Net MVC. The Bootstrap includes many very useful components and also a responsive grid system that scales up to 12 <div>s columns, and adapts itself to the device when size decreases.Here we'll merge the jQueryUI theme with the Twitter Bootstrap framework, using an outstanding example set up by dipesh.parmar in the following Runnable project.
Bootstrap is the more widely used and more popular CSS3 framework for developing responsive web apps, making front-end web design very fast and easy.
We'll build a responsive web page using the jQueryUI snippets merged with the Twitter Bootstrap with no effort at all:
The Twitter Bootstrap jQueryUI Merge
First think that's advisable to do is to update the jQuery and the jQueryUI scripts in your MVC application, using NuGet, so that you get the upgraded versions of the scripts :
Then browse to the project build by dipesh.parmar in the following Runnable project:
If you cannot download and/or see the included files, it's because you are not a member yet, so take 1 minute and log on to Runnable.Copy the HTML markup , and paste it inside the View or in a HTML file:
As you can see, the <HEAD> includes several links to CSS files : all you have to do is import from Runnable those files and put them exactly in the folder as you can see in the Runnable project:
After you set up all the CSS folders & files, take a look at the 5 javascript files we are needing (at the footer of the HTML file):
Therefore copy and arrange all these js files in your application, respecting its folder structure:
That's how your project's file system should appear at the end:
Now, because earlier you upgraded your jQuery & jQueryUI files, you can update the links to use the latest versions:
Browse to your page & you'll see the jQueryUI template made responsive and merged with the Twitter Bootstrap:
That's all!! In this tutorial we've learned how to add the Twitter Bootstrap to the jQueryUI widgets in Asp.Net MVC.
Happy programming.....
כתב: כרמל שוורצמן
No comments:
Post a Comment