Bootstrap tutorial: A responsive design tutorial with Twitter Bootstrap 3

柔光的暖阳◎ 2022-08-23 09:54 22阅读 0赞

原文：http://www.revillweb.com/tutorials/bootstrap-tutorial/

# Introduction #

This **bootstrap tutorial** will show you how to create a responsive template using twitter bootstrap 3. We will create a responsive banner and navigation menu along with a responsive two column content layout and a three section footer. We will also expand the twitter bootstrap CSS to create the design shown below.

![bootstrap-tutorial-1.png][]

Learn to create this responsive design

# Getting ready #

Before you start this tutorial there are various libraries you will need. Follow the steps below to get set-up and ready to begin the tutorial.

1.  Download Twitter Bootstrap via this link and the jQuery JavaScript library here.
2.  Once you have these files downloaded create an easily accessible folder called `bootstrap3tutorial`.
3.  Within this folder create a sub-folder called `includes` and within the `includes` sub-folder you will need two more called `bootstrap` and `jquery`.
4.  Extract the contents of the bootstrap download within the `bootstrap` folder and place the latest jQuery library JavaScript file within the `jquery` folder.
5.  Then within the `includes` folder create a blank CSS file called `styles.css`.
6.  Finally within the root `bootstrap3tutorial` folder create a blank HTML file called `index.html`.

After you have completed the above steps you should have a directory structure that looks like the figure below:

![bootstrap-tutorial-2.png][]

You should now have the following directory structure

Alternatively for quick set-up or to check you have it correct, download the completed tutorial files here.

# Bootstrap responsive HTML document #

Before you can start development on your responsive bootstrap template you need to set-up the HTML document with the required files included and the appropriate meta tags. Add the following HTML code to `index.html` which will create a blank HTML web page with the required bootstrap CSS files and the bootstrap JavaScript plugins with jQuery.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 3 Responsive Design Tutorial | RevillWeb.com</title>
        
        <link href="includes/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="includes/style.css" rel="stylesheet">
    </head>
    <body>
    
    
    <script src="includes/jquery/jquery-2.1.0.min.js"></script>
    <script src="includes/bootstrap/js/bootstrap.min.js"></script>
    </body>
    </html>

The JavaScript files are included at the bottom of the page instead of traditionally including them within the `<head>`. This is to save on page load times. The browser will load content procedurally from the top therefore it is better to load large JavaScript files at the end of the page after the content and CSS has loaded providing a better experience for the website viewer.

Within the `<head>` of the HTML document the following two meta data tags are used:

The first is to correctly set the character encoding to prevent text display issues and the second is to tell mobile devices how to display the web page. Most mobile devices will try and display a website intelligently by changing the scale to fit on the mobile screen. This meta tag tells the mobile browser to display the web page as is, allows us, the developer to control exactly how the page is to be displayed: Read more about viewport [ here][here].

# Bootstrap header and responsive navigation bar #

**Twitter bootstrap** provides a set of CSS classes that can be used to easily create navigation menus and navigation bars. Additionally it also provides extra functionality to make the navigation menu responsive with the ability to toggle it in a mobile view. As always the **Twitter Bootstrap 3** documentation is excellent, read more about Twitter Bootstrap Navigation on their site via this [link][].

This **bootstrap tutorial** shows you how to create a responsive navigation bar as part of this responsive template. Add the following HTML code within the `<body>` tags in `index.html`.

<header class="top" role="header">
        <div class="container">
            <a href="#" class="navbar-brand pull-left">
                BS3 TUTORIAL
            </a>
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="glyphicon glyphicon-align-justify"></span>
            </button>
            <nav class="navbar-collapse collapse" role="navigation">
                <ul class="navbar-nav nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

The header and nav tags are new HTML5 tags that provide added definition to your HTML code, it is advised to use these tags where possible.

The button element with the `navbar-toggle` class is the button that will show when the website is viewed on a mobile device or through a small browser window. This button will allow the user to toggle the menu open and closed, saving space. To provide this functionality the data attributes show below:

`data-toggle="collapse"``data-target=".navbar-collapse"`

Are added to allow bootstrap’s JavaScript to hide or show the target element.

