Bootstrap Basic Layout Realization method detailed _javascript Skill

See a 20 minutes to build Bootstrap site article, the content is a bit old, reuse BOOTSTRAP3 implementation, will be involved in the content as far as possible detailed description.

1. Create a basic page
We first create a basic HTML template page and use Sublime + Emmet to create this page directly.

1.1 Create a new file, Ctrl + N

1.2 Save to the paging file, Ctrl + S, named index.html

1.3 In this blank page, enter Html:5, and then press TAB key directly, you should be able to see a basic HTML5 template page.

1.4 Save again, press Ctrl + S.

The page content should read as follows:

<! DOCTYPE html>
 
 

2. Add Bootstrap File Reference

In the folder where the index.html file is located, create a CSS folder to hold all the style files, create a folder named Bootstrap in the CSS subfolder to save our bootstrap files.

From the bootstrap official website can download to Bootstrap's package, which has a Dist folder, this folder contains three subfolders: CSS, font and JS. Copy these three subfolders to your Css/bootstrap folder.

There are two pieces of content, styles, and scripts that are involved in the page.

2.1 Adding style references
adds a bootstrap style reference to the header. Note the path.

<link href= "Css/bootstrap/css/bootstrap.min.css" rel= "stylesheet"/> <link href=
"css/bootstrap/css/" Bootstrap-theme.min.css "rel=" stylesheet "/>

Bootstrap.min.css is a bootstrap style file that contains all the bootstrap style definitions, and BOOTSTRAP-THEME.MIN.CSS is the subject definition.

2.2 Adding script references
because Bootstrap uses the jquery script, you also need to download the jquery script Library.

In the directory where your index.html file is located, create a subdirectory called Lib, which is used to save the script libraries that you use later and copy the downloaded jquery.min.js to this directory.

Add jquery and Bootstrap script library references between your </body>.

 <script type= "Text/javascript" src= "lib/jquery.min.js" ></script>
 <script type= "Text/javascript" "Src=" Css/bootstrap/js/bootstrap.min.js ></script>
</body>

3. Add Bootstrap Container

The bootstrap. Container class is useful for creating a centered area in a 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 uses the best width based on the width of the current screen.

The. Container-fluid is a fully-wide container, using the entire width.

. container {
 padding-right:15px;
 padding-left:15px;
 Margin-right:auto;
 Margin-left:auto;
}
@media (min-width:768px) {
 . container {
 width:750px
 }}
}
@media (min-width:992px) {
 . container {
 width:970px
 }}
}
@media (min-width:1200px) {
 . container {
 width:1170px
 }}
}
. Container-fluid {
 padding-right:15px;
 padding-left:15px;
 Margin-right:auto;
 Margin-left:auto;
}

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.

By the way you can add a title, and now your page should be like this.

<! DOCTYPE html>

 <div class= "Container" >
  
 

Refreshing the page should see a catchy title. Here we look at the navigation.

4.2 Navigation
You can create navigation using the nav element, and we want to create a navigation bar to organize navigation items, and in bootstrap, the navigation bar, called NavBar, continues to add navigation bars to the container.

 <div class= "Container" >
  
 

NavBar will help us create navigation bar, the default is a white background, navbar-inverse set against white, so the background will be black, the text will be white, more eye-catching. Now refresh the page and you'll see a black navigation bar with no navigation content.

Add navigation content as follows

 <div class= "Container" >
  
 

UL is the actual navigation content, of which. Nav description This is a set of navigation,. Navbar-nav description is used for navigation in NavBar. Li is the actual navigation item that you can use. Active to describe the current activity's navigation.

Note the. Navbar-collapse, which says that when the viewport is less than 768px wide, the navigation is turned into a vertical direction.

Greater than 768px

Less than 768px

4.3 Sandwiches Menu

Turning into vertical navigation is also inconvenient, and we want to become a popular style, such as this.

We need to do some extra work, on the one hand, we need to show that when the viewport is less than a certain width, display our specific navigation and add additional navigation content.

<!--Brand and toggle get grouped for better mobile display--> <div class=
"Navbar-header" >
 <butto N type= "button" class= "Navbar-toggle collapsed" data-toggle= "collapse" data-target= "#navbar-menu" aria-expanded= " False ">
 <span class=" sr-only ">toggle navigation</span> <span class=
 " Icon-bar "></ span>
 <span class= "Icon-bar" ></span>
 <span class= "Icon-bar" ></span>
 </ button>
 <a class= "Navbar-brand" href= "#" >Brand</a>
</div>

In fact, there are two parts, the button part looks a lot, is used to draw the right sandwich button. The latter element is the navigation on the left.

Usually it doesn't show up.

Then we need to make a click on the sandwich button when we need to show our original navigation. button element, we have an attribute, data-target= "#navbar-menu", is used to complete this step, this #navbar-menu is our original navigation for the ID identification.

So, that's the way we navigate.

5. Content and Sidebar
The main Content section, we use DIV to do the layout.

 <div id= "Content" class= "Row-fluid" >
 <div class= "col-md-9" >
   
 

Using the bootstrap grid layout, the grid system utilizes 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.

This form gives a detailed explanation.

Now the page looks like this.

6. Side-Side bar navigation
Add some navigation content to the sidebar. Here is the ordinary navigation, using the. Nav to declare,. Nav-tabs and. Nav-stacked is the appearance of navigation.

<div class= "col-md-3" >
  
 

Looking at the final effect, a Bootstrap Response layout page is complete.

7. Reference materials

1.20 minutes to build your Bootstrap site

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.