Analysis of Bootstrap layout component _ javascript skills

This article mainly gives you a comprehensive analysis of the Bootstrap layout component application and analyzes almost all examples of the Bootstrap layout component. If you are interested, you can refer to the example in this article to introduce the Bootstrap layout component application, the content is as follows:

Application Example of font icons

Drop-down menu example

  Topic  
 
 
    
  
  
Drop-down menu title
   
  
  
Option 1
   
  
  
Option 2
   
  
  
Option 3
   
  
  

     
  
  
Separated links
  
 
 

Button toolbar and button group

    
  
     Button 1   Button 2   Button 3   
   
   Button 4   Button 5   Button 6  
   
   Button 7   Button 8   Button 9  

Button drop-down menu

  

      
   Default   
 
 
     
  
  
Function
     
  
  
Another feature
     
  
  
Others
     
  
  

       
  
  
Separated links
   
 
 
  

Input box group in the form

Navigation (tab)

Label-based navigation menu
 
 

    
  
  
Home
  
  
  
SVN
  
  
  
IOS
 
 
Basic capsule navigation menu
 
 
  
  
  
Home
  
  
  
SVN
 
 
Vertical capsule navigation menu
 
 
  
  
  
Home
  
  
  
SVN
 
 

Navigation Bar

   
  
W3Cschool
  
  
   
  
 

        
   
  
IOS
     
   
  
SVN
     
   
  
Java 
   
 
    
Jmeter
 
    
EJB
 
    
Jasper Report
 
    
 
    
Separated links
 
   
 
   
  
 
    
          
      
  Navigation bar button    
      
  
       
  
Navigation bar text I am a link
      
  
    
    
  

 

Responsive navigation bar

The following golden section shows the differences between general navigation bars.

   
  
                  
       W3Cschool
  
  
   
  
 
     
   
  
IOS
     
   
  
SVN
     
   
  
Troy
   
  
 
  
  

 

Bread navigation

 
 
 
  
  
Home
 
  
  
2013
 
  
  
November
 
 

Paging and paging

 
 
 
 

   
  
  
«
 
  
  
1
 
  
  
2
 
  
  
3
 
  
  
4
 
  
  
5
 
  
  
»
 
 
 
 
 
 
  
  
Previous
 
  
  
Next
 
 
 
 
 
 
  
  
Mongoolder
 
  
  
Newer →
 
 

Tag

Default tag main tag successful Tag Information tag warning tag dangerous tag

Badge

Badges are smoother than labels and are mainly used to highlight new or unread items.

 
 
  
  
  
42 Homepage
  
  
  
Introduction
  
  
  
3 message
 
 

Large Screen

  
Welcome to the page!
This is an instance of Jumbotron.
   
Learn more
  

 

Page title example

Page title instanceSub-title  

Thumbnail

        
    
Thumbnail label
Sample text. Sample text.
     
Button
   

Warning

    ×Successful! The submission is well completed.
  ×Successful! The submission is well completed.
  
  ×Warning! Do not submit.
  ×Error! Make some changes.

Progress bar

 

    
    
90% completed (successful)

 
  
40% completed
  
30% completed (Information)
  
20% completed (warning)

Media tag

. Media: This class allows multimedia (images, videos, and audios) in a media object to be moved to the left or right of the content block.
. Media-list: If you need a list, the content of each item is part of the unordered list, you can use this class. It can be used for the comment list and article list.

 
 
  
  
  
 
Media title
This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.
  
 
Nested media titles are examples of text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.  
 
Nested media titles are examples of text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.
 
 
 
  
 
Nested media titles are examples of text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.
 
 
 
  
  
  
 
Media titles are some sample texts. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.
 
 
 

List Group

 
 
 
  
  
  
Free domain name registration
  
  
  
New 24*7 Support
  
  
  
Annual update cost
  
  
  
New Discount
 
 
 
Entry website package free domain name registration
You will use the web page for free domain name registration.
24*7 Support
We provide 24x7 Support.
  

Panel

    
Panel title with title
  
Panel content
  
   
 
 
   
  
  
 
   
 
    
Product
 
    
Price
 
   
 
   
 
    
Product
 
    
200
 
   
 
   
 
    
Product B
 
    
400
 
   
 
  
 
 
  
   
 
 
   
  
  
Free domain name registration
   
  
  
Free Window space hosting
   
  
  
Number of images
   
  
  
24*7 Support
   
  
  
Annual update cost
  
 
 
   
Panel footer

Well Effect

Well is a container that causes content sag display or illustration effects.

Hello, I'm in the big Well!
Hello, I'm in small Well!

The above is all the content of this article, hoping to help you learn.