Bootstrap Project actual Combat home content Introduction (full) _javascript skills

In the first section of this lesson, we design a content introduction, the content introduction is divided into two parts, this time is the upper half part.

one. Home Content Introduction

With regard to the last lesson, the manual has a better plan and does not require additional code control.

<a href= "#myCarousel" data-slide= "prev" class= "Carousel-control Left" > <span class= "Glyphicon Glyphicon-chevron-left "></span> </a>
<a href=" #myCarousel "data-slide=" Next "class=" Carousel-controlright "> <span class=" Glyphicon glyphicon-chevron-right "></span> </a>
// About the content

<div class= "Tab1" > <div class= "container" > 
 

The corresponding CSS section

Body {font-family: "Helvetica neue", Helvetica, Arial, "Microsoft Yaheiui", "Microsoft Yahei", Simhei, "\5b8b\4f53", si
Msun, Sans-serif;
 }. tab-h2 {font-size:20px;
 Color: #0059B2;
 Text-align:center;
letter-spacing:1px;
 }. tab-p {font-size:15px;
 Color: #999;
 Text-align:center;
 letter-spacing:1px;
margin:20px 0 40px 0;
 }. tab1 {margin:30px 0;
Color: #666;
 }. Tab1. media-heading {margin:5px 0 20px 0}. tab1. text-muted {color: #999;
Text-decoration:line-through;
 }. Tab1. media-heading {margin:5px 0 20px 0}. tab1. text-muted {color: #999;
Text-decoration:line-through;

}. Tab1. col {padding:20px;}
 /* small screen (flat, greater than 768px) */@media (min-width:768px) {. tab-h2 {font-size:26px;
 }. tab-p {font-size:16px;
 }/* Medium screen (desktop display, greater than 992px) */@media (min-width:992px) {. tab-h2 {font-size:28px;
 }. tab-p {font-size:17px;
 }/* Large screen (large desktop display, greater than or equal to 1200px) */@media (min-width:1200px) {. tab-h2 {font-size:30px; }. tab-p {font-size:18px;

 }
}

Now let's make the bottom half of the introduction to the first page.

A Home Content Introduction
finish the bottom footer first

<footer id= "Footer" class= "text-muted" >
 <div class= "container" >
 <p>
  Corporate Training | co-issue | Copyright complaint
 </p>
 <p>
  su ICP prepared 12345678.©2009-2016 Scoop City Enterprise Training Network. Powered by
  Bootstrap.
 </p>
 </div>
</footer>

Bottom CSS

#footer {
 padding:20px;
 Text-align:center;
 Background-color: #eee;
 border-top:1px solid #ccc;
}
Two pieces of content

<div class= "TaB2" >
 <div class= "container" >
 <div class= "Row" >
  <div class= "col-md-6 Col-sm-6 tab2-img ">
  
  </div>
  <div class= "text col-md-6 col-sm-6 tab2-text" >
   
 

CSS section

. tab2 {
 background: #eee;
 padding:60px 20px;
 Text-align:center
}
. TAB2 img {
 width:40%;
 height:40%
}
. tab3 {
 padding:40px 0;
 Text-align:center
}
. TAB3 img {
 width:65%;
 height:65%
}
. Text H3 {
 font-size:20px
}
. Text p {
 font-size:14px;
}

/* small screen (flat, greater than 768px) *
/@media (min-width:768px) {
 . text h3 {

 font-size:22px;
 }
 . Text p {
 font-size:15px;
 }
 . Tab2-text {
 float:left
 }
 . tab2-img {
 float:right
 }
}

/* Medium screen (desktop display, greater than 992px) *
/@media (min-width:992px) {
 . text h3 {
 font-size:24px;
 }
 . Text p {
 font-size:16px;
 }
 . Tab2-text {
 float:left
 }
 . tab2-img {
 float:right
 }
}

/* Large screen (large desktop display, greater than or equal to 1200px) *
/@media (min-width:1200px) {
 . text h2 {
 font-size:26px;
 }
 . Text p {
 font-size:18px;
 }
 . Tab2-text {
 float:left
 }
 . tab2-img {
 float:right
 }
}

JS Control Vertical Center

$ ('. EQ (0). css (' Margin-top '), ($ ('. Auto '). EQ (0). Height ()-$ ('. Text '). EQ (0). Height ())/2 + ' px ');
$ (window). Resize (function () {
 $ ('. Text '). EQ (0). css (' Margin-top ', ($ ('. Auto '). EQ (0). Height ()-$ ('. Text '). EQ (0) . Height ())/2 + ' px ');

$ ('. EQ (1). css (' Margin-top '), ($ ('. Auto '). EQ (1). Height ()-$ ('. Text '). EQ (1). Height ())/2 + ' px ');
$ (window). Resize (function () {
 $ ('. Text '). EQ (1). css (' Margin-top ', ($ ('. Auto '). EQ (1). Height ()-$ ('. Text '). EQ (1) . Height ())/2 + ' px ');

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 Bootstrap homepage content Introduction All content, hoped everybody likes, afterward also will have more splendid content present, do not miss.