Components

"이윰빌더에서 기본적으로 제공하는 BASIC 테마의 ShortCodes 입니다."

Info! 부트스트랩의 기본 가이드는 아래 링크를 참조하세요.

Bootstrap Site - http://getbootstrap.com/
부트스트랩 한글번역 - http://bootstrapk.com/
Labels Badges Progress Bars Alerts & Messages Images Videos

Labels

Default Bootstrap Labels
Default Primary Success Info Warning Danger
			        Default
			        Primary
			        Success
			        Info
			        Warning
			        Danger
		        
Default Bootstrap Rounded Labels
Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger
		            Default
		            Primary
		            Success
		            Info
		            Warning
		            Danger
		            Default
		            Primary
		            Success
		            Info
		            Warning
		            Danger
				
Eyoom Basic Labels
Default Blue Reds Green Turquoise Orange Yellow
Purple Aqua Brown Blue Green Dark Light
		            Default
		            Blue
		            Reds
		            Green
		            Turquoise
		            Orange
		            Yellow
		            Purple
		            Aqua
		            Brown
		            Blue
		            Green
		            Dark
		            Light
		        
Eyoom Basic Rounded Labels
Default Blue Red Green Turquoise Orange Yellow
Purple Aqua Brown Blue Green Dark Light
		            Default
		            Blue
		            Red
		            Green
		            Turquoise
		            Orange
		            Yellow
		            Purple
		            Aqua
		            Brown
		            Blue
		            Green
		            Dark
		            Light
		        

Badges

Default Badges
1 2 3 4 5 6 7 8 9 10 11 12 13 14
			        1
			        2
			        3
			        4
			        5
			        6
			        7
			        8
			        9
			        10
			        11
			        12
			        13
			        14
		        
Rounded Badges
1 2 3 4 5 6 7 8 9 10 11 12 13 14
			        1
			        2
			        3
			        4
			        5
			        6
			        7
			        8
			        9
			        10
			        11
			        12
			        13
			        14
		        
Rounded-2x Badges
1 2 3 4 5 6 7 8 9 10 11 12 13 14
			        1
			        2
			        3
			        4
			        5
			        6
			        7
			        8
			        9
			        10
			        11
			        12
			        13
			        14
		        
Different Usages
			        
				
Different Usages - With Icons
  • 5
  • 7
  • 8
	                
  • 5
  • 7
  • 8
Different Usages - With Icons
	                
                

Progress Bars

30% Complete
50% Complete
80% Complete
95% Complete
	                            
30% Complete
50% Complete
80% Complete
95% Complete
20% Complete (danger)
40% Complete (warning)
30% Complete (success)
	                            
20% Complete (danger)
40% Complete (warning)
30% Complete (success)
progress-bar
progress-bar-danger
progress-bar-success
	                            
progress-bar
30% progress-bar-danger
55% progress-bar-warning
70% progress-bar-info
90% progress-bar-success
	                    
30% progress-bar-danger

HTML/CSS - 88%

PHP - 80%

JS - 92%

	                            

HTML/CSS - 88%

HTML/CSS 88%

PHP 80%

JS 92%

	                            

HTML/CSS 88%

HTML/CSS - 88%

PHP - 80%

JS - 92%

	                            

HTML/CSS - 88%

HTML/CSS 88%

PHP 80%

JS 92%

	                            

HTML/CSS 88%

HTML/CSS - 88%

PHP - 80%

JS - 92%

	                            

HTML/CSS - 88%

HTML/CSS 88%

PHP 80%

JS 92%

	                            

HTML/CSS 88%

HTML/CSS - 88%

PHP - 80%

JS - 92%

	                            

HTML/CSS 88%

HTML/CSS 88%

PHP 80%

JS 92%

	                            

HTML/CSS 88%

Large Progress Bars

30% Complete
50% Complete
80% Complete
	                                
30% Complete

Default Progress Bars

55% Complete
70% Complete
95% Complete
	                                
55% Complete

Small Progress Bars

50% Complete
60% Complete
70% Complete
	                                
50% Complete

Extra Small Progress Bars

30% Complete
50% Complete
80% Complete
	                                
30% Complete

Smallest Progress Bars

40% Complete
70% Complete
90% Complete
	                                
40% Complete

Rounded Large Progress Bars

70% Complete
70% Complete
70% Complete
	                                
70% Complete

Rounded Default Progress Bars

65% Complete
65% Complete
65% Complete
	                                
65% Complete

Rounded Small Progress Bars

50% Complete
50% Complete
50% Complete
	                                
50% Complete

Rounded Extra Small Progress Bars

40% Complete
40% Complete
40% Complete
	                                
40% Complete

Mixed Progress Bars

30% Complete
40% Complete
20% Complete
40% Complete
30% Complete
15% Complete
25% Complete
20% Complete
30% Complete
	                                
30% Complete
40% Complete

Alerts & Messages

Success! Donec condimentum, urna non molestie semper.
Info! Donec condimentum, urna non molestie semper.
Danger! Donec condimentum, urna non molestie semper.
Warning! Donec condimentum, urna non molestie semper.
	                    
Success! Donec condimentum, urna non molestie semper.
Info! Donec condimentum, urna non molestie semper.
Danger! Donec condimentum, urna non molestie semper.
Warning! Donec condimentum, urna non molestie semper.
Success! Donec condimentum, urna non molestie semper.
Info! Donec condimentum, urna non molestie semper.
Danger! Donec condimentum, urna non molestie semper.
Warning! Donec condimentum, urna non molestie semper.
	                    
Success! Donec condimentum, urna non molestie semper.
Info! Donec condimentum, urna non molestie semper.
Danger! Donec condimentum, urna non molestie semper.
Warning! Donec condimentum, urna non molestie semper.

Alert Blocks

Dnager!

Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. Proin gravida orci porttitor enim accumsan lacinia. Donec condimentum, urna non molestie semper, ligula enim ornare nibh.

Default Action Another Action

	        

Dnager!

Maecenas pede nisl, elementum eu...

Default Action Another Action

Information!

Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. Proin gravida orci porttitor enim accumsan lacinia. Donec condimentum, urna non molestie semper, ligula enim ornare nibh, quis laoreet eros quam eget ante.
	        

Information!

Maecenas pede nisl, elementum eu...

Warning!

Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. Proin gravida orci porttitor enim accumsan lacinia. Donec condimentum, urna non molestie semper, ligula enim ornare nibh, quis laoreet eros quam eget ante.

Default Action Another Action

	        

Warning!

Maecenas pede nisl, elementum eu...

Default Action Another Action

Diffenent Styles

Tag Box e2-r!

Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. Proin gravida orci porttitor enim accumsan lacinia. Donec condimentum, urna non molestie semper, ligula enim ornare nibh, quis laoreet eros quam eget ante.

	        

Tag Box e2-r!

Maecenas pede nisl, elementum eu...

Tag Box e3

Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. Proin gravida orci porttitor enim accumsan lacinia. Donec condimentum, urna non molestie semper, ligula enim ornare nibh, quis laoreet eros quam eget ante.

	        

Tag Box e3

Maecenas pede nisl, elementum eu...

Tag Box e4

Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. Proin gravida orci porttitor enim accumsan lacinia. Donec condimentum, urna non molestie semper, ligula enim ornare nibh, quis laoreet eros quam eget ante.

	        

Tag Box e4

Maecenas pede nisl, elementum eu...

Images

            
            
            
            
        
            
            
            
            
        

Videos

					
iframe 동영상소스
		            
iframe 동영상소스