This tutorial aims to allow you to learn how to use Twitter Bootstrap to create a site within 20 minutes. After reading this tutorial, you should be able to use Bootstrap to create a page with a basic responsive layout, understand the grid system, and be able to use Bootstrap navigation, navigation bar, and understand the basis of responsive design. All of these are the knowledge required to use Twitter Bootstrap.
View demo online
First of all, we need to say that Twitter Bootstrap is a very good front-end open-source framework that provides detailed use cases for all group keys, this allows you to easily attach a copy or paste to your design. Click here to view the official documentation.
Basic HTML TemplateIf you are afraid of English, click here to read the Chinese version.
-- Desert
We need to use a basic HTML template so that we can include the required Bootstrap file. The following is the purpose of Twitter bootstrap. copy the code to a file and name it index.html.
<!DOCTYPE html>In this Code, we have added some CSS to make the page background light gray, because we can easily see different columns in our design to make it easier to understand.
Introduce the Twitter Bootstrap FileTo use Twitter Bootstrap, we only need to introduce a file to our template. There are many methods to introduce the file. For more information about these methods, see the relevant documentation.
Based on this tutorial, we will use cdnto import the bootstrap-combined.min.css file without downloading any files.
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">It enables all Twitter Bootstrap CSS to take effect in our template.
Twitter Bootstrap containerThe bootstrap container class is very useful. It can create a center area on the page, and then we can put the content from other locations in it. The container class is equivalent to creating a center Div box with a static width and a magin value of auto. The container class of Twitter Bootstrap has the advantage that it is responsive and will calculate the best width based on the current screen width for practical use.
In the body tag, create a div using the container class. It serves as an outer package for storing other code on the page.
If you adjust the height of the DIV and set the background color to white, you will see the following effect:
Title and navigationNow we have a place to add additional HTML code. We can add the title text and then create the main navigation bar of the site.
Add the following text or selected text to the DIV label of the iner class.
There aren't many new things. This is just a title. Let's move to a more interesting aspect, Twitter Bootstrap navigation.
Bootstrap has a Nav class that allows us to create a variety of navigation elements. You can add the following code after the H1 tag.
<div class=‘navbar navbar-inverse‘> <div class=‘nav-collapse‘ style="height: auto;"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page One</a></li> <li><a href="#">Page Two</a></li> </ul> </div></div>Navbar-related classes have all the styles of the navigation bar. Adding the navbar-inverse Class will apply a cool black style, which is a common combination of Twitter Bootstrap. I suggest you expand on the basis of this style to create your unique navigation. However, in this tutorial, we will still use the basic Bootstrap style.
In the DIV whose class is navbar, we add another Div whose class is Nav-collapse and add the row style Height: auto; this tells Bootstrap that when the page is in a browser window smaller than the 970px width, it will provide a compressed switching view.
If you save the index.html file and open it in the browser, you can see this change when you adjust the width of the browser window ,.
Greater than 979px
Smaller than 979px
In addition, we can add the Nav class to an HTML unordered list element to apply more styles from the bootstrap CSS file, or add an active class to the "home" list item.
Main Content and sidebarWe have completed the main navigation of the site. Now we need to add a main content area and a sidebar to support more links or navigation paths. Add the following code to the navigation bar.
<div id=‘content‘ class=‘row-fluid‘> <div class=‘span9 main‘>This is exactly what we need to understand about the bootstrap raster system. Of course, the official Bootstrap documentation covers more details, but we will start with the basics so that you can better understand it.
The raster system uses a 12-column layout, which means that a page can be split into 12 identical columns. The image shown in the bootstrap official document below is a good demonstration.
In the code we just pasted under the navigation bar, you can see the classes named span9 and span3. They split the page into the width of the nine columns on the left and the width of the three columns on the right to form our content area and sidebar. One of the advantages of the raster system is that it dynamically calculates the column width based on the window width, therefore, you do not need to write any media queries to make your site work at any screen resolution.
You can observe the effect by changing the number of spans and the size of the browser. When the content area is smaller than PX, these columns are stacked vertically.
Now we put the following text or any other text after the H2 tag in the main content area, just to lengthen the page a little.
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in 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 claritatem. 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 seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>Now the site is shown as follows:
Sidebar navigationHere you can see all the navigation elements provided by Twitter Bootstrap for us.
We will use the vertical tab to create an additional navigation area. Copy and paste the following code to the H2 tag of the sidebar.
<ul class="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 demonstration! The code above is simply an unordered list with classes nav-tabs and nav-stacked, but it creates a navigation panel for us.
Looking at the final result, a responsive design page based on Twitter Bootstrap is complete.
ConclusionBased on the features provided by Twitter Bootstrap, we have provided this very fast basic Bootstrap tutorial. However, I will spend some time practicing and reading more official documents, soon you will be a bootstrap expert.
After reading this tutorial, you should understand 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 information in the comment area below. Thank you for reading this article.
Translator's sign language:The whole translation is carried out in accordance with the original line, and a personal understanding of the technology is added in the translation process. If there is something wrong with the translation, please contact your colleagues. Thank you!
Original English address
Chinese translation address
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
