Bootstrap project practice Overview (full) _ javascript tips-js tutorial

This article is divided into two parts to introduce the implementation code of the Bootstrap homepage content. If you are interested, you can refer to the section 1 of this lesson below our carousel diagram to design a content Introduction, the content is divided into two parts. This is the upper part.

I. Home Page Content

// For the slideshow of the previous lesson, there is actually a better solution in the manual, and no additional code control is required. // Content Introduction

  
「 Why do you choose zhuancheng enterprise training 」
Our powerful faculty and perfect practical management courses allow your enterprise to take off!
    
      
        
          
                        
          
Course Content
Others: there are no practical teaching materials written by unknown lecturers in colleges and universities!
            
Others: Practical Teaching Materials jointly prepared by famous entrepreneurs and Management masters!
          
        
      
      
        
          
                        
          
Faculty
Others: Non-prestigious lecturers from European and American universities!
            
Others: world-class universities such as Harvard and Yale, and well-known famous experts!
          
        
      
      
        
          
                        
          
Lesson schedule
Others: the class efficiency cannot be guaranteed, the task cannot be completed without a timetable!
            
Others: ensure normal class efficiency, set a schedule, and complete the task on the day!
          
        
      
      
        
          
                        
          
Service Team
Others: common employees who are recruited by the society and have varying service levels!
            
Others: high-standard employees who have been trained internally and have been well trained in high-end services!
          
        
      
    
  

Corresponding CSS Section

Body {font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft YaheiUI", "Microsoft YaHei", SimHei, "\ 5B8B \ 4F53", simsun, 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 or equal to 768px) */@ media (min-width: 768px ){. tab-h2 {font-size: 26px ;}. tab-p {font-size: 16px ;}/ * medium screen (desktop display, greater than or equal to 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 pixel px) */@ media (min-width: pixel px ){. tab-h2 {font-size: 30px ;}. tab-p {font-size: 18px ;}}

Now let's take a look at the lower half of the homepage content.

I. Home Page Content
Complete the footer at the bottom

   
  
    
  
Enterprise Training | cooperation | copyright complaint
    
  
Suicp backup 12345678.©2009-2016 Luancheng enterprise training network. Powered by Bootstrap.
  
  

 

Bottom CSS

# Footer {padding: 20px; text-align: center; background-color: # eee; border-top: 1px solid # ccc;} // content

  
    
      
              
      
Powerful Learning System
The management masters step by step to make your enterprise soar.
      
    
  
  
    
      
              
      
Perfect Management Mode
The latest management training solution allows your enterprise to catch up with your peers.
      
    
  

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 or equal to 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 or equal to 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 pixel px) */@ media (min-width: pixel px ){. text h2 {font-size: 26px ;}. text p {font-size: 18px ;}. tab2-text {float: left ;}. tab2-img {float: right ;}}

JS control vertical center

$('.text').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');});$('.text').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');});

For more information, see the Bootstrap tutorial.

The above is all about the content on the Bootstrap homepage. I hope you will like it and more exciting content will be displayed later. Don't miss it.