Source: http://www.w3cplus.com/css/twitter-bootstrap-tutorial.htmlSpecial Statement: This article by White Fang according to Leon Revill's English article formerly known as "Twitter Bootstrap Tutorial–up and running with Twitter Bootstrap in Minutes" "Translation, the entire translation with our own understanding and thinking, if the translation is not good or wrong place also please peer friends pointing." If you want to reprint this translation, please specify the English source: Http://www.revillwebdesign.com/twitter-bootstrap-tutorial and the relevant information of the author
--leon Revill
--Translator: White tooth
This tutorial is designed to allow you to learn to use Twitter bootstrap to create a site in 20 minutes. After reading this tutorial you should be able to use bootstrap to build a basic responsive layout page, understand the raster system, and be able to use bootstrap navigation, navigation bars, and understanding of the basics of responsive design. These are all the knowledge needed to use Twitter bootstrap.
View Demo Online
The first thing we need to say is that Twitter bootstrap is a very good front-end open-source framework that provides a detailed use case for all the group keys, allowing you to easily attach to your design by copying the paste. Check the official documentation here.
Basic HTML templatesIf you have a fear of English, you can click here to read the Chinese version.
--Desert
We need to have a basic HTML template so that we can include the required bootstrap files. Here's the beginning of our Twitter bootstrap project, copy the code into a file and name it index.html.
<! DOCTYPE html><head> <title>twitter Bootstrap tutorial-a Responsive layout tutorial</title> <style type= ' text/css ' > body { Background-color: #CCC; </style> </ head> <body> </body></HTML>
In this code we have added some CSS to make the background of the page bright gray, because we can easily see the different columns in our design to make it easier to understand.
Introducing Twitter Bootstrap filesIn order to use Twitter bootstrap we just need to introduce a file into our template, there are many ways to introduce a file, and if you want to learn about these methods, please refer to the relevant documentation.
Based on the starting point of this tutorial, we will introduce the Bootstrap-combined.min.css file via a CDN without having to download any files.
<href=rel="stylesheet" >
It enables all Twitter bootstrap CSS to take effect in our templates.
A container for Twitter bootstrapThe container class of bootstrap is very useful, it can create a center area in the page, and then we can put the contents of other locations inside. The container class is equivalent to creating a centered div box with a static width and a magin value of auto. The advantage of Twitter's Bootstrap container class is that it is responsive, and it is practical to calculate the optimum width based on the width of the current screen.
In the Body tab, use the container class to create a div. It will be the main place for the page to put other code in the outer package.
If you adjust the height of the div and set its background color to white, the effect you see is this:
Title and navigationNow that we have a place to add extra HTML code, we can add the title text and then create the site's main navigation bar.
Add the following text or text of your choice to the div tag of the container class.
<h1>twitter BOOTSTRAP TUTORIAL</h1>
Now there's not much new stuff, this is just a headline, let's move on to the more interesting aspects of Twitter bootstrap navigation.
Bootstrap has a Nav class that allows us to create a wide variety of navigation elements, and you can add the following code after the H1 tag.
<Divclass=' NavBar navbar-inverse ' ><Divclass=' Nav-collapse 'style="Height:auto;" ><Ulclass="NAV" ><Liclass="Active" ><Ahref="#" >home</a></li> <li><a href="#" >page one</ a></li> <li><a href="#" >page,</a> </li> </ul> </div></div>
NavBar related classes have all of the navigation bar styles, adding Navbar-inverse classes will apply a cool black style, a common mix of Twitter bootstrap. I suggest expanding on this style to create your own unique navigation. However, in this tutorial we will still use the underlying bootstrap style.
In the class NavBar Div, we add another div with the Nav-collapse class and add inline style height:auto to it, which tells Bootstrap when the page is in a browser window less than 970px wide, It will provide a compressed switch view.
If you save the index.html file and then open it in the browser, you will be able to see the change when you resize the width of the browser window.
Greater than 979px
Less than 979px
In addition, we can add a NAV class to an HTML unordered list element to apply more styles from the bootstrap CSS file, or you can add an active class to the "HOME" list item.
Main content and SidebarWe have completed the main navigation of the site, and now we need to add the primary content area and a sidebar to support more links or navigation paths. Please add the following code to the navigation bar.
<div id= Content ' class= ' row-fluid ' > < div class= ' span9 main ' > < h2>main Content section</h2> </div> <div class= ' span3 Sidebar ' > < H2>sidebar</h2> </div ></DIV>
This is the bootstrap grid system we need to understand, and of course, Bootstrap's official documentation covers more details, but we'll start with the basics and get you to understand it better.
The grid system takes advantage of the layout of 12 columns, which means that a page can be split into 12 identical columns. Here's a good show from the image you get from the official bootstrap document.
In the code that we just pasted under the navigation bar, you can see the class named Span9 and Span3. They divide the page into two parts of the left 9-column width and the 3-column width on the right, forming our content area and sidebar. One of the benefits of using a raster system is that it dynamically calculates the width of the dequeue based on the window width, so you don't have to write any media queries to make your site work at any screen resolution.
You can see the effect by changing the number of spans and resizing the browser. You'll notice that when the content area is less than 724px, the columns are stacked vertically.
Now we put the following text or any other text in the main content area after the H2 tag, just to lengthen the page a bit.
<p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet Dolo Re magna aliquam erat volutpat. UT wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo conse Quat. Duis autem vel eum iriure dolorIn hendreritIn vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto Odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming ID quod mazim placerat facer possim assum.</p> <p>typi non habent claritatem insitam; est usus legentis in IIS qui facit eorum claritate M. investigationes demonstraverunt lectores legere me lius quod II Legunt Saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, Anteposuerit litterarum formas humanitatis per SEAC ULA Quarta Decima et Quinta Decima. Eodem modo typi, qui nunc nobis videntur parum Clari, Fiant sollemnes in Futurum. </p>
Now the site will appear as follows:
Side Bar NavigationYou can see here all the Twitter bootstrap provided for us by the navigation elements.
We're going to use the vertical tab to create an extra navigation area. Copy and paste the following code after the sidebar H2 tag.
<Ulclass="Nav nav-tabs nav-stacked" ><Li><a href= ' # ' >another Link 1</a></li> <li><a href= ' # ' >another Link 2</ a></li> < li><a href= ' # ' >another Link 3</a></ li></UL>
This is a simple show! The above code literally understands just a unordered list with classes of Nav-tabs and nav-stacked, but it creates a navigation panel for us.
Looking at the final effect, a page with a responsive design based on Twitter bootstrap is done.
ConclusionWith the features offered by Twitter Bootstrap, we've given this very fast bootstrap basic tutorial, but take the time to practice and review the official documentation, and soon you'll be a bootstrap expert.
After reading this tutorial you should know how to use the raster system, the basic principles of different types of navigation and responsive design.
If you have any questions or feedback, please leave your message in the comments section below and thank you for your reading.
Translator Sign Language: the entire translation according to the original line, and in the process of translation slightly personal understanding of the technology. If the translation has the wrong place, also please peer friend pointing. Thank you!
about White TeethCurrently enrolled in South China Normal University, now living in Guangzhou. 2013 began to learn CSS3,HTML5 and other cutting-edge technologies. Please follow me: Sina Weibo.
If you want to reprint please indicate the source:
English Original: Http://www.revillwebdesign.com/twitter-bootstrap-tutorial
Chinese translation: http://www.w3cplus.com/css/twitter-bootstrap-tutorial.html
20 minutes to build your bootstrap site
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
