The main purpose of this article allows you to learn to use Twitter bootstrap to create a site within 20 minutes. How to build a site is introduced below:
The first thing to say is that twitter bootstrap is a very excellent front-end open source framework. It provides detailed use cases for all key groupings, allowing you to easily attach to your design by copying and pasting.
Basic HTML templates
We need to use a basic HTML template so that we can include the bootstrap file we need. Here is the beginning of our twitter bootstrap project, copy these codes 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 page's background bright gray, because this way we can easily see different columns in our design, making it easier to understand.
Introduce twitter bootstrap file
In order to use twitter bootstrap, we only need to introduce a file into our template. There are many ways to introduce files. If you want to know these methods, please consult the relevant documents.
Based on the starting point of this tutorial, we will introduce the bootstrap-combined.min.css file through CDN without downloading any files.
The code copy 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 templates.
Twitter Bootstrap's container
The container class of bootstrap is very useful. It can create 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 container class of twitter bootstrap is that it is responsive, and it calculates the best width based on the current screen width for practical purposes.
In the body tag, use the container class to create a div. It will serve as the main outer wrapper for other codes on the page.
If you adjust the height of this DIV and set its background color to white, the effect you see will be like this:
Title and Navigation
Now that we have a place to add extra HTML code, we can add the title text and then create the main navigation bar for the site.
Add the following text or the text you selected to the div tag of the container class.
<h1>TWITTER BOOTSTRAP TUTORIAL</h1>
There isn't much new now, it's just a title, let's move to the more interesting aspect of twitter bootstrap navigation.
Bootstrap has a nav class that allows us to create various 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> <li><a href="#">Home</a></li> <li><a href="#">Page One</a></li> <li><a href="#">Page Two</a></li> </div></div>
The 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 expanding on this style to create your unique navigation. But in this tutorial we will still use the basic bootstrap style.
In a DIV with class navbar, we add another DIV with class nav-collapse and add inline style height:auto; this tells bootstrap that when this page is in a browser window with a width of less than 970px, it will provide a compressed switch view.
If you save the index.html file and open it in the browser, you will be able to see this change when you adjust the width of the browser window, as shown in the figure.
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 we can add an active class to the "HOME" list item.
Share wonderful articles about Bootstrap navigation: "Navigation that must be learned every day by bootstrap", "Navigation that must be learned every day by Bootstrap"
Main content and sidebar
We have finished the main navigation of the site, and now we need to add the main 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 exactly what we need to understand about bootstrap's raster system. Of course, the official bootstrap documentation covers more details, but we will start with the basics and let you understand it better.
The raster system utilizes a 12-column layout, which means that a page can be split into 12 identical columns. The following picture obtained from the official bootstrap document gives a good display.
In the code we just pasted in the navigation bar you can see the classes named span9 and span3. They will split the page into two parts of the 9 columns on the left and 3 columns 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 column based on the window width, so you don't need to write any media queries to make your site work at any screen resolution.
You can observe their effect by changing the number of spans and adjusting the size of your browser. You will notice that when the content area is less than 724px, these columns are stacked vertically.
Now we put the following text or any other text behind the h2 tag in the main content area, just to lengthen the page a little.
Copy the 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 minimum veniam, quis nostrud exercise sta 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 guiltit lumtatum zzril delenit augue duis dolore te feugait nulla facialilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
<p>Typi non habent clariitatem insitam; est usus legitis in iis qui facit eorum clariitatem. Investigations demonstratestraverunt clariitres legende me lius quod ii legunt saepius. Claritas est etiam process dynamicus, qui sequencer mutationem consuetudium legorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum format 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 will show as follows:
Sidebar navigation
You can see all the navigation elements that Twitter bootstrap provides us 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 into the sidebar's h2 tag.
<ul> <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 display! The above code is literally just an unordered list with classes nav-tabs and nav-stacked, but it creates a navigation panel for us.
Looking at the final effect, a page based on twitter bootstrap is finished.
After reading this tutorial, you should be able to use bootstrap to create a basic responsive layout page, understand the grid system, and be able to use bootstrap to navigate, navigation bars and understand the basics of responsive design.
More content about Bootstrap can also be found in special topics: "Bootstrap Learning Tutorial"
All of the above are the knowledge required to use Twitter bootstrap. I hope it will be helpful to everyone's learning. I hope you can spend more time and make perfect. In the near future, you can become an expert in bootstrap.