In this tutorial we'll learn how to use the Breadcrumb Component of the Twitter Bootstrap as a Menu. The Twitter Bootstrap includes plugins, components and widgets for you to use into your web page with proved responsiveness and elegant design.
Twitter Bootstrap is the most widely used and most popular CSS3 framework for implementing responsive web apps, making front-end design fast and easy.
If you don't have already installed the Twitter Bootstrap in your MVC app , learn in this tutorial how to install it in 5 minutes
In just 5 minutes we'll build a responsive web page using the Breadcrumb Component of the Twitter Bootstrap :
The Twitter Bootstrap can be downloaded from the Bootstrap site : Bootstrap :
Make an HTML web page or an MVC View, but be sure to import the CSS and the .js jQuery scripts in the page:
TWITTER BOOTSTRAP Breadcrumb
Go to the Bootstrap and copy the Breadcrumb markup :
Then paste it inside your MVC View:
The markup is the following:
<div>
<ol class="breadcrumb" style="margin-bottom: 5px;">
<li><a href="/Twitter">Twitter</a></li>
<li><a href="/Twitter/Components">Components</a></li>
<li class="active">Breadcrumb</li>
</ol>
</div>
Save & refresh the web page :
And of course, the Breadcrumb is fully responsive on mobile devices and tablets:
That's all!! In this tutorial we've learned how to use the Breadcrumb Component of the Twitter Bootstrap as a Menu.
Happy programming.....
By Carmel Schvartzman
כתב: כרמל שוורצמן
No comments:
Post a Comment