Home > Developer > JavaScript
In 20 minutes, you can easily create your own Bootstrap site and create a bootstrap site.
The main purpose of this article is to allow you to learn how to use twitter bootstrap to create a website within 20 minutes. The following describes how to create a website:
The first thing to say is:Twitter bootstrapIt is a very good front-end open-source framework. It provides detailed use cases for all group keys, so that you can easily copy and paste them and attach them to your design.
Basic HTML Template
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 File
To 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.
Copy codeThe Code is as follows: href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel = "stylesheet">
Twitter bootstrap CSS takes effect in our template.Twitter Bootstrap container
The 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 navigation
Now 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.
<H1> twitter bootstrap tutorial 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.
A wonderful article on Bootstrap navigation: Guide to daily learning of bootstrap and guide to daily learning of Bootstrap
Main Content and sidebar
We 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.
Copy codeThe Code is as follows: psum 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 region nulla facilisis at Fig. 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 litw.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 navigation
You can see all the navigation elements provided by Twitter bootstrap here (twitter.github.com/bootstrap/components.html#navs.
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.
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.
For more information about Bootstrap, refer to the topic for more information:Bootstrap learning tutorial
All of the above are the knowledge needed to use twitter bootstrap. I hope it will be helpful to everyone's learning and I hope you can spend more time and make it happen to me, soon you will be a bootstrap expert.
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