![bootstrap-tutorial-3.png][]

How the navigation menu differs on a small device

The division element with the container class which wraps all the header content is re-sized using media queries based on the viewport size. This will keep the header content in the center of the screen with the appropriate margins on either side. The container elements width will be set to either 1200px, 992px or 768px depending on the device or browser size.

# Adding a banner to your bootstrap template #

Using the `container` class again we can easily add a banner section to the template. Add the following HTML code within the `<body>` tags under the header HTML you have just added.

<div class="banner">
        <div class="container">
            <h1>Twitter Bootstrap 3: Responsive Design Tutorial</h1>
            <p>A comprehensive tutorial showing you how to quickly create responsive designs using Twitter Bootstrap 3.</p>
        </div>
    </div>

# Using bootstrap’s grid system to create a content area #

Twitter bootstrap utilizes a 12 column grid system allowing the developer to easily create a wide range of responsive grids and column designs. To learn more about how you can use Twitter Bootstraps grid system, visit their documentation [here][here 1].

This **bootstrap tutorial** will show you how to use the bootstrap grid system to create the popular right column layout. Add the following HTML code after the banner code you have just added.

<div class="middle">
        <div class="container">
            <div class="col-md-9 content">
                <h2>Use Twitter Bootstrap to create responsive designs for desktop, tablet & mobile</h2>
                <p>Twitter bootstrap allows web developers and designers to quickly create attractive and responsive website templates. This tutorial provided by <a href="http://www.revillweb.com/">RevillWeb.com</a> will show you how to use Twitter Bootstrap 3 to create this responsive website template.</p>
                <div class="to-tutorial">
                    <p><strong>Visit the tutorial now to learn more:</strong></p>
                    <a href="http://www.revillweb.com/tutorials/bootstrap-tutorial/" class="btn btn-success">TO THE TUTORIAL</a>
                </div>
            </div>
            <div class="col-md-3">
                <h2>Resources</h2>
                <ul class="nav nav-pills nav-stacked">
                    <li><a href="http://getbootstrap.com/" target="_blank">Download Twitter Bootstrap</a></li>
                    <li><a href="https://www.bootstrapresponsivethemes.com/" target="_blank">Bootstrap Responsive Themes</a></li>
                    <li><a href="http://amzn.to/1iO8NBg" target="_blank">UK: HTML & CSS: Design and Build Web Sites</a></li>
                    <li><a href="http://amzn.to/1lESKDp" target="_blank">UK: Bootstrap Site Blueprints</a></li>
                    <li><a href="http://amzn.to/1oXAbu6" target="_blank">US: HTML & CSS: Design and Build Web Sites</a></li>
                    <li><a href="http://amzn.to/1lESF2w" target="_blank">US: Bootstrap Site Blueprints</a></li>
                </ul>
            </div>
        </div>
    </div>

Once again the `container` class is used to keep the content inline with content from other sections of the template. To create the left and right sections of the main content area the `col-md-9` and `col-md-3` classes are used. The 9 and 3 represent the number of columns to use for each section (out of 12). Bootstrap will then use this to apply the correct widths, margins and padding for each of the sections depending on the screen size it is being viewed on.

The `md` is for medium sized screens, follow this [ link][link 1] to learn about the additional `xs` (extra-small), `sm` (small) and `lg` (large) grid options available and how to use them.

This code is also utilizing bootstraps navigation classes `nav nav-pills nav-stacked` to create a stacked navigation menu in the right hand panel where a list of bootstrap resources is provided.

When this website is viewed on a mobile browser the right hand column will be pushed under the left hand column so that all the content is visible on screen.

![bootstrap-tutorial-4.png][]

Bootstrap's responsive columns adapt to screen size

# Creating a bootstrap responsive footer #

Using the grid system we can easily create a three sectioned footer for our template. Add the following code to `index.html`.

<div class="bottom">
        <div class="container">
            <div class="col-md-4">
                <h3><span class="glyphicon glyphicon-heart"></span> Footer section 1</h3>
                <p>Content for the first footer section.</p>
            </div>
            <div class="col-md-4">
                <h3><span class="glyphicon glyphicon-star"></span> Footer section 2</h3>
                <p>Content for the second footer section.</p>
            </div>
            <div class="col-md-4">
                <h3><span class="glyphicon glyphicon-music"></span> Footer section 3</h3>
                <p>Content for the third footer section.</p>
            </div>
        </div>
    </div>

