TYPOGRAPHY

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

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

Bootstrap Site - http://getbootstrap.com/
부트스트랩 한글번역 - http://bootstrapk.com/
Headings Paragraph Color Texts Bordered Tooltips Popovers Text Highlights Description Horizontal Description Unordered List Ordered List Unstyled List Inline List Cont Text Backgrounds Cont Text Rounded Text Big Heading Options Blockquote Tag Box

Headings

h1. Heading 1 Secondary text

h2. Heading 2 Secondary text

h3. Heading 3 Secondary text

h4. Heading 4 Secondary text

h5. Heading 5 Secondary text
h6. Heading 6 Secondary text
		    	
h1. Heading 1 Secondary text

			    
h2. Heading 2 Secondary text

			    
h3. Heading 3 Secondary text

			    
h4. Heading 4 Secondary text

			    
h5. Heading 5 Secondary text

			    
h6. Heading 6 Secondary text

Paragraph

Pellentesque erat erat, tincidunt in, eleifend accumsan, malesuada eget, augue.

		    	
Pellentesque erat...

Suspendisse sit amet tellus in eros bibendum condimentum.

		    	
Suspendisse sit...

Quisque erat. Vestibulum pellentesque, justo mollis pretium suscipit, in blandit augue justo quis nisl.

		    	
Quisque erat. Vestibulum...

Vivamus nisl nibh, iaculis vitae, viverra sit amet, ullamcorper vitae, turpis. Aliquam erat volutpat.

		    	
Vivamus nisl nibh...

Duis enim nulla, luctus eu, dapibus lacinia, venenatis id, quam. Vestibulum imperdiet, euismod lacinia quam nisl id lorem.

		    	
Duis enim nulla...

Color Texts & Bordered

글자색상 class를 지정할 수 있습니다. color-red red 색상 color-sea sea 색상 color-blue blue 색상 color-green green 색상 color-orange orange 색상 color-purple purple 색상 color-aqua aqua 색상 color-brown brown 색상 color-dark-blue dark-blue 색상 color-light-green light-green 색상

			color-red
			color-sea
			color-blue
			color-green
			color-orange
			color-purple
			color-aqua
			color-brown
			color-dark-blue
			color-light-green

글자밑줄 class를 지정할 수 있습니다. text-border text-border-yellow yellow 밑줄 text-border text-border-red red 밑줄 text-border text-border-green green 밑줄

			text-border text-border-yellow
			text-border text-border-red
			text-border text-border-green

Tooltips

Tooltip 활용입니다. tooltips 마우스 호버 시 툴팁 활성화됩니다.

			tooltips

Popovers

Text Highlights

Text Highlight 활용입니다.

text-highlights rounded
text-highlights text-highlights-green
text-highlights text-highlights-blue
text-highlights text-highlights-red rounded-2x
text-highlights text-highlights-dark-blue
text-highlights text-highlights-light-green rounded
text-highlights text-highlights-sea rounded-2x
text-highlights text-highlights-orange
text-highlights text-highlights-purple
text-highlights text-highlights-aqua
text-highlights text-highlights-brown rounded
text-highlights text-highlights-yellow rounded 

				text-highlights rounded
				text-highlights text-highlights-green
				text-highlights text-highlights-blue
				text-highlights text-highlights-red rounded-2x
				text-highlights text-highlights-dark-blue
				text-highlights text-highlights-light-green rounded
				text-highlights text-highlights-sea rounded-2x
				text-highlights text-highlights-orange
				text-highlights text-highlights-purple
				text-highlights text-highlights-aqua
				text-highlights text-highlights-brown rounded
				text-highlights text-highlights-yellow rounded

Description

Description 1
Nullam non wisi a sem semper eleifend. Donec mattis.
Description 2
Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum.
Aenean lectus lorem, imperdiet at, ultrices eget, ornare et.
Description 3
Pellentesque adipiscing purus ac magna.
	        

	            
Description 1

	            
Nullam non wisi a sem semper eleifend. Donec mattis.

	            
Description 2

	            
Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum.

	            
Aenean lectus lorem, imperdiet at, ultrices eget, ornare et.

	            
Description 3

	            
Pellentesque adipiscing purus ac magna.

Horizontal Description

