20 minutes easy to create your own bootstrap site _javascript tips

The main purpose of this article is to learn how to use Twitter bootstrap to create a site in 20 minutes, and how to set up a site, which is described below:

The first thing to say is that Twitter bootstrap is a very good front-end open source framework that provides detailed use cases for all of the group keys, allowing you to easily attach to your design by duplicating the paste.

Basic HTML templates

We need to use a basic HTML template so that we can include the required bootstrap files. The following is the beginning of our Twitter bootstrap project, copying the code into a file and naming it index.html.

<! DOCTYPE html>
 
 

In this code we have added some CSS to make the background of the page bright gray so that we can easily see the different columns in our design to make it easier to understand.

Introducing Twitter Bootstrap files

In order to use the Twitter bootstrap we just need to introduce a file into our template, there are a number of ways to introduce files, if you want to know these methods please consult the relevant documentation.

Based on the starting point of this tutorial, we will introduce BOOTSTRAP-COMBINED.MIN.CSS files via CDN without downloading any files.

Copy Code code as follows:

href= "Http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel= "stylesheet" >

The Twitter bootstrap CSS takes effect in our templates.

A container for Twitter bootstrap

The Bootstrap container class is useful for creating a centered 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 the Twitter Bootstrap container class is that it is responsive, and calculates 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 act as the main layer of the page to place other code on the outer package.

If you adjust the height of this div and set its background color to white, the effect you see will be this:

Title and navigation

Now that 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 your selected text to the div tag of the container class.

now there's not much new stuff, it's just a headline, let's move on to more interesting aspects of Twitter bootstrap navigation.

Bootstrap has a Nav class that allows us to create a variety of navigation elements, and 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, a common pairing of a Twitter bootstrap. I suggest expanding on the basis of this style to create your unique navigation. But in this tutorial we will still use the base bootstrap style.

In the div with class NavBar, we add another div with nav-collapse and add inline style height:auto to it. This is to tell Bootstrap when this page is in a browser window less than 970px wide, It provides a compressed, switched view.

If you save the index.html file and open it in the browser, you can see the change as you adjust the width of the browser window, as shown in the figure.

Greater than 979PX:

Less than 979px:

Alternatively, 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.

About bootstrap navigation wonderful articles to share: "Bootstrap every day must learn the navigation", "bootstrap every day must learn the navigation bar"

Main content and Side bar

We 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 ' >
    
 

This is exactly the bootstrap grid system we need to understand, and of course, Bootstrap's official documentation covers more detail, but we'll start with the basics and let you understand it better.

Grid systems take advantage of the 12-column layout, which means that one page can be split into 12 identical columns. The following picture from Bootstrap's official document gives a good presentation.

You can see the class named Span9 and Span3 in the code that we just pasted under the navigation bar. They split the page into two parts of the left 9 column width and the right 3 column width to form our content area and sidebar. One of the benefits of using a grid system is that it dynamically calculates the width of the column based on the width of the window, so you don't have to write any media queries to make your site work at any screen resolution.

You can observe their effects by changing the number of spans and resizing the browser. You will 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 little.

Copy Code code 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 conse Quat. 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. </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. 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 Navigation

You can see here (Twitter.github.com/bootstrap/components.html#navs) all the navigation elements that the Twitter bootstrap provides for us.

We're going to use the vertical tab to create an extra navigation area. Copy and paste the following code into the sidebar H2 tag.

<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 show! The code above is literally 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 based on the Twitter bootstrap response design is complete.

After reading this tutorial you should be able to use bootstrap to build a basic responsive layout of the page, understand the grid system, and be able to use bootstrap navigation, navigation bar and understanding the basis of the response design.

More about Bootstrap You can also refer to the topic of learning: "Bootstrap learning course"

All these are the use of Twitter bootstrap need to have the knowledge, hope to help everyone's learning, and then hope that we can spend a little more time, which can be a coincidence, and soon you can become a bootstrap experts.