By Carmel SchvartzmanIn this tutorial we'll learn how to add Twitter Bootstrap jQuery Plugins to an Asp.Net MVC App. For this tutorial we'll import two useful jQuery plugins : the Tooltip & the Popover jQuery Plugins .
The 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 Tooltip & the Popover jQuery Plugins of the Twitter Bootstrap with no effort at all:
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 :
Having upgraded the jQuery .js files, we next install the Twitter Bootstrap framework, using NuGet: made a search for the keyword "Bootstrap" :
The Tooltip Twitter Bootstrap jQuery Plugin
Then go to the Tooltip Plugin :
The Popover Twitter Bootstrap jQuery PluginDo the same for the Popover Plugin, which is an extension of the former plugin :
At your HTML file, insert all the code inside a "container" :
Then add the links for the Css files :
Finally, to enable the plugins for the DOM elements you want, make a call to the following Plugin methods :
Browse to your page & you'll see the Tooltips on the buttons, made responsive as part of the Twitter Bootstrap:
And this is the Popover Plugin in action :
That's all!! In this tutorial we've learned how to add Twitter Bootstrap jQuery Plugins to an Asp.Net MVC Application.
כתב: כרמל שוורצמן