Description 1
Nullam non wisi a sem semper eleifend. Donec mattis.
Description 2
Duis pretium velit ac mauris.
Proin eu wisi suscipit nulla suscipit interdum.
Description 3
Pellentesque adipiscing purus ac magna.
Description 4
Mauris a dolor. Nulla facilisi.
	        

	            
Description 1

	            
Nullam non wisi a sem semper eleifend. Donec mattis.

	            
Description 2

	            
Duis pretium velit ac mauris.

	            
Proin eu wisi suscipit nulla suscipit interdum.

	            
Description 3

	            
Pellentesque adipiscing purus ac magna.

	            
Description 4

	            
Mauris a dolor. Nulla facilisi.

Unordered List

  • Nullam non wisi a sem semper
  • Semper eleifend. Donec mattis
  • Duis pretium velit ac mauris
    • Proin eu wisi suscipit
    • Nulla suscipit interdum
    • Pellentesque adipiscing purus
    • Adipiscing purus ac magna
  • Mauris a dolor nulla facilis
	        
    
	            
  • Nullam non wisi a sem semper
    • 
	            
  • Semper eleifend. Donec mattis
    • 
	            
  • Duis pretium velit ac mauris
	                
      
	                    
    • Proin eu wisi suscipit
      • 
	                    
    • Nulla suscipit interdum
      • 
	                    
    • Pellentesque adipiscing purus
      • 
	                    
    • Adipiscing purus ac magna
      • 
	                
    
	            
    • 
	            
  • Mauris a dolor nulla facilis
    •

Ordered List

  1. Nullam non wisi a sem semper
  2. Semper eleifend. Donec mattis
  3. Duis pretium velit ac mauris
    1. Proin eu wisi suscipit
    2. Nulla suscipit interdum
    3. Pellentesque adipiscing purus
    4. Adipiscing purus ac magna
  4. Mauris a dolor nulla facilis
	        
    
	            
  1. Nullam non wisi a sem semper
    2. 
	            
  2. Semper eleifend. Donec mattis
    3. 
	            
  3. Duis pretium velit ac mauris
	                
      
	                    
    1. Proin eu wisi suscipit
      2. 
	                    
    2. Nulla suscipit interdum
      3. 
	                    
    3. Pellentesque adipiscing purus
      4. 
	                    
    4. Adipiscing purus ac magna
      5. 
	                
    
	            
    4. 
	            
  4. Mauris a dolor nulla facilis
    5.

Unstyled List

  • Nullam non wisi a sem semper
  • Semper eleifend. Donec mattis
  • Duis pretium velit ac mauris
    • Proin eu wisi suscipit
    • Nulla suscipit interdum
    • Pellentesque adipiscing purus
    • Adipiscing purus ac magna
  • Mauris a dolor nulla facilis
	        
    
	            
  • Nullam non wisi a sem semper
    • 
	            
  • Semper eleifend. Donec mattis
    • 
	            
  • Duis pretium velit ac mauris
	                
      
	                    
    • Proin eu wisi suscipit
      • 
	                    
    • Nulla suscipit interdum
      • 
	                    
    • Pellentesque adipiscing purus
      • 
	                    
    • Adipiscing purus ac magna
      • 
	                
    
	            
    • 
	            
  • Mauris a dolor nulla facilis
    •

Inline List

Cont Text Backgrounds

bg-primary

bg-success

bg-info

bg-warning

bg-danger

	        

	            
bg-primary

	            
bg-success

	            
bg-info

	            
bg-warning

	            
bg-danger

Cont Text Rounded Examples

Default

rounded

rounded-2x

rounded-3x

rounded-4x

	        

	            
Default

	            
rounded

	            
rounded-2x

	            
rounded-3x

	            
rounded-4x

Text Big

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. Aliquam libero. Vivamus nisl nibh, iaculis vitae, viverra sit amet, ullamcorper vitae, turpis. Aliquam erat volutpat. Vestibulum dui sem, pulvinar sed, imperdiet nec, iaculis nec, leo. Fusce odio. Etiam arcu dui, faucibus eget, placerat vel, sodales eget, orci.

	            
Maecenas pede nisl...

