Naslov 1 (Heading 1)

Naslov 2 (Heading 2)

Naslov 3 (Heading 3)

Naslov 4 (Heading 4)

Naslov 5 (Heading 5)
Naslov 6 (Heading 6)

Normal

Preformatted
font size 8
font size 8 bold
font size 9
font size 9 bold
font size 10
font size 10 bold
font size 11
font size 11 bold
font size 12
font size 12 bold
font size 13
font size 13 bold
font size 14
font size 14 bold

Tahoma AEIOU aeiou
Century Gothic AEIOU aeiou
Lucida Sans Unicode AEIOU aeiou
Arial Narrow AEIOU aeiou
Verdana AEIOU aeiou
Copperplate Gothic Light AEIOU aeiou
Lucida Console AEIOU aeiou
Gill Sans MT AEIOU aeiou
Trebuchet MS AEIOU aeiou

----------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------

Alineje - Bullets

<ul class="bullets">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Obkljukane alineje

<ul class="check">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Označevanje zvezda

<ul class="star">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Oštevilčenje

<ol class="numbers">

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Sistem odpiranja - harmonika

Naši naročniki

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem.

Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque. Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.

Naša vizija

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem.

Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque. Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.

O podjetju

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem.

Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque. Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.


Labels

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Kako nastaviti več stolpcev na eno stran?

Izdelan je privzeti 24 kolonski sistem v CMS, ki uporablja 24 stolpcev, na vseh širinah. Vse kar je deljivo z 24 pa pomeni število stolpcev. (24 : 6 = 4 stolpci, torej z ukazom na začetku vrstice definiramo število stolpcev ...grid_6 ...vmes je tekst in na koncu zaključimo z ukazom (glej spodaj).

  1. <div class="row">  
  2.      <div class="col grid_6">...</div>
  3.      <div class="col grid_6">...</div>
  4.      <div class="col grid_6">...</div>
  5.      <div class="col grid_6">...</div> 
  6. </div>  

Default grid system 24 fluid columns with a responsive twist

 
2
2
2
2
2
2
2
2
2
2
2
2
8
8
8
12
12
6
6
6
6
6
8
5
5
24

The default grid system provided in CMS pro! utilizes 24 fluid columns that render out at any widths. Below 767px viewports, the columns stack vertically.

 
  1. <div class="row">  
  2.   <div class="col grid_8">...</div>  
  3.   <div class="col grid_16">...</div>  
  4. </div>  

As shown here, a basic layout can be created with two "columns", each spanning a number of the 24 foundational columns we defined as part of our grid system.

 

Lists

 

Unordered Bullets

<ul class="bullets">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Unordered Checks

<ul class="check">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Unordered Stars

<ul class="star">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered

<ol class="numbers">

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
 

Labels

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Label Code

 
  1. <span class="label label-ok">your text</span>  
  2. <span class="label label-info">your text</span>  
  3. <span class="label label-alert">your text</span>  
  4. <span class="label label-error">your text</span>  
 

Progress Bars

 
 
 
 

Progress Bars Code

 
  1. <div class="progress-bar blue">      
  2.   <div style="width:20%"></div>      
  3. </div>     
  4. <div class="progress-bar yellow">      
  5.   <div style="width:40%"></div>      
  6. </div>     
  7. <div class="progress-bar green">      
  8.   <div style="width:60%"></div>      
  9. </div>     
  10. <div class="progress-bar red">      
  11.   <div style="width:80%"></div>      
  12. </div>  
 

Togglable Tabs

Labore indoctum ullamcorper et his. volumus corpora verterem cum in, has in maiorum repudiare disputationi. Sed electram aliquando disputando ad.
Labore indoctum ullamcorper et his. volumus corpora verterem cum in, has in maiorum repudiare disputationi. Sed electram aliquando disputando ad.
Labore indoctum ullamcorper et his. volumus corpora verterem cum in, has in maiorum repudiare disputationi. Sed electram aliquando disputando ad.

Togglable Tabs Code

 
  1. <ul class="tabs">  
  2.   <li><a data-title="tab1" href="#">Tab 1</a></li>  
  3.   <li><a data-title="tab2" href="#">Tab 2</a></li>  
  4.   <li><a data-title="tab3" href="#">Tab 3</a></li>  
  5. </ul>  
  6. <div class="tab-content clearfix">  
  7.   <div id="tab1"> Tab 1 content... </div>  
  8.   <div id="tab2"> Tab 2 content... </div>  
  9.   <div id="tab3"> Tab 3 content... </div>  
  10. </div>  
 

Accordion

Our Clients

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem.

Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque. Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.

Our Mission

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem.

Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque. Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.

Our Company

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem.

Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque. Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.

Accordion Code

 
  1. <div class="accordion clearfix">  
  2.   <div class="accowrap">  
  3.     <h4>Our Clients<span class="chevron"></span></h4>  
  4.     <div class="acco-content">  
  5.       <p>Aliquam volutpat arcu ....</p>  
  6.     </div>  
  7.   </div>  
  8.   <div class="accowrap">  
  9.     <h4>Our Mission<span class="chevron"></span></h4>  
  10.     <div class="acco-content">  
  11.       <p>Aliquam volutpat arcu ...</p>  
  12.     </div>  
  13.   </div>  
  14.   <div class="accowrap">  
  15.     <h4>Our Company<span class="chevron"></span></h4>  
  16.     <div class="acco-content">  
  17.       <p>Aliquam volutpat arcu ...</p>  
  18.     </div>  
  19.   </div>  
  20. </div>  
 

Carousel

Your title goes here

Carousel Code

 
  1. <div class="carousel clearfix">  
  2.   <ul class="slides">  
  3.     <li>Labore....</li>  
  4.     <li>Labore....</li>  
  5.     <li>Labore....</li>  
  6.     ...  
  7.   </ul>  
  8. </div>  
 

Message Boxes

Success!Eum ad enim laoreet graecis, ad vel sumo justo doming.
Alert!Eum ad enim laoreet graecis, ad vel sumo justo doming.
Info!Eum ad enim laoreet graecis, ad vel sumo justo doming.
Error!Eum ad enim laoreet graecis, ad vel sumo justo doming.

Message Boxes Code

 
  1. <div class="msgOk"> <span>Success!</span>Your content ...</div>  
  2. <div class="msgAlert"> <span>Alert!</span>Your content ...</div>  
  3. <div class="msgInfo"> <span>Info!</span>Your content ...</div>  
  4. <div class="msgError"> <span>Error!</span>Your content ...</div>  
 

Responsive Tables

# Sonet dus Eirmod an
1 Te natum eruditi Ex of modus pri
2 Te natum eruditi Ex of modus pri
3 Te natum eruditi Ex of modus pri
4 Te natum eruditi Ex of modus pri
5 Te natum eruditi Ex of modus pri

Responsive Tables Code

 
  1. <table class="datatable">    
  2.