This code is essentially the same as the main content area code except three division elements are used with the `col-md-4` class using four columns out of 12 each. Again these columns are wrapped within a `container` division element to keep them all inline.

As with the main content section, each of the columns will stack under each other when there is no room to display them in-line, such as on a mobile device.

# Making it your own #

Even though twitter bootstrap can be used to create stunning designs with only the provided CSS classes, adding you own CSS to apply additional style is advised.

Add the following CSS to the `style.css` file you created earlier to add a **RevillWeb** theme to your newly created template – you can then adapt this to create your own design.

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
    h1, h2, h3, h4 { 
        font-family: 'Lato', sans-serif;
        font-weight: 300;
    }
    p { 
        font-family: 'Lato', sans-serif;
    }
    html { 
        background-color: #474747;
    }
    .top { 
        background-color: #474747;
    }
    .top .navbar-brand { 
        height: 50px;
        line-height: 50px;
        text-align: center;
        padding: 0 10px;
        background-color: #CCC;
        color: #474747;
        text-decoration: none;
    }
    .top .container { 
        padding: 0;
    }
    .banner { 
        background-color: #373737;
    }
    .banner .container { 
        background-color: #009b9b;
        min-height: 200px;
        padding: 40px 30px 30px 40px;
    }
    .banner .container p { 
        font-size: 22px;
        padding-left: 5px;
        font-weight: 300;
    }
    .middle { 
        background-color: #CCC;
    }
    .middle .container { 
        background-color: #FFF;
        min-height: 300px;
        padding-bottom: 20px;
    }
    .navbar-nav li a { 
        color: #CCC;
        font-family: 'Lato', sans-serif;
    }
    .navbar-nav li a:hover { 
        background-color: #373737;
    }
    .bottom { 
        background-color: #474747;
    }
    .bottom .container { 
        background-color: #373737;
        min-height: 150px;
    }
    .bottom .container h3 { 
        color: #999;
    }
    .bottom .container p { 
        color: #666;
    }
    .navbar-toggle { 
        color: #009b9b;
        font-size: 32px;
        margin: 3px;
        padding: 2px 5px;
        line-height: 32px;
    }
    .navbar-toggle:hover { 
        background-color: #373737;
    }
    .navbar-nav { 
        margin: 0;
    }
    
    .content p { 
        line-height: 30px;
        font-size: 16px;
    }
    .to-tutorial { 
        text-align: center;
    }

With the above CSS you will have the following final product:

![bootstrap-tutorial-1.png][]

And the final complete responsive design template

# Conclusion #

This bootstrap tutorial showed you how easy it is to create responsive templates using Twitter Bootstrap 3. The best way to fully understand how Twitter Bootstraps responsive framework works is to read through the documentation as you are creating templates and experiment with the different classes and components available. I really hope this bootstrap tutorial was useful and that you can now go an create your own responsive designs.

If you are going to be creating Twitter Bootstrap templates or are looking to quickly get your hands on some, head over to our good friends at [Bootstrap Responsive Themes][] now.

[bootstrap-tutorial-1.png]: http://www.revillweb.com/revillweb-theme/images/post-images/bootstrap-tutorial-1.png
[bootstrap-tutorial-2.png]: http://www.revillweb.com/revillweb-theme/images/post-images/bootstrap-tutorial-2.png
[here]: http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
[link]: http://getbootstrap.com/components/#nav
[bootstrap-tutorial-3.png]: http://www.revillweb.com/revillweb-theme/images/post-images/bootstrap-tutorial-3.png
[here 1]: http://getbootstrap.com/css/#grid
[link 1]: http://getbootstrap.com/css/#grid-options
[bootstrap-tutorial-4.png]: http://www.revillweb.com/revillweb-theme/images/post-images/bootstrap-tutorial-4.png
[Bootstrap Responsive Themes]: https://www.bootstrapresponsivethemes.com/