Donec nonummy magna quis risus. Quisque eleifend. Phasellus tempor vehicula justo. Aliquam lacinia metus ut elit. Suspendisse iaculis mauris nec lorem. Donec leo. Vivamus fermentum nibh in augue. Praesent a lacus at urna congue rutrum. Nulla enim eros, porttitor eu, tempus id, varius non, nibh. Duis enim nulla, luctus eu, dapibus lacinia, venenatis id, quam. Vestibulum imperdiet, magna nec eleifend rutrum, nunc lectus vestibulum velit, euismod lacinia quam nisl id lorem. Quisque erat.

	            
Donec nonummy magna...

Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pede. Donec pulvinar ullamcorper metus. In eu odio at lectus pulvinar mollis. Vestibulum sem magna, elementum ut, vestibulum eu, facilisis quis, arcu. Mauris a dolor.

	            
Nullam non wisi...

Heading Options

Heading Strip Style

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.

	            

	                
Heading Strip Style

	                
Maecenas pede nisl, elementum eu, ornare ac, malesuada...

Heading Dashed Style

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.

	            

	                
Heading Dashed Style

	                
Maecenas pede nisl, elementum eu, ornare ac, malesuada...

Heading Dotted Style

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.

	            

	                
Heading Dotted Style

	                
Maecenas pede nisl, elementum eu, ornare ac, malesuada...

Heading Strip Style

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.

	            

	                
Heading Strip Style

	                
Maecenas pede nisl, elementum eu, ornare ac, malesuada...

Heading Dashed Style

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.

	            

	                
Heading Dashed Style

	                
Maecenas pede nisl, elementum eu, ornare ac, malesuada...

Heading Dotted Style

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.

	            

	                
Heading Dotted Style

	                
Maecenas pede nisl, elementum eu, ornare ac, malesuada...

Blockquote

Blockquote Example

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.

"Vestibulum imperdiet, magna nec eleifend rutrum, nunc lectus vestibulum velit, euismod lacinia quam nisl id lorem. Quisque erat."

Blockquote Example 
	        

	            
Blockquote Example

	            
Maecenas pede nisl, elementum eu...

	            
"Vestibulum imperdiet, magna nec..."

	            Blockquote Example

Border Colored Example

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.

	        

	            
Border Colored Example

	            
Maecenas pede nisl, elementum eu...

"Vestibulum imperdiet, magna nec eleifend rutrum, nunc lectus vestibulum velit, euismod lacinia quam nisl id lorem. Quisque erat."

Green bordered blockquote example 
	        

	            
"Vestibulum imperdiet, magna nec..."

	            Green bordered blockquote example

"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."

Magna nec eleifend rutrum 
	        

	            
"Maecenas pede nisl, elementum eu..."

	            Magna nec eleifend rutrum

"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."

Magna nec eleifend rutrum 
	        

	            
"Maecenas pede nisl, elementum eu..."

	            Magna nec eleifend rutrum

"Maecenhs pinde npsl, 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."

Magna nec eleifend rutrum 
	        

	            
"Maecenas pede nisl, elementum eu..."

	            Magna nec eleifend rutrum

Tag Boxes

Maecenhs pinde npsl, 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.

	        

	            
Maecenhs pinde npsl, elementum eu...

Maecenhs pinde npsl, 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.

	        

	            
Maecenhs pinde npsl, elementum eu...

Maecenhs pinde npsl, 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.

	        

	            
Maecenhs pinde npsl, elementum eu...

Maecenhs pinde npsl, 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.

	        

	            
Maecenhs pinde npsl, elementum eu...

Maecenhs pinde npsl, 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.

	        

	            
Maecenhs pinde npsl, elementum eu...

Maecenhs pinde npsl, 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.

	        

	            
Maecenhs pinde npsl, elementum eu...

Maecenhs pinde npsl, 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.

	        

	            
Maecenhs pinde npsl, elementum eu...

Maecenhs pinde npsl, 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.

	        

	            
Maecenhs pinde npsl, elementum eu...

Maecenhs pinde npsl, 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.

	        

	            
Maecenhs pinde npsl, elementum eu...

Maecenhs pinde npsl, 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.

	        

	            
Maecenhs pinde npsl, elementum eu...
Donec condimentum urna molestie? 

	        

	            

	                Donec condimentum urna molestie?