Wednesday, July 9, 2014

Step by step how to add the Twitter Bootstrap to your web site in 5 minutes

        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