Класи кои се користат за стилизирање на елементи:

Бои

  • .color-white { color:white;}
  • .color-black { color:black;} Текст
  • .color-grey { color:#999999;} Текст
  • .color-green { color:#2cc602;} Текст
  • .color-blue { color:#134a99;} Текст
  • .color-red { color:#e70028;} Текст

Падинг

  • .padded40-all { padding:40px;}
  • .padded40 {padding-top:40px; padding-bottom:40px;}
  • .padded80 {padding-top:80px; padding-bottom:80px;}
  • .padded100 {padding-top:100px; padding-bottom:100px;}

Маргини

Маргинa горе:

  • .margin-top-0 { margin-top:0 !important;}
  • .margin-top-20 { margin-top:20px !important;}
  • .margin-top-50 { margin-top:50px !important;}

Маргинa доле:

  • .margin-bottom-0 { margin-bottom:0 !important;}
  • .margin-bottom-20 { margin-bottom:20px !important;}
  • .margin-bottom-50 { margin-bottom:50px !important;}

Фонт

  • .futuraLight Текст
  • .futuraBook Текст
  • .futuraDemi Текст
  • за да се намали фонтот се користи <small> Текст </small> Текст

Наслови

  • за насловите на страните се користи <h2 > <strong> Наслов </strong></h2>

    Наслов

  • за поднасловите се користи <h3 class="color-red" > <strong> Наслов </strong></h3>

    Наслов


Неподредена листа

  • .list-styled
  • .list-styled lg (лииста со поголем фонт)

Копчиња

  • Големо црвено копче - class="btn btn-primary btn-lg text-upper" Текст
  • Мало црвено копче - class="btn btn-primary text-upper" Текст
  • Бело црвено копче - class="btn btn-border btn-lg text-upper" Текст
  • Бело црвено копче - class="btn btn-border text-upper" Текст
  • Достапно на рати - <div class="dostapno-na-rati"> достапно на рати </div>
    достапно на рати
  • Достапно на рати - class="dostapno-na-rati-1" достапно на рати
  • Нарачај - class="btn btn-primary text-upper btn-lg naracaj-cart" нарачај

Кога ке се додава копчето "достапно на рати" без анимација потребно е на почетокот на документот да се стави следниов код:

<style>
	.dostapno-na-rati {
		font-size: 14px;
		margin: 0 0 20px -10px;
		letter-spacing: 1px;
		position: relative;
		font-family: 'FuturaLightRegular',Arial,Tahoma,Helvetica,sans-serif!important;
		text-transform: uppercase;
		background: #ded6ca;
		background: -moz-linear-gradient(45deg,rgba(222,214,202,1) 0,rgba(137,98,111,1) 100%);
		background: -webkit-linear-gradient(45deg,rgba(222,214,202,1) 0,rgba(137,98,111,1) 100%);
		background: linear-gradient(45deg,rgba(222,214,202,1) 0,rgba(137,98,111,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ded6ca',endColorstr='#89626f',GradientType=1);
		color: #fff;
		display: inline-block;
		padding: 14px 18px 0 45px;
		height: 40px;
		line-height: 1;
		border-radius: 1000px;
   }

	.dostapno-na-rati:before {
		position: absolute;
		top: 6px;
		font-family: FontAwesome;
		color: #fff;
		font-size: 30px;
		content: "\f058";
		left: 8px;
	}
</style>

Кога ке се додава копчето "достапно на рати" со анимација потребно е на почетокот на документот во style тагот да се стави следниов код:

	a.dostapno-na-rati-1 {
	font-size:14px;
	margin:20px 0;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
	letter-spacing:1px;
	position:relative;
	font-family: 'FuturaLightRegular', Arial, Tahoma, Helvetica, sans-serif !important;
	text-transform:uppercase;
	background: rgb(222,214,202); /* Old browsers */
	background: -moz-linear-gradient(45deg,  rgba(222,214,202,1) 0%, rgba(137,98,111,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg,  rgba(222,214,202,1) 0%,rgba(137,98,111,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg,  rgba(222,214,202,1) 0%,rgba(137,98,111,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ded6ca', endColorstr='#89626f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	color:#fff;
	display:inline-block;
	padding:14px 25px 0px 25px;
	height:40px;
	line-height:1;
	position:relative;
	border-radius:1000px;}


a.dostapno-na-rati-1:hover {
	color: #fff;
	text-decoration:none;
	padding:14px 30px 0px 20px;}

a.dostapno-na-rati-1:after {
	position:absolute;
	top:50%;
	margin-top:-9px;
	right:15px;
	width:10px;
	height:18px;
	color:#fff;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
	text-align: center;
	line-height:18px;
	font-size:15px;
	content:"\f105";
	opacity:0;
	font-family:FontAwesome}

	a.dostapno-na-rati-1:focus:after,
	a.dostapno-na-rati-1:hover:after,
	a.dostapno-na-rati-1:active:after {
		opacity:1;
		right:10px;}

Сепаратор

  • <hr class="light"/>

Слики

  • .img-responsive (сликата за да биде респонсивна)

Табели

  • .fake-thead (класа за ред кој не се наоѓа во thead, а сакаме да изгледа како heading)

Heading 1 Heading 2
Дел за footer
Текст Текст
Fake thead Fake thead
Текст Текст

Dropdown

Код за dropdown листата:

<div class="panel-group alt" id="accordion" role="tablist" aria-multiselectable="true">
	<div class="panel panel-default">
		<div class="panel-heading" role="tab" id="headingTwo">
			<h4 class="panel-title">
			<a role="button" data-toggle="collapse" data-parent="#accordion" href="#tab1" aria-expanded="false" aria-controls="tab1">
				<div class="overlay"></div>
				<span class="naslov">Naslov 1</span>
			</a>
			</h4>
		</div>
		<div id="tab1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
			<div class="panel-body">
				<p>Aliquam velit tellus, posuere ut scelerisque eget, consequat vel erat. Phasellus eu justo vitae orci tincidunt ultricies ac ut mauris. Lorem ipsum dolor sit amet eu justo vitae orci tincidunt ultricies.</p>
			</div>
		</div>
	</div>
	
	<div class="panel panel-default">
		<div class="panel-heading" role="tab" id="headingOne">
			<div class="panel-title">
				<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#tab2" aria-expanded="true" aria-controls="tab2">
					<div class="overlay"></div>
					<span class="naslov">Naslov 2</span>
				</a>
			</div>
		</div>
		<div id="tab2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
			<div class="panel-body">
				<p>Aliquam velit tellus, posuere ut scelerisque eget, consequat vel erat. Phasellus eu justo vitae orci tincidunt ultricies ac ut mauris. Lorem ipsum dolor sit amet eu justo vitae orci tincidunt ultricies.</p>
			</div>
		</div>
	</div>
    </div>

Aliquam velit tellus, posuere ut scelerisque eget, consequat vel erat. Phasellus eu justo vitae orci tincidunt ultricies ac ut mauris. Lorem ipsum dolor sit amet eu justo vitae orci tincidunt ultricies.

Aliquam velit tellus, posuere ut scelerisque eget, consequat vel erat. Phasellus eu justo vitae orci tincidunt ultricies ac ut mauris. Lorem ipsum dolor sit amet eu justo vitae orci tincidunt ultricies.