原文：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.
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.
- Download Twitter Bootstrap via this link and the jQuery JavaScript library here.
- Once you have these files downloaded create an easily accessible folder called
bootstrap3tutorial. - Within this folder create a sub-folder called
includesand within theincludessub-folder you will need two more calledbootstrapandjquery. - Extract the contents of the bootstrap download within the
bootstrapfolder and place the latest jQuery library JavaScript file within thejqueryfolder. - Then within the
includesfolder create a blank CSS file calledstyles.css. - Finally within the root
bootstrap3tutorialfolder create a blank HTML file calledindex.html.
After you have completed the above steps you should have a directory structure that looks like the figure below:
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">
<!-- Set the viewport so this responsive site displays correctly on mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 3 Responsive Design Tutorial | RevillWeb.com</title>
<!-- Include bootstrap CSS -->
<link href="includes/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="includes/style.css" rel="stylesheet">
</head>
<body>
<!-- Include jQuery and bootstrap JS plugins -->
<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:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">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.
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.
<!-- Site header and navigation -->
<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.
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.
<!-- Site banner -->
<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.
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.
<!-- Middle content section -->
<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 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'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.
<!-- Site footer -->
<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:
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.
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
