By Carmel Schvartzman
In this tutorial we'll learn how to add the Twitter Bootstrap to your Asp.Net MVC in 5 minutes.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.
In just 5 minutes we'll build a responsive web page with a form and a NavBar using the Twitter Bootstrap with no effort at all:
The Twitter Bootstrap can be reached & downloaded from the Bootstrap official site : Bootstrap :
We'll une the NuGet Manager to install the Bootstrap:
Search for "Bootstrap":
The manager will add CSS & JS files to your project :
In order to use the Bootstrap in every web page, we'll modify the standard _Layout file at MVC Shared folder :
Having added both CSS and JS links, we modify the RouteConfig to browse to our test web page:
Now we add a new Action method & a View to test the Bootstrap :
At the _Layout, we'll first add a NavBar, so go to the Bootstrap web site:
Copy the entire <nav>, & return to the _Layout file:
At the _Layout, take aside the Menu, because we'll use it afterwards:
Then delete the whole <header> :
And paste the NavBar in place of that <Header>, updating the dropdown-menu with our Menu : :
Now find the "body" of the file:
And replace the class for the "container" class :
Rebuild & browse to the web page :
We have already a NavBar. Let's now add the Jumbotron from the Bootstrap site :
Just paste this code to your View:
<div class="jumbotron"> <h1>Hello, world!</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p></div>Let's browse to the page:
Nice ? Now we add an entire form in 30 secs :
Again copy-paste it to your View :
<h2>BootstrapInAction</h2><div class="jumbotron"> <h1>Hello, world!</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p></div><form role="form"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button></form>And we have now :
Our web page is responsive, and can be displayed in mobile also :
The NavBar has collapsed and can be seen again clicking the top-right button :
That's all!! In this tutorial we've learned how to add the Twitter Bootstrap to your Asp.Net MVC in 5 minutes.
Happy programming.....
כתב: כרמל שוורצמן
No comments:
Post a Comment