By Carmel SchvartzmanIn this tutorial we'll learn how to create an Accordion with the Twitter Bootstrap. The open source Twitter Bootstrap offers you many widgets to include in your web page with a minimal effortand well design, which can be arranged on a grid system that scales up to 12 columns, and adapts to the mobile device when size decreases.
The Bootstrap is the most widely used CSS3 open source framework for creating responsive web apps, turning front-end web design very fast.
We suppose that you have installed the Twitter Bootstrap in your MVC app. Else, learn in this tutorial how to do it in just 2 minutes
In just 5 minutes we'll build a responsive web page using an Accordion with the Twitter Bootstrap :
The Twitter Bootstrap can be reached & downloaded from the Bootstrap official site : Bootstrap :
Create an HTML web page or an MVC View, but make sure to load the CSS and the .js jQuery scripts in the page:
Now we'll keep COPYING-PASTING HTML markup from the Bootstrap official web site, to reuse it on our web page.
TWITTER BOOTSTRAP ACCORDION
Go to the Bootstrap and copy the Accordion markup :
Then paste it inside your MVC View or your HTML file, putting the button inside the Header of the Panel:
Save & refresh the web page :
Also you'll have all the responsive behavior of the Twitter Bootstrap:
כתב: כרמל שוורצמן