Class in Bootstrap1

Bootstrap Sloboda u svakom pogledu
Uvod
, ,
.
. , ? ..?
.

.
.
. , ,
.
.
,
.
:
<button class="btn btn-default" type="submit">Button</button>

btn btn-default
, . ,
btn-
.
, id-
.

https://getbootstrap.com/

.

:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Bootstrap 101 Template</title>

<link href="css/bootstrap.min.css" rel="stylesheet">



</head>
<body>
<h1>
<body> <!jQuery
!!
</h1>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>
</body>
</html>

.
.
.
:
https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip
https://github.com/twbs/bootstrap/archive/v3.3.7.zip
http://getbootstrap.com/ ,
.
, .
, ,
.
,
.


<meta http-equiv="X-UA-Compatible" content="IE=edge">


, ,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
.
, . :
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
, :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p> fadeIn() ,
fadeIn( ).</p>
<button>Click to fade in boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>

<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;">
</div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

.
, ,
. ?
. ,


<script src=js/bootstrap.min.js></script>
bootstrap.min.js
. .

<div class="slides">
<img src="img/tarot1.jpg" />
</div>
// ovo je za vise prozoraanimacije sa jednom funkcijom jquerya

// ako se ima vise animacija onda se samo dodaje vise css stilova
// i u funkciji se posle zareza dodaju ti nazivi css podataka
//kao i uvom primerku ispod
$(function(){
// initalizing the first image to class 'top'
$('.slides1 img:first,.slides2 img:first,.slides3 img:first').addClass('top');
//function to alter the image index by changing the class
var change = function (){
var curr = $('.slides1 img.top,.slides2 img.top,.slides3 img.top');
var next = curr.next();
// if the next image is not available then

// set the class-top to the first image
// then vanish the current image to
// show the previous next image
if(!next.length){
next = $('.slides1 img:first,.slides2 img:first,.slides3 img:first');

next.addClass('top');
curr.animate({opacity: 0.0},1000, function() {

curr.removeClass('top');
curr.css({opacity: 1.0});
});
}else{
// pick the next image

// set the opacity to 0
// den use animation to make it appear
// above the top image
next.css({opacity: 0.0})
.addClass('top')
.animate({opacity: 1.0}, 1000, function() {
});
}
}
// repeat the function execution for every 3 secs

setInterval(change, 1000 );
});

OPACITY. .
.slides1 img:first
.addClass('top');
. ,
.
,

/* slajderi u srednjem delu stranice */

.slides{
position:relative;
height:200px;
width:200px;
}
.slides img{
position: absolute;
top:10px;
left:20px;
z-index:-2;
}
.slides img.top{
z-index:10;
}
.slides1{
position:relative;
height:200px;
width:200px;
}
.slides1 img{
position: absolute;
top:10px;
left:20px;
z-index:-2;
}
.slides1 img.top{
z-index:10;
}
.slides2{
position:relative;
height:200px;
width:200px;
}
.slides2 img{
position: absolute;
top:10px;
left:20px;
z-index:-2;
}
.slides2 img.top{
z-index:10;
}
.slides3{
position:relative;
height:200px;
width:200px;
}
.slides3 img{
position: absolute;
top:10px;
left:20px;
z-index:-2;
}
.slides3 img.top{
z-index:10;
}
/* ukupa div za sve osim footer*/
.ukupna{
background-color: lavender;
margin-left: 5px;
}

<div class="slides1">
<img src="img/talisman1.jpg" />
</div>
1 2, 3 .
. .

.
, ,
. ,
, .
, ,
, ,
,

. 100%,
.

, .
.
. , , ,
, .
. .
:
.alert .
(border), (padding),
(margin).
.
<div class="alert alert-success" role="alert"></div>

<div class="alert alert-info" role="alert"></div>
<div class="alert alert-warning" role="alert"></div>
<div class="alert alert-danger" role="alert">...</div>
.alert-dismisable ,
.
HELPER class category .
. Lists
popover
Badges
, , ()

(carousel)
,

,
,
modal

.
, . :
http://www.bootply.com/60206
.


,
.
:
bootstrap.min.js bootstrap. min.ccs
bootstrap.js bootstrap.ccs.
,
min
.

, .

<! -->

<! -->
, , ,
.
www.neki_sajt.com/
css/
js/
fonts/
include/
index.html ili index.php ili index. .
.
, , ,

.

.
,
, , ,

, ,
,
, ,
. ,
.
, .
, .
.

CSS.
.
. , ,
, , , ,
.
,
,
.
. , ,
, .
.
.
class="btn btn-default" ,
. btn-primary,
btn-dangers, btn-succes, btn-info, btn-warning i btn-link. btn-
,
. .
btn-primary
btn-succes
btn-info
btn-warning
btn-link

btn-dangers
btn-deafult - .
, , .
- .alert
:
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">
...
</div>
alert
alert-success .
, .
.
, .

:
<div class="alert alert-warning " >
<strong>!</strong>
....
<button type="button" class="close" data-dismiss="alert">

</button>
</div>
alert
/* */
.alert {
padding: 15px; /* */
margin-bottom: 20px;/* */
border: 1px solid transparent;/* */
border-radius: 4px;/* */
}
/* */
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
/* */
.alert-success hr {
border-top-color: #c9e2b3;
}
/* */
.alert-success .alert-link {
color: #2b542c;
}
/* */
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
alert
, .
,
, :
/* alert-info
alert-info_moja */
.alert-info_moja {
background-color: #4CAF50; /* */
border: none; /* */
color: white;/* */
padding: 15px 32px;/* 15px 32px; */
text-align: center;/* */
}
:
<div class="alert alert-info_moja" role="alert">...</div>.
.
, ,
, .
.
. &time; .

, ,
<h1 style=color>&heart</h1>
.
,
.
moj_stil.css . .
.
. , ,
. .
getById. ,
, .
,
<style>
.btn-zuto{
background-color: #ffb85c;
color:white;
}
</style>
<div class="alert btn-zuto">
opomena
<button type="button" data-dismiss="alert"> X </button>
</div>

.
,
<div class="alert btn-zuto">
<div class="alert alert-success" role="alert">

,
.
(tooltip)

. :
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-
placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
</button>

placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
</button>

placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
</button>

placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
</button>

. data-container, data-toggle data-palcment
datacontent.
data-container
data-toggle
.
.
data-palcment ,
datacontent

class="btn btn-success"
class="btn btn-info"
class="btn btn-warning"
class="btn btn-danger"
.
:
<a href=# data-toggle=tooltip data-placement=top data-original-title=Na primer> Nesto

napisano</a>
,
h1, h2, h3, h4, h5, h6 .
h1, h2, h3, h4, h5, h6 .
Popovers. Popovers
Jquery-a
$('#element').popover('toggle')
$('#element').popover('show')
$('#element').popover('hide')
$('#element').popover('destroy')
data-toggle="popover"
, .
data-toggle="popover" data-toggle=" tooltip".

, a:hover, ,
.

12
12 .
.
.
<div class="container"> <! -->

<div class="row"> <! -->
<h1> </h1>
<h2> ,
<br>
class="col-lg-3",
12 , 25%<br>
12
<br>
col-lg-3 a , lg
1200px.<br>
col-lg-3
class="col-lg-3 col-xs-3".
- . <br>

img-resposive, </h2>
<h2> Large screen lg >= 1200px</h2>
<div class="col-lg-3" style="background: lightblue"> prvi</div>
<div class="col-lg-3" style="background: darkred"> drugi</div>
<div class="col-lg-3" style="background: blue"> treci</div>
<div class="col-lg-3" style="background: antiquewhite"> cetvrti</div>
<h2> Media screen md >= 992px</h2>

<div class="col-md-3" style="background: brown"> prvi</div>
<div class="col-md-3" style="background: red"> drugi</div>
<div class="col-md-3" style="background: orange"> treci</div>
<div class="col-md-3" style="background: greenyellow"> cetvrti</div>
<h2> Small screen sm >= 768px</h2>

<div class="col-sm-3" style="background: pink"> prvi</div>
<div class="col-sm-3" style="background: deepskyblue"> drugi</div>
<div class="col-sm-3" style="background: orchid"> treci</div>
<div class="col-sm-3" style="background: lightgrey"> cetvrti</div>
<h2> Extra Small screen xs >= 768px</h2>

<div class="col-xs-3" style="background: lightblue"> prvi</div>
<div class="col-xs-3" style="background: darkred"> drugi</div>
<div class="col-xs-3" style="background: blue"> treci</div>
<div class="col-xs-3" style="background: antiquewhite"> cetvrti</div>
</div>

class="col-lg-3 col-xs-3"
.
(class="col-lg-2 col-md-2 col-sm-3 col-xs-2") , .

:
@media(max-width:760px) {
.neka_klasa{
Display:block;
}
.social-share.fixed-right {
display: none;
}
}
, ,

,
.
container

.
, .

@media(max-width:760px) {
float .

<div class="container"> <! -->
</div> <! -->
.
,
, .
jumbotron

,
.
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap HTML, CSS, JS ,
</p>
</div>

<div class="container">
<h1>Bootstrap Tutorial</h1>
<p> Bootstrap HTML, CSS, JS ,
.</p>
</div>
<p> </p>
<p> </p>
</div>
.
.badge

, , .
<h1> </h1>
<h3>
Ovo je zgodno sa se upotrebi na mestima gde je potrebno nesto nagalasiti, znaci obojiti nekom
bojom<br>A ppotrebno je primeniti <b> span i jednu od ponudjenih klasa label-default, label-
primary,label-warning</b><br>iza klase <b> label</b>. Cime se dobija isto kao i kod slicnih klasa kod
dugmadi Ali. mozete i sami napisati drugu klasu sa sospstvenim promenama koje se odnose na tekst ili
ono<br>
sto je izmedju <b>span tagova.</b>
</h3>
neki natpis<span class="label label-default "> NOVO</span><br><br>
neki natpis<span class="label label-primary "> NOVO</span><br><br>
neki natpis<span class="label label-warning "> NOVO</span> pronadjeno
<h2> moze i ovakava primena gdese sav sadrzaj nalazi izmedju H1 tagova </h2>
<h1>Inbox <span class="label label-danger "> NOVO</span></h1>
<h2>ali ako postavimo umesto h1 h3 </h2>
<h2> sve se smanjuje. Klsom label-danger i slicno se uokviruje natpis izmedju span. </h2>
<h1> Novi deo gradiva - NOTIFIKACIJE</h1>

<h2> <a href="#">Inbox <span class="badge">9</span> </a> <br>
ovim se dobija da je broj 9 uokviren u crni krug, simulirajuci da je nam stiglo 9 poruka u inboksu<br>
<a href="#">Inbox <span class="badge">9</span> </a>
<button type="button" class="btn btn-primary">Notifikacija<span
class="badge">20+</span></button></h2>
<h1>Inbox <span class="label label-danger "> NOVO</span></h1> <br>
,
. :
<button type="button" class="btn btn-primary">


Notifikacija<! -->
<span class="badge"><!
-->
20+<! span -->
</span><! -->
</button><! -->
,
, .
,
, .
- ,
.
<div>
<h1> PAGINACIJA gradiva </h1>
<h3>
Ovo je nacin da se naprave dugmad za paginaciju. Paginacija je mogucnost da prikazete samo odredjen
broj<br>prikaza na jednom ekranskom prikazu ili stranici, dok se ostali ne vide dok se ne kline na neko
od ponudjenih<br>dugmadi, a koje je povezano sa php skriptom koja vrsi stranicenje izracunavajuci od
ukupnog broja onoga<br>sto ima za prikazivanje broj stranica prema nasim zadatim vrednostim koliko
prikazani komponenti zelimo da vidimo<br>na jednoj strannici. Pogodno je kod baza podataka ili
prikazivanja slika u nekoj galeriji slika <br>
</h3>
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<h1>
Ovaj dole drugi primer za razliku od predhodnog primera u ovom primeru je postavljeno da se vidi
aktivno dugme. Ali moguce je dodatikao i kod menija da se to i krece sa klikom na neko drugo dugme sa
drugim brojem
</h1>
<ul class="pagination nav-pills">

<li><a href=""></a></li>
<li class="active"><a href="">10</a></li>

<li><a href="">11</a></li>
<li><a href="">12</a></li>
<li><a href="">13</a></li>
<li><a href="">51</a></li>
<li class="disabled"><a href=""></a></li>
</ul>
<h3>na ovom linku se mogu pronaci karakteri i ostalo<b> https://dev.w3.org/html5/html-author/charref
</b>gde mozete videti koji od tih
znakova ima koju vrednost koja pocine sa ovima znakom <b>&</b>. kao u primeru koji je vec
upotrebljen </h3>
<h1> prev and next dugmad</h1>
<ul class="pager">
<h1> <li class="previous "><a href=""> Previous</a></li></h1>
<li class="next"><a href=""> Next</a></li>
</ul>
<h2> upotrebom klasa <b> previous i next u Li tagu</b> dobija se razdvajanje levo i desno dugmadi na
prikazuovo dugme je vece od desnog jer je ubaceno <b>u h1 tag</b> ali mu se isto drugim kalsam moze
promeniti opis
</h2>
</div>
.
class="pagination pagination-lg".
. pagination-sm
.
Breadcrumbs
.
. :
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li><a href="#">Pictures</a></li>
<li class="active">Vacation</li>
</ul>
Home Private Pictures,

Vacation class="active".
<li><a href="#">Home</a></li>,

<ul class="breadcrumb">
</ul>
, bootstrap.css,
.
Buttons
. ,
.

.
<p><h2> bootstrapu btn-group</h2></p>
<div class="btn-group">
<button type="button" class="btn btn-default"> standardno</button>
<button type="button" class="btn btn-primary"> primarno </button>
<button type="button" class="btn btn-info"> informaciono </button>
<button type="button" class="btn btn-danger"> opasnost </button>
<button type="button" class="btn btn-warning">upozorenje </button>
<button type="button" class="btn btn-success">uspesno </button>
</div>
.

<button type="button" class="btn btn-primary btn-block">Button 1</button>

<button type="button" class="btn btn-primary btn-block">Button 2</button>
btn-block. ,
, .
.btn-group-justified ,
, .btn-group-vertical
. display: inline;
display: block; .
img
,
. , ,
.
.
, , .
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

.
http://www.css3maker.com/.
:
border:groove 5px #bf2654;
-moz-border-radius: 26px;
-webkit-border-radius: 26px;
border-radius: 26px;
.classname {
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
transform: rotate(4deg) scale(1) skew(1deg) translate(10px);
-webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);
-moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);
-o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);
-ms-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);
}
.classname:hover{
transform: rotate(4deg) scale(0.761) skew(12deg) translate(-78px);
-webkit-transform: rotate(4deg) scale(0.761) skew(12deg) translate(-78px);
-moz-transform: rotate(4deg) scale(0.761) skew(12deg) translate(-78px);
-o-transform: rotate(4deg) scale(0.761) skew(12deg) translate(-78px);
-ms-transform: rotate(4deg) scale(0.761) skew(12deg) translate(-78px);
}
,
. ,
.

<img src="..." class="img-responsive" alt="Responsive image">

360 1200 px.
max-width: 100%;
height: auto;
display: block;
img-responsive .center-block umesto .text-center.

IE 8-10
width:100%\9
.

? ,
.
,
:
<table class=table> <! -- >
<th><tr><td> <tbody>,
<tr><td>
</table><! -- >
,
.
.table-striped
.table-bordered
.table-hover ,
.table-condenset
.

<table class=table table-striped > <! -- >

</table><! -- >
table-striped
. ,
: <th>, <tr>,
<td>, <tbody> .
..
<! -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<! (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
, .
, , table-responsive
.
<div class="table-responsive">
<table class="table">
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
</table>
</div>

.
, , , .
,
<form>
<div class="form-group">
<label for=" ">Email address</label>
<input type="email" class="form-control" id=" " placeholder="Email">
</div>
<label for=" ">Password</label>
<input type="password" class="form-control" id=" " placeholder="Password">
</div>
<label for=" ">File input</label>
<input type="file" id=" ">
<p class="help-block"> .
<textarea></textarea></p>
</div>
<div class="checkbox">
<label> <input type="checkbox"> </label>
</div>
<button type="submit" class="btn btn-default"></button>
</form>
,
.
, .
. .
.form-inline ,
.sr-only
.form-horisontal
<form class="form-horizontal">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="col-sm-offset-2 col-sm-10"> <div class="checkbox">
<label> <input type="checkbox"> </label>
</div>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default"></button>
</div>
</div>
</form>
.
text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, color.
.
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
text area :
<textarea class= form-control rows=3> </textarea>
3 ,
, .
, cols=2.
.
.
<label> <input type="checkbox" value=""> Option one is this and that—be sure to include why
it's great </label>
</div>
<div class="checkbox disabled">
<label> <input type="checkbox" value="" disabled> </label> </div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one
is this and that—be sure to include why it's great </label> </div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be
something else and selecting it will deselect option one </label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
</label>
</div>
2 ,
.
.
.checkbox-inline
i .radio-inline dok aria-label sakriva natpise labela, boreder-radius
, :
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
multiple .
.
. .
. ,

.
.active ,
. default navbar
, , progress bar
. :active dropdown item,
active pagination, active list item button ,
.
.affix
- position:fixed .
.
.alert ,

. . :
.alert-danger
.
.alert-dismissable .close .
.
.alert-info
.
.alert-link
.alert-success ,

.alert-warning

.alert-dismissable
.close .
.badge .
,
.
.bg-danger
.bg-info
.bg-primary
.bg-success
.bg-warning

.breadcrumb

,
.
.
.
.
.btn .
.btn-block (parent element)
.btn-danger
.btn-default .
.btn-group
.btn-group-justified
.btn-group-lg , .btn-group-sm, .btn-group-xs
.
.btn-group-vertical
.btn-info
.btn-lg
.btn-xs
.btn-sm
.btn-link
.btn-primary
.btn-success
.btn-warning
.caption .thumbnail
.caret

. ,
.
, .
.
. , .
.carousel C
.carousel-caption C
.carousel-control C
.carousel-indicatorsA
,
.
.carousel-inner ,
.center-block display:block margin-
right:auto margin-left:auto
.
.
.checkbox
.checkbox-inline
.clearfix floats .
.close close
.col-*-*Responsive grid s
(< 768px), sm (768px), md (992px), lg
(1200px). 12
.col-*-offset-* ,
.col-*-pull-*
.col-*-push-*

:
<div class="container-fluid">
<h1>Push and Pull</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-4 col-sm-push-8" style="background-color:lavender;">.col-sm-4 .col-sm-push-8
</div>
<div class="col-sm-8 col-sm-pull-4" style="background-color: red ;">.col-sm-8 .col-sm-pull-4 </div>
</div>
</div>
.collapse
.
.collapse in
.
.
, ,
, , .
.container , ,
.container-fluid .
.danger
.
,
. , .
,
.
.disabled dropdown item text color "no-parking-sign" icon

hover
.disabled pagination link ,
.
,

.disabled button
.disabled list item list group
.divider dropdown menu
.dl-horizontal
<h2>Typography</h2>
<p>Use the .dl-horizontal class line up the description list side-by-side when the browser window
expands:</p>
<dl class="dl-horizontal">
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<p><strong>Tip:</strong> Try to resize the browser window to see the behaviour of the description
list.</p>
</div>
Use the .dl-horizontal class line up the description list side-by-side when the browser window expands:
Coffee- black hot drink
Milk- white cold drink
Tip: Try to resize the browser window to see the behaviour of the description list.
.dropdown

.dropdown-header
.dropdown-menu
.dropdown-menu-right
.dropdown-toggleU
.
(toggle)
.dropup ,
.
.embed-responsive
,
.embed-responsive-16by9 16:9
aspect ratio
.embed-responsive-4by3C 4:3 aspect ratio
.embed-responsive-item .embed-responsive.
. .
. , container
,
embed-responsive embed-responsive-16by9, class="embed-responsive-item"
iframe .
. <body>
.
<div class="container" >

<h2>Responsive Embed</h2>
<p>Create a responsive video and scale it nicely to the parent element with an 16:9 aspect ratio</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
</div>
</div>
.embed-responsive. ,

.fade fading alert
.form-controlU input, textarea,

.
.form-control-feedback .
<h2>Horizontal form: control states</h2>
<label class="col-sm-2 control-label">Focused</label>
<input class="form-control" id="focusedInput" type="text" value="Click to focus...">
</div>
</div>
<label for="inputPassword" class="col-sm-2 control-label">Disabled</label>
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..."
disabled>
</div>
</div>
<fieldset disabled>
<label for="disabledTextInput" class="col-sm-2 control-label">Disabled input and select list
(Fieldset disabled)</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
</div>
<label for="disabledSelect" class="col-sm-2 control-label"></label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
</div>
</fieldset>
<div class="form-group has-success has-feedback">
<label class="col-sm-2 control-label" for="inputSuccess">Input with success and glyphicon</label>
<input type="text" class="form-control" id="inputSuccess">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
<div class="form-group has-warning has-feedback">
<label class="col-sm-2 control-label" for="inputWarning">Input with warning and glyphicon</label>
<input type="text" class="form-control" id="inputWarning">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
</div>
<div class="form-group has-error has-feedback">
<label class="col-sm-2 control-label" for="inputError">Input with error and glyphicon</label>
<input type="text" class="form-control" id="inputError">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
</form>
</div>
,

. ,

.
.form-control-static
<h2>Horizontal form with static control</h2>
<label class="control-label col-sm-2" for="email">Email:</label>
<p class="form-control-static">someone@example.com</p>
</div>
</div>
<label class="control-label col-sm-2" for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
.form-group
input label
.form-horizontal labels groups form controls
.form-inline <form> inline-block .
768px
.glyphicon ( icon). 260
, .
.h1 - .h6 (h1-h6)
has-
:

. has-succe has-feedback
Glyphicon, ,
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_horizontal_all&stacked=h
.
<div class="form-group has-success has-feedback">

<label class="col-sm-2 control-label" for="inputSuccess">Input with success and glyphicon</label>
<input type="text" class="form-control" id="inputSuccess">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
.has-danger
.has-feedback
.has-feedback (checkmark, warning and error signs)
.has-success

.has-warningA -
.hidden (display:none)
.hidden-*
.hidden-print (display:none),
print (preview)
.hide .hidden
.icon-bar navbar
.icon-next . ,
glyphicon-
.icon-prev
.img
.img-circle (
IE8 )
.img-rounded
.img-thumbnail (borders)
.info background (<tr> (<td>).

.initialism <abbr>
.
, , ,
.
.input-group

<form>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="email" type="text" class="form-control" name="email" placeholder="Email">
</div>
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="password" type="password" class="form-control" name="password"
placeholder="Password">
</div>
<span class="input-group-addon">Text</span>
<input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
</div>
</form>
.input-group-addon
.input-group ,
.
.input-group-btn
.input-group next input. search bar

lg sm .
.input-group-lg
.input-group-sm
.input-lg
.input-sm
.invisible (visibility:hidden),
.
.item :
<div id="myCarousel" class="carousel slide" data-ride="carousel">


<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>


<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania">
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower">
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
</div>
</div>


<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
,
.
.jumbotron
, .
.
, .
. .
.label
.label-danger label
.label-info label
.label-success label
.label-warning label
.control-label
.lead
.left
,
.
.
.

<h2> </h2>
<ul class="list-group">
<li class="list-group-item"> </li>
</ul>
</div>

<h2> </h2>
<li class="list-group-item list-group-item-success"> </li>
<li class="list-group-item list-group-item-info"> </li>
<li class="list-group-item list-group-item-warning"> </li>
<li class="list-group-item list-group-item-danger"> </li>
</ul>
<h2> </h2>
<p> :</p>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success"> </a>
<a href="#" class="list-group-item list-group-item-info"> </a>
<a href="#" class="list-group-item list-group-item-warning"> </a>
<a href="#" class="list-group-item list-group-item-danger"> </a>
</div>
</div>
.list-group <li>
.list-group-item <li>
.list-group-item-danger <li>
.list-group-item-heading (
<li>)
.list-group-item-info <li>
.list-group-item-success <li>
.list-group-item-text item text . (
<li>)
.list-group-item-warning <li>
.list-inline items ( )
<h3>Inline List</h3>
<ul class="list-inline">
<li><a href="#">Menu 1</a></li>
</ul>
</div>
.list-unstyledRe
<ul> <ol>
.mark : Highlighted text
,
.
<h2>Media Object</h2>
<p>Use the "media-left" class to left-align a media object. Text that should appear next to the image, is
placed inside a container with class="media-body"</p>
<p>Tip: Use the "media-right" class to right-align the media object.</p><br>


<div class="media">
<div class="media-left">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Left-aligned</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
</div>
</div>
<hr>


<div class="media">
<h4 class="media-heading">Right-aligned</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
</div>
<div class="media-right">
</div>
</div>
</div>
,
.
.media ( ,
)
.media-body

.media-heading
.media-list
</div>
<h4 class="media-heading">Nested media heading</h4> Cras sit amet nibh libero, in gravida
nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at,
tempus viverra turpis.
<div class="media">
<a href="#">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="media">
<a href="#">
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
,
, .
.media-object ( )

.
data-toggle="modal" .

<h2>Modal Example</h2>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open
Modal</button>


<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">


<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
, ,
.
.modal
.modal-body
.modal-content ,

.modal-dialog
.modal-footer
.modal-header header ( title
)
.modal-lg , .
.modal-open <body>
(overflow:hidden)

.
.modal-sm ( )
.modal-title

.
: ,
, .
, , , ,
( -).
. , .
<nav class="navbar navbar-default">

<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
</ul>
</div>
</nav>
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
.nav
.nav .navbar-nav se <ul> list items

.nav nav-pills pill menu
.nav nav-tabs tab menu
.nav-justified tabs/pills. 768px items
.nav-stacked tabs pills
.nav-tabs
.navbar
.navbar-brand

.navbar-btn
.navbar-collapse /

.navbar-default
.navbar-fixed-bottom (sticky/fixed)
.navbar-fixed-top (sticky/fixed)
.navbar-form
.navbar-header /

.navbar-inverse
.navbar-left nav , ,
.navbar-link ,
.
,
.navbar-nav <ul> list items

.navbar-right nav , ,
.navbar-static-top , , .
4px border-radius
.navbar-text

.navbar-toggleStyles the button that should open the navbar on small screens. Often used together with
three
.icon-bar
menu icon (hamburger/bars)
.prev "previous"
.next next

. . :
<ul class="pager">
<li class="previous"><a href="#">Previous</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
.
<div class="page-header">
<h1>Example Page Header</h1>
</div>
<p> .</p>
<p> .</p>
</div>
.page-header
.pager previous/next ( <ul> e )
.next pager (
next)
.previous pager (
previous)

.
. PHP MYSQLI ,
.
, ,
. PHP MYSQL
, .
.
.
.
. ,
PHP MYSQL .
, .
<h2> </h2>
<p> :</p>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
.pagination <ul>
.pagination-lg ,
18px. 14px
.pagination-sm pagination-lg
12px.
,
data-toggle="pill"
.
. ,
.
.
, .
. . - .
.panel
.panel-body
.panel-collapse :
<h2> </h2>
<p> .</p>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1"> </a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Body </div>
<div class="panel-footer">Footer </div>
</div>
</div>
</div>
</div>
.panel-group
.panel-title panel header
.panel-heading ( ),
16px)
.panel-footer ( )
bootstrap.css .
.
, ,
. , . ,
.
.
.panel , ,
. , ,
.
.
.panel { /* */
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body { /* */
padding: 15px;
}
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.panel-heading > .dropdown .dropdown-toggle {
color: inherit;
}
.panel-title { /* -*/
margin-top: 0;
margin-bottom: 0;
font-size: 16px;
color: inherit;
}
.panel-title > a,
.panel-title > small,
.panel-title > .small,
.panel-title > small > a,
.panel-title > .small > a {
color: inherit;
}
.panel-footer { /* */
padding: 10px 15px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
/* */
.panel > .list-group,
.panel > .panel-collapse > .list-group {
margin-bottom: 0;
}
.panel > .list-group .list-group-item,
.panel > .panel-collapse > .list-group .list-group-item {
border-width: 1px 0;
border-radius: 0;
}
.panel > .list-group:first-child .list-group-item:first-child,
.panel > .panel-collapse > .list-group:first-child .list-group-item:first-child {
border-top: 0;
}
.panel > .list-group:last-child .list-group-item:last-child,
.panel > .panel-collapse > .list-group:last-child .list-group-item:last-child {
border-bottom: 0;
}
.panel > .panel-heading + .panel-collapse > .list-group .list-group-item:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.panel-heading + .list-group .list-group-item:first-child {
border-top-width: 0;
}
.list-group + .panel-footer {
border-top-width: 0;
}
/* */
.panel > .table,
.panel > .table-responsive > .table,
.panel > .panel-collapse > .table {
margin-bottom: 0;
}
.panel > .table caption,
.panel > .table-responsive > .table caption,
.panel > .panel-collapse > .table caption {
padding-right: 15px;
padding-left: 15px;
}
.panel > .table:first-child,
.panel > .table-responsive:first-child > .table:first-child {
}
.panel > .table:first-child > thead:first-child > tr:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child {
}
.panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .table:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
}
.panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .table:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
}
.panel > .table:last-child,
.panel > .table-responsive:last-child > .table:last-child {
}
.panel > .table:last-child > tbody:last-child > tr:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child {
}
.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
}
.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
}
.panel > .panel-body + .table,
.panel > .panel-body + .table-responsive,
.panel > .table + .panel-body,
.panel > .table-responsive + .panel-body {
}
.panel > .table > tbody:first-child > tr:first-child th,
.panel > .table > tbody:first-child > tr:first-child td {
border-top: 0;
}
.panel > .table-bordered,
.panel > .table-responsive > .table-bordered {
border: 0;
}
.panel > .table-bordered > thead > tr > th:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
.panel > .table-bordered > tbody > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
.panel > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-bordered > thead > tr > td:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
.panel > .table-bordered > tbody > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
.panel > .table-bordered > tfoot > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
border-left: 0;
}
.panel > .table-bordered > thead > tr > th:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
.panel > .table-bordered > tbody > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
.panel > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-bordered > thead > tr > td:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
.panel > .table-bordered > tbody > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
.panel > .table-bordered > tfoot > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
border-right: 0;
}
.panel > .table-bordered > thead > tr:first-child > td,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
.panel > .table-bordered > tbody > tr:first-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td,
.panel > .table-bordered > thead > tr:first-child > th,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
.panel > .table-bordered > tbody > tr:first-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
border-bottom: 0;
}
.panel > .table-bordered > tbody > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
.panel > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-bordered > tbody > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
.panel > .table-bordered > tfoot > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
border-bottom: 0;
}
.panel > .table-responsive {
margin-bottom: 0;
border: 0;
}
/* */
.panel-group {
margin-bottom: 20px;
}
.panel-group .panel {
margin-bottom: 0;
border-radius: 4px;
}
.panel-group .panel + .panel {
margin-top: 5px;
}
.panel-group .panel-heading {
border-bottom: 0;
}
.panel-group .panel-heading + .panel-collapse > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group {
}
.panel-group .panel-footer {
border-top: 0;
}
.panel-group .panel-footer + .panel-collapse .panel-body {
border-bottom: 1px solid #ddd;
}
/* */
.panel-default {
border-color: #ddd;
}
.panel-default > .panel-heading {
color: #333;
border-color: #ddd;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #ddd;
}
.panel-default > .panel-heading .badge {
color: #f5f5f5;
background-color: #333;
}
.panel-default > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #ddd;
}
/* .default, .primary,
.dangers, .warning .
.*/
.panel-primary {
border-color: #337ab7;
}
.panel-primary > .panel-heading {
color: #fff;
background-color: #337ab7;
border-color: #337ab7;
}
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #337ab7;
}
.panel-primary > .panel-heading .badge {
color: #337ab7;
background-color: #fff;
}
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #337ab7;
}
/* ,
*/
.panel-success {
}
.panel-success > .panel-heading {
color: #3c763d;
background-color: #dff0d8;
}
.panel-success > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #d6e9c6;
}
.panel-success > .panel-heading .badge {
color: #dff0d8;
background-color: #3c763d;
}
.panel-success > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #d6e9c6;
}
/*
,
*/
.panel-info {
}
.panel-info > .panel-heading {
color: #31708f;
background-color: #d9edf7;
}
.panel-info > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #bce8f1;
}
.panel-info > .panel-heading .badge {
color: #d9edf7;
background-color: #31708f;
}
.panel-info > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #bce8f1;
}
/* ,
*/
.panel-warning {
border-color: #faebcc;
}
.panel-warning > .panel-heading {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}
.panel-warning > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #faebcc;
}
.panel-warning > .panel-heading .badge {
color: #fcf8e3;
background-color: #8a6d3b;
}
.panel-warning > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #faebcc;
}
/* ,
*/
.panel-danger {
border-color: #ebccd1;
}
.panel-danger > .panel-heading {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
.panel-danger > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #ebccd1;
}
.panel-danger > .panel-heading .badge {
color: #f2dede;
background-color: #a94442;
}
.panel-danger > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #ebccd1;
}
,
, .
.
,
, .

.

.
,
. .
.panel-danger
.panel-info
.panel-success
.panel-warning
Collapse.prototype.show = function () {
if (this.transitioning || this.$element.hasClass('in')) return
var activesData
var actives = this.$parent && this.$parent.children('.panel').children('.in, .collapsing')
if (actives && actives.length) {
activesData = actives.data('bs.collapse')
if (activesData && activesData.transitioning) return
}
bootstrap.js .
, bootstrap.js
bootstrap.ccs .
.popover
. :
<h3>Popover Example</h3>
<a href="#" data-toggle="popover" title="Popover Header" data-content="
">Toggle popover</a>
</div>
<script>
$('[data-toggle="popover"]').popover();
});
</script>

.
.pre-scrollable <pre> , (max-height
350px )
,
.
0% 100%.
, .active
.

<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40%
</div>
</div>
<div class="progress-bar" role="progressbar"
aria-valuenow="70"
aria-valuemin="0"
aria-valuemax="100"
style="width:70%">
<span class="sr-only">70% Complete</span>
</div>
</div>
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Complete (success)
</div>
</div>
.progress progress bar

.progress-bar progress bar
.progress-bar-danger progress bar
.progress-bar-info progress bar
.progress-bar-striped striped progress bar
.progress-bar-success progress bar
.progress-bar-warning progress bar
.pull-left
.pull-right
.right carousel .
.row
.show (display:block)
small
<h1>Lighter, Secondary Text</h1>
<p>The small element is used to create a lighter, secondary text in any heading:</p>
<h1>h1 heading <small>secondary text</small></h1>
</div>

Lighter, Secondary Text
The small element is used to create a lighter, secondary text in any heading:
h1 heading secondary text
.sr-only .
icon-bar .
780 .
. :
<nav class="navbar navbar-inverse navbar-fixed-top">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
.. .
sr-only icon-bar ,
.
,
, .
.sr-only-focusable sr-only (
).
.success
.tab-content
.tab-pane , tabs/pills, pills
. ,
.
, ,
.

.

<div class="tab-pane " id="home21">
<div class="container active ">

<div class="row">
<h2><b> Da bi se mogao upotrebiti primer</b></h2>
<ul class="nav nav-pills" style="border: red solid 3px; ">
<li class="active"><a href="#strana " data-toggle="pill"></a></li>
<li><a href="#strana1" data-toggle="pill"></a></li>
</ul>
<! -->
<div class="tab-content">
<div class="tab-pane active" id="strana">
<h2 >
Ovo je dobar nacin da dobijete prikaz vise stranica jednu preko druge
</h2>
</div>
</div><! -->
<!

. .
<h2> <b> . ,
-->
</div><! -->
</div><! -->
</div><! -->
.tab-content
.
id="strana".
,

.
.
.table (padding, bottom borders, etc)

.table-bordered - borders
.table-condensed padding
.table-hoverCrea hover .

.table-responsiveMakes
. , ,
scrollbar,
.text-capitalize
<h2> , </h2>
<p class="text-lowercase"> .</p>
<p class="text-uppercase"> .</p>
<p class="text-capitalize"> .</p>
</div>
.text-center
.text-danger
.text-hideHides
.text-info
.text-justify justified text ,

.text-left
.text-lowercase
.text-muted
.text-nowrap
<h2> </h2>
<p class="text-left"> . text-left </p>
<p class="text-right"> . text-right </p>
<p class="text-center"> . text-center </p>
<p class="text-justify"> text-justify.</p>
<p class="text-nowrap"> text-nowrap .</p>
<p><strong>Tip:</strong> justify nowrap
.</p>
</div>
.text-primary
.text-right
.text-success
.text-uppercase
.text-warning
.thumbnailAdds ( )
thumbnail
.tooltip

.visible-*Deprecated as of v3.2.0.
.hidden-*
.visible-print-block (display:block) print (pre)view

.visible-print-inline (display:inline) print (pre)view
.visible-print-inline-block (display:inline-block) print (pre)view
.warning (<tr> (<td>).
.well Ad
.well-lg lg well ( )
.well-sm sm ( )

,
, ,
.
.
,
. ,
++ ,
, -.
,
.
<script src="js/jquery-dodatak.js" type="text/javascript"></script>
<script src="js/javascript-dodatak.js" type="text/javascript"></script>
,
, . ,

.
. js/javascript-dodatak.js .
javascript-dodatak.js js .
www.neki-domen.com/js/javascript-dodatak.js
,
, .
// ovo je za vise prozora animacije sa jednom funkcijom jquerya

// ako se ima vise animacija onda se samo dodaje vise css stilova
// i u funkciji se posle zareza dodaju ti nazivi css podataka
//kao i uvom primerku ispod
$(function(){
// 'top'
//
// . :
// .slides1 img:first
// , .slides2 img:first
// , .slides3 img:first
// .
// . .
// .slides img .
// curr.animate({opacity: 0.0},1000,
//
.
/* slajderi u srednjem delu stranice */

.slides{
position:relative;
height:200px;
width:200px;
}
.slides img{
position: absolute;
top:10px;
left:20px;
z-index:-2;
}
.slides img.top{
z-index:10;
}
.con{
margin:10px;
}
/*
<div class="slides">
</div>


, .

, .
*/
//
var change = function (){
//
var curr = $('.slides1 img.top,.slides2 img.top,.slides3 img.top');
var next = curr.next();
//
// -
//
//
if(!next.length){
next = $('.slides1 img:first,.slides2 img:first,.slides3 img:first');
next.addClass('top');
curr.animate({opacity: 0.0},1000, function() {
curr.css({opacity: 1.0});
});
}else{
//
// 0
//
//
next.css({opacity: 0.0})
.addClass('top')
.animate({opacity: 1.0}, 1000, function() {
});
}
}
// ,
// . 3000
setInterval(change, 3000 );
});
.
:
-------------------------------
<h2> </h2>
<p>
. ,

data-toggle="collapse" data-target="#demo"
collapse"
data-target="#demo".
</p>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple
collapsible</button>
<div id="demo" class="collapse">
,
, toggle
collapse, "#demo".
</div>
</div>
---------------------------------------------------------------------------------------------
:
$(#demo).click( function(){
$(. Collapse).show(); // show slow ili fast
// collapse
});
<button type="button" class="btn btn-info" id="demo" >Simple collapsible</button>

<div class="collapse">
,
, toggle
collapse, "#demo".
</div>
.show();
toggle.show(); .
.show(); .hide();

<script>
$(".btn1").click(function(){
$("# demo ").hide();
});
$(".btn2").click(function(){
$("# demo ").show();
});
});
</script>
</head>
<body>
<p> , .</p>
<div id="demo" class="collapse">
,
, toggle
collapse, "#demo".
</div>
<button class="btn1"></button>
<button class="btn2"></button>

<h2>Collapsible Panel</h2>
<p>Click on the collapsible panel to open and close it.</p>
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
</div>
<h2>Collapsible List Group</h2>
<p>Click on the collapsible panel to open and close it.</p>
<a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
</div>

.
.

,
, .
:
12,
, 12 .

- .
,
, -

, 12
.
.
, .
.
.
, .
, .
<div class="container" style="border: #ff1e12 solid 5px;"> 

<div class="row "> <! -->
<div class=" col-xs-12 col-lg-3" style="padding-top: 10px; padding-bottom:10px;">
<! -->
<div class="card cart-block" align="center">
<div class="slides2" >
<img src="img/img4.jpg" />
<img src="img/img.jpg" />
</div>

<div class="card-block">
<h4 class="text-center"></h4>
<h5 class="text-center"> </h5>
<p class="text-justify">
.
</p>
<div class="text-center">
<a href="#" class="btn btn-primary">MORE</a>
</div>
</div>
</div>
</div> <! -->
<! -->
<div class="col-xs-12 col-lg-6" style="padding-top:10px; padding-bottom: 80px;">
<h2 class="text-center"> .<br></h2>
<h3 class="text-muted">Dobrodoli dragi Posetioci.</h3>

<p class="lead text-justify">
Hvala Vam to ste posetili ovaj sajt i zaiteresovaliste se za Ezoterijske nauke.Strane u ovom sajtu ine
samo neke nano delove jedne ogromne, praktino neiscrpne oblasti ove duhovne i sveproimajue oblasti
ljudskog delovanja, znanja i postojanja.Teme su izabrane po kriterijumu autorovih mnogobrojnih
ezoterijskih interesovanja a naroito na osnovu praktinih spoznaja, saznanja i doivljenih duhovnih
iskustava u prakticizmu veeg broja ovde navedenih duhovnih tehnika.Naravno na ovom sajtu imate i
primere neizbenih citata, sadraja u izdanju najeminetnijih i potovanih ezoterijskih mislilaca i
parktikanata, mada sve to moete opirno nai i na mnogim drugim mestima iji se autori uglavnom
meusobno utrkuju u prepisivanju ak i celih tekstova i to bez grama svojih linih iskustava.ilj ovih
tekstova je upoznavanje i razvoja sveopte spoznaje kod posetilaca povodom nastanka i procvata Novog
Eona, koji omoguuje potpunu emancipaciju ljudske rase uz pomo Boanske Lui, slobode i ljubavi,
umesto sadanje sveprisutne materijalizacije.
Zato, dragi nai posetioci, budite i Vi vesnici u taktu i harmoniji novog, neodlono dolazeeg kao i ve
uveliko klijajueg Novog Doba u razvoju ljudske duhovnosti I civilizacije u slavu najtananije niti
Boanskog stvoritelja ivota,
slobode kao i sveopte kosmike ljubavi.<br>
Agencija "Aneli Sree"<br>
Mr Milo as Palek.<br>
</p>
</div> <! -->

<! -->
<div class=" col-xs-12 col-lg-3" style="padding-top: 10px; padding-bottom: 80px;">
<div align="center" >

<h2 class="text-justify">OBLASTI MAGIJE </h2>
<p class="lead ">
<a href="#">Drvo ivota</a><br>
<a href="#"> Cabala<br></a>
<a href="#"> Tehnike proricanja<br></a>
<a href="#">Tarot<br></a>
<a href="#">Talismanska magija<br></a>
<a href="#">Ritualna magija<br></a>
<a href="#">Prizivanje duhova<br></a>
<a href="#">Magijski napadi<br></a>
<a href="#">Urusavanje karme<br></a>
<a href="#">Astralne projekcija<br></a>
</p>
</div>
</div> <! -->
</div><! -->
</div> 

<div class="row "> <! -->
<div class=" col-xs-12 col-lg-3" style="padding-top: 10px; padding-bottom:10px;">
<!

class=" col-xs-12 col-lg-3".
12
,
. -->
<! -->
<div class="card cart-block" align="center">
<div class="slides2" >
, , ,
,
</div><! -->
</div><! -->
<! -->
<div class="col-xs-12 col-lg-6" style="padding-top:10px; padding-bottom: 80px;">

</div><! -->
<! -->
<div class=" col-xs-12 col-lg-3" style="padding-top: 10px; padding-bottom: 80px;">

</div> <! -->
</div><! -->
</div> 

dodgerblue;">

</div>><! -->
<div class=" col-xs-12 col-lg-3" style="padding-top: 10px; padding-bottom: 80px;

background:#f0ad4e;">

</div> ><! -->

lavender;">

</div><! -->
</div><! -->
<div class="row" style="padding-top: 10px; padding-bottom: 80px; background: lightblue;">

</div><! -->
<div class="row" style="padding-top: 10px; padding-bottom: 80px; background: aqua;">

</div> <! -->
</div><! -- >
,
. .
, :
, , ,
, (), ,
. : , ,
. :
, ,
.

<div class="row">
aqua;">

</div>

<div class=" col-xs-12 col-lg-8">

<div class="row" style="padding-top: 10px; padding-bottom: 50px; background: #fff04e;">
red
</div>
<div class="row" style="padding-top: 10px; padding-bottom: 50px; background: gold;">
drugi red
</div>
</div>
<div class=" col-xs-12 col-lg-2" style="padding-top: 10px; padding-bottom: 80px;

background:#f0ad4e;">

</div> <! -->
</div> <! -->

</div>><! -- >
:
, .
,
.

.
<div class="navbar navbar-inverse navbar-fixed-top">

<! -->
<div class="container"><! -->
<div class="navbar-header"><! -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-
collapse"> <! -->
<span class="icon-bar"></span><! -->
</button><! -->
<a class="navbar-brand" href="#">Brand</a><! -->
</div>
<div class="collapse navbar-collapse"><! -->
<ul class="nav navbar-nav"><! -->
<li class="active"><a href="#">Home</a></li><! -->
<li><a href="#about">About</a></li><! -->
<li><a href="#contact">Contact</a></li><! -->
</ul><! -->
</div>
</div><! -->
</div><! -->

<! -->

, .
, .

collapse">
<! -->
</button><! -->
.
.
.
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
class="navbar-toggle"
.
.
data-toggle="collapse" , data-
target=".navbar-collapse" .
.navbar-collapse.

<div class="collapse navbar-collapse"><! -->
<li><a href="#about">About</a></li><! -->
<li><a href="#contact">Contact</a></li><! -->
</ul><! -->
</div>
<button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>


<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">


<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-
off"></span> Login</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span
class="glyphicon glyphicon-remove"></span> Cancel</button>
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
</div>
</div>
</div>
<script>
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
</script>


</ul>
</ul>
<! , -->
<button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>
, . .


<li> <button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>
</a></li>
</ul>
</ul>
<li><input type="text" class="form-control" placeholder="Search" name="q"></li>

<li><button class="btn btn-default btn-lg" type="submit"><i class="glyphicon glyphicon-
search"></i> Potrazi</button></li>
<li><button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button></li>
</ul>
</ul>
<div class="navbar navbar-inverse navbar-fixed-top"

style="background:-webkit-gradient(radial, 165 0, 38, -1 -257, 465, from(#74239D), to(#F4D913));">
,
,

<h1 style="color:red;text-shadow:9px 6px 10px #0e19b5;">

Moj novi sajt
</h1>
<div class="col-lg-6 " > 


<div id="myCarousel1" class="carousel slide" data-ride="carousel" >
<div class="carousel-inner" role="listbox" align="center" >

<img class="first-slide" src="img/slajd1.jpg" alt="First slide">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and
"previous" Glyphicon buttons on the left and right might not load/display properly due to web browser
security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="img/slajd2.jpg" alt="Second slide">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta
gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item" align="center">
<img class="third-slide" src="img/slajd3.jpg" alt="Third slide">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta
gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
<p>Cras vehicula ut id elit.</p>
</div>
</div>
</div>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
</div>

<li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel1" data-slide-to="1"></li>
</ol>
<a class="left carousel-control" href="#myCarousel1" role="button" data-slide="prev">
</a>
<a class="right carousel-control" href="#myCarousel1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-rightt" aria-hidden="true"></span>
</a>
</div>
</div>
,
, , ,
. , ,
.
.
,
.
.
.
. ,
, .
.
,
, .
<div class="col-lg-6 " > 

.
1200 .
<!Carousel
================================================== -->

data-ride="carousel", class="carousel slide"
.
<div id="myCarousel1" class="carousel slide" data-ride="carousel" >

<div class="carousel-inner" role="listbox" align="center" >

,
<img class="first-slide" src="img/slajd1.jpg" alt="First slide">
,
.

<h1> .</h1>
<p> </p>
,
, href="#" .
<p><a class="btn btn-lg btn-primary" href="#" role="button"></a></p>
</div>
</div>

</div>
, ,
.

.


</ol>
<li> </li>
<li> </li> style="list-style-type: "
, ,
{
list-style-image: url('sqpurple.gif');
}

.
data-slide-to="0"
data-slide-to="4".

, .
.
: class="left carousel-control"
, href="#myCarousel1" ,
role="button" data-slide="prev"
. span class="glyphicon glyphicon-chevron-left"
aria-hidden="true". aria-hidden="true"
aria-hidden="false". class="sr-only"
.
. :
1 = prev
+ 1 = next
<a class="left carousel-control" href="#myCarousel1" role="button" data-slide="prev">

</a>
<a class="right carousel-control" href="#myCarousel1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-rightt" aria-hidden="true"></span>
</a>
</div>
class=conatainer class=container-fluide
12.

,
.
, , ,
,

.
.

.
. .
. .
.
, ,
, , ( ) .
, ( )
, .
.
. ?
.
. , .
: , , , .
, .
.

, .
.
,
, .
.
.
.
.
,
,
.

.
,

. moj_klizac.css
.

:
boostrap.js
boostrap.min.js
jquery, jquery-3.1.1. js
,
.
jquery-... js .min. ,
.
http://getbootstrap.com/getting-started/#template

Copy the HTML below to begin working with a minimal Bootstrap document.

.

<body>
.
<h1>Hello, world!</h1>


.
.

bootstrap/
css/
bootstrap.css
bootstrap.css.map
bootstrap.min.css
bootstrap.min.css.map
bootstrap-theme.css
bootstrap-theme.css.map
bootstrap-theme.min.css
bootstrap-theme.min.css.map
js/
bootstrap.js
bootstrap.min.js
fonts/
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
glyphicons-halflings-regular.woff2
.
http://getbootstrap.com/components/
.
http://getbootstrap.com/components/#navbar
.
( copy)
<nav class="navbar navbar-default"> 

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-
example-navbar-collapse-1" aria-expanded="false">
</button>
<a class="navbar-brand" href="#">
Brand
<img src= putanja_do_vase_slike/Slika />

</a>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
<li><a href="#">Link</a></li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

.
Brand --
Link
Link
Dropdown
Search
Submit
Link
Dropdown

Dropdown, Link , Submit ,
.

, container-fluid
.
<div class="container-fluid" >


<nav class="navbar navbar-default"> 

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-
target="#bs-example-navbar-collapse-1" aria-expanded="false">
</button>
<a class="navbar-brand" href="#">
<img src="img/facebook.png" />

</a>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<li class="active"><a href="#">HOME <span class="sr-only">(current)</span></a></li>
<li><a href="#">O NAMA</a></li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-
haspopup="true" aria-expanded="false">PROIZVODI <span class="caret"></span></a>
<li><a href="#">MASINE</a></li>
<li><a href="#">USLUGE</a></li>
<li><a href="#">SARDNICI</a></li>
<li><a href="#">POSEBO</a></li>
<li><a href="#">JOS NESTO</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
<li><a href="#">KONTAKT</a></li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-
haspopup="true" aria-expanded="false">DRUGI<span class="caret"></span></a>
<li><a href="#">SARDNICI</a></li>
<li><a href="#">REFRENCE</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
,
.

.
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-37354459-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-
analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

<style>
.btn-zuto{
background-color: #ffb85c;
color:white;
}
</style>

<!DOCTYPE html> <! -->
<html lang="SR"> <! -->
<head><! -->
<meta charset="utf-8"> <! 8 -->

<meta http-equiv="X-UA-Compatible" content="IE=edge"> <! . -->
<! -->
<meta name="description" content="">
<meta name="author" content="">
<!
-->
<title>BOOTSTRAP KNJIGA</title> <! -->



<link href="css/probna.css" rel="stylesheet">
<script src="js/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/mystyle.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css"><! -->
<link href='css/Open.css' rel='stylesheet' type='text/css'>



<link href="css/Roboto.css" rel="stylesheet">
<link href="css/Lato.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<style> <! -->
/* podesavanje sirine i ostalog vezanog za prikaz slika */
.carousel-inner>.item>img,.carousel-inner>.item>a>img{
margin-top: 50px;
width: 100%;
}
p{
font-size: 20px;
}
</style> <! -->
<script><! -->
/* */
/*$(document).ready( function(){
$('[data-toggle="tooltip" ]').tooltip();
});*/
$(document).ready( function(){
$('[data-toggle="tooltip" ]').tooltip();
$('[data-toggle="popover" ]').popover();
});
</script><! -->
</head> <! -->
<body> <! -->
<div class="container "> <! -->

<div class="row"> <! -->
<h3> <! 3 -->
<a href="probna.html"> <button type="button" class="btn btn-dark-green"> Probna
stranica</button></a>
izradnjena probna stranica gde se vide i ostali elementi</h3>
<! - -->
<li class="active"><a href="#home1" data-toggle="pill">Bootstrap</a></li>
<li><a href="#mome" data-toggle="pill">TOOLtip</a></li>
<li><a href="#drugi" data-toggle="pill">PAD.MENI</a></li>
<li><a href="#trece" data-toggle="pill">KOLONE RED</a></li>
<li><a href="#cetvrto" data-toggle="pill">Alerti</a></li>
<li><a href="#peto" data-toggle="pill">DUGMICI</a></li>
<li><a href="#sest" data-toggle="pill">CAROUSEL IMG</a></li>
<li><a href="#sedam" data-toggle="pill">PAG I LAB </a></li>
<li><a href="#osam" data-toggle="pill"></a></li>
<li><a href="#tuorijal" data-toggle="pill">1</a></li>
<li ><a href="#medija" data-toggle="pill">MEDIA</a></li>
<li><a href="#slike" data-toggle="pill">Slike</a></li>
<li><a href="#" data-toggle="pill">MODAL</a></li>
<li><a href="#" data-toggle="pill">FORME</a></li>
<li><a href="#" data-toggle="pill">NAV BAR</a></li>
<li><a href="#" data-toggle="pill">Prazno</a></li>
<li><a href="#" data-toggle="pill">Prazno </a></li>
<li><a href="#home21" data-toggle="pill">TAB Meni</a></li>
</ul>
<! -->
<! - -->
<div class="tab-content"> <! -->
<div class="tab-pane active" id="home1">
<div class="container ">
<div class="row">
<h2><b>Bootstrap</b> </h2>
<li class="active"><a href="#prv " data-toggle="pill"></a></li>
<li><a href="#mome1" data-toggle="pill"></a></li>
<li><a href="#drugi1" data-toggle="pill"> 1</a></li>
<li><a href="#trece1" data-toggle="pill"> 2</a></li>
</ul>
<div class="tab-pane active" id="prv">
<h2> BootStrap</h2>
<p style="text-align: justify;">
. ,
. ? .
. .

. , ,
. ,
.
</p>
</div>
<div class="tab-pane" id="mome1">
<h2> BootStrap </h2>

<br> <img src="img/prikaz_mogucnosti.jpg" width="400" height="250"><br>

.
, .
.
BootStrap http://getbootstrap.com/ .

.

.
<b> http://getbootstrap.com/getting-started/#download
</b>
.

.

.

.
: ,
,
, , ,
.
</p>
</div>
<div class="tab-pane" id="drugi1">
<h2 style="text-align: justify;">
?
,
,
<b></b>
, ,
.
.

. :
<b>img</b>
<b>js</b>, <b>css</b>,

,
,
index php,
html, htm, asp.

.
</h2>
</div>
<div class="tab-pane" id="trece1">

.
.

.

,

.
.
</h2>
</div>
</div>
</div>

</div>
</div>
<div class="tab-pane" id="mome">
<h2> </h2>

.

.
</h2>
<h2>Dynamic Pills</h2>
<p>To make the tabs toggleable, add the data-toggle="pill" attribute to each link. Then add
a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-
content.</p>
<ul class="nav nav-pills" style="border: blue solid 3px;">
<li class="active"><a data-toggle="pill" href="#"></a></li>
<li><a data-toggle="pill" href="#1"> 1</a></li>
<li><a data-toggle="pill" href="#"></a></li>
<li><a data-toggle="pill" href="#menu3">Menu 3</a></li>
</ul>
<div id="" class="tab-pane fade in active">
<h3> ,
</h3>
<p><a href="#" data-toggle="tooltip" data-placement="top" title=" mojaslika"><h2>
natpis iznad</h2></a></p>
<p><a href="#" data-toggle="tooltip" data-placement="right" title=" VOLIM">

<h2>natpis desno</h2></a></p>
<br>
</div>
<div id="1" class="tab-pane fade">
<h3>
</h3>
<p><a href="#" data-toggle="tooltip" data-placement="left" title="
VOLIM"><h2>natpis levo</h2></a></p>
<p><a href="#" data-toggle="tooltip" data-placement="bottom" title=" VOLIM">
<h2>natpis dole</h2> </a></p>
</div>
<div id="" class="tab-pane fade">
<h3> </h3>

.
<a href="#" data-toggle="popover" data-placement="left" title=" Popover heding"
data-content=" Neki tekst koji objasnjava" >
<h2>iskacuci tekst levo</h2>
</a>
</p>
<H3>
upotrebom za data-trigger="hover" postize se pojava natpisa prolaskom misa preko
tog podrucjagde se ono nalazi, <br>
kao kod menija i linkova sto je primenjeno iu ovom ovde delu za prikaz teksta
gore<br>
<a href="#" data-toggle="popover" data-placement="top" data-trigger="hover"
title=" Popover heding" data-content=" Neki tekst koji objasnjava" >

data-trigger="hover"
</a>
</H3>
<a href="#" data-toggle="popover" data-placement="right" title=" Popover heding"
data-content=" Neki tekst koji objasnjavaNeki tekst " >
<h2> iskacuci tekst desno</h2>
</a>
</div>
<div id="menu3" class="tab-pane fade">
<h3> </h3>
<a href="#" data-toggle="popover" data-placement="bottom" title=" Popover heding"
data-content=" Neki tekst koji objasnjavaNeki tekst " >
<h2> </h2>
</a>
<h2 style="text-align: justify;"> Ovim delom se postize da kada se klikne na neki
ovakav linkom
<b> a href="#" i tako dalje a </b>dobija je iskacuci tekst koji se iskljucije
ponovnim kilikom
na isto mesto ponovnim klikom poznato pod nazivom <b>data-toggle</b>.
<br>
script<br>
$(document).ready(function(){<br>
$('[data-toggle="tooltip"]').tooltip();<br>
});<br>
/script <br>
,

, .
</h2>
</div>
</div>
</div>

</div>
<div class="tab-pane" id="drugi">
<div class="row">
<h1 style="text-align: justify"> Padajuci Meni koji se otvara nadole ili na gore</h1>
<h3 style="text-align: justify">
da bi se ovo napravilo i moglo dodati u izbornik ili meni kako ko god to zvove
Napravi se prvo jedan div tag ili parce prostora gde se to mora naci,a da bi se
ovaj meni mogao i otvrati tom DIV mora se dodati opis ili klasa
Ovako <b> div class="dropdown" </b>tome se dodaje ispod jedan<b> A tag</b> i
kome se dodaju klase
<b>class="btn btn-default dropdown-toggle btn-danger"</b> Prva govori o cemu je
glavna rec, a ostale
daju blize opise toga.<b> btn-default</b> je standardno dugme, dropdow-toggle kaze da
ce se ono kretati
kada se na njega klikne i to: prvi klik otvori drugi zatvori. <b>btn-danger </b>daje boju
i druge opise
umesto btn-danger mozte napraviti neku svoju klasu u te svrhe i dobiti dugme drugacije
boje
pozadine i slova senke i tome slicno. Ovaj red u kodu
<b>span class="caret" /span</b> znaci da se na dugmetu dodaje strelica smera u kome
se meni otvara
ali moze se i bez tog reda koda. Ovako
<a href="#" class="btn btn-default dropdown-toggle btn-danger" data-
toggle="dropdown">Padajuci meni </a>
Naravno klikom na ovo dugme nema funkcije jer je ovo sam jedan red koda za prikaz
bez te strelice.
ovako bi izgledalo ovo sto radi bez strelice smera </h3>
<div class="col-lg-6">
<h2> Izrada padajuci menija na dole u boostrapu bez span class="caret" klase </h2>
<div class="dropdown">
toggle="dropdown">Padajuci meni </a>
<li><a href="#">About Us</a></li>
<li class="divider" style="border: crimson 3px solid"></li>

<li class="dropdown-header" style="color:blue; font-size: 16px;">Naslov

podmenija </li>

<li><a href="#">Courses</a></li>
<li><a href="#">Interview Questions</a></li>
<li><a href="#">Contact Us</a></li>
<li class="disabled"><a href="#">Register to Teach</a></li>

</ul>
</div>
</div>
<h2> Izrada padajuci menija na dole u boostrapu sa span class="caret" klasom </h2>
<div class="dropdown">
toggle="dropdown">Padajuci meni <span class="caret"></span> </a>
<li class="divider" style="border: crimson 3px solid"></li>
<li class="dropdown-header" style="color:blue; font-size: 16px;">Naslov
podmenija </li>
<li><a href="#">Nesto</a></li>
<li><a href="#">pitanja</a></li>
<li><a href="#">kontakt</a></li>
<li class="disabled"><a href="#">Register to Teach</a></li> 
</ul>
</div>
</div>
</div>
</div>
<h1> Otvranje menijia na gore</h1>
<div class="row" style="margin-top: 50px;">
<h2> Izrada padajuci menija odozdo navise u boostrapu</h2>
<p style="text-align: justify"> ako je ovaj meni pri vrhu ekrana onda se postavlja margina
na vrht ( margin-top po potrebi oko neki 200px)
dok dodatkom ovoga style="background: burlywood;" u UL tagu dobijamo obojenje
koje vidite
</p>
<div class="dropup " >
toggle="dropdown">Padajuci meni <span class="caret"></span> </a>
<ul class="dropdown-menu" style="background: burlywood;"> 
<li><a href="#">HOME</a></li>
<li class="divider" style="border: crimson 3px solid"></li>
<li class="dropdown-header" style="color:blue; font-size: 16px;">Naslov podmenija

</li>
<li><a href="#">Courses</a></li>
<li><a href="#">Interview Questions</a></li>
<li><a href="#">Contact Us</a></li>
<li class="disabled"><a href="#">Register to Teach</a></li> 
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="trece">
<div class="row">
<h1 style="text-align: center">
<b> </b>
</h1>
<h2 style="text-align: justify;">rezolucije ekrana Large screen lg >= 1200px
rezolucije ekrana Media screen md >= 992px
rezolucije ekrana Small screen sm >= 768px
rezolucije ekrana Extra Small screen xs < 768px</h2>
<h3 style="text-align: justify;"> postavljanjem u clasi za slike na ovaj nacin i druge klase
postize se isti prikaz na svim rezolucijama ekrana ali moze doci i do preklapanja
ako sirina slika premasuje rezoluciju, tako da ce te ostale slike preci u sledeci red
ako ostavimo nejadnaki broj kolona u nekoj od postavljenih sirina kolna</h3>
<h3 style="text-align: justify;"> u ovom slucaju u koloni kao u zagradama navedeno
(class="col-lg-2 col-md-2 col-sm-3 col-xs-2")
koja ima broj tri javice se u nekoj rezoluciji i drugi red slika il icega bude bilo.
Da bi se ovo izbeglo moraju uzimati nebitno da li col-lg ili col-xs uvek isti broj posle
toga jer
se time odredjuje sirina kolone </h3>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-2"><img src="img/1.jpg " class="img-
responsive "></div>
responsive "></div>
responsive "></div>
responsive "></div>
responsive "></div>
responsive "></div>
<h2> ovo se desava iz razloga sto kod boot strapa ima ukupno 12 colona, gde se kod vise
kolona sabiraju
sve a ono sto je preko 12 colona prelazi u drugi red.</h2>
<h3> prema tome u jednom redu (class="row") moze imati 12 kolona, col-xx-12. Sto je
broj veci od broja
jedan iza col-xx- to je i kolona sira. </h3>
<h2> a bi se izvrsila provera kako ce sta izgledati na sajtu moze se otici na sajt<br>
<b> http://quirktools.com/screenfly/ </b>uneti bilo localhost ili host sajta gde se on
nalazi na netu </h2>
</div>
</div>
<div class="row">
<h1 style="text-align: center;"><b>Kolone i redovi kojima se mogu izradit i
proporcionalno stranice</b> </h1>
<h2>
u ovom slucaju ovde postoji proporcionalna podela. Znaci po cetiri kolone u jednom
redu<br>
Sto govori primena kalse class="col-lg-3", jer bootstrap po sirini ima mesta za 12
kolona.<br>
Tako da ukupni broj kolona mora biti zbir svih u jednom redu i on mora da odgovara
broju 12.<br>
col-lg-3 znaci da je sirina polja jednaka jednoj cetvrtini scele sirine stranice, a lg da se
to<br>
odnosi na najvece ekrane gde se prikazuje i gde je ukupna sirina veca od 1200px.<br>
Tako da cetiri col-lg-3 jednako je col-lg-12. NAravno videcete u drugim delovima
ucenja da je moguce<br>
postavljati osim col-lg-3 u istoj klasi i ovako class="col-lg-3 col-xs-3" zbog istovetnosti
prikaza na <br>
razlicitim velicinam ekrana. A da bi kako ce se videti u daljem delu naprimer
prikazivanja slika <br>
slike uvek bile proporcionalne nebitno od velicine ekrana biti upotrebljena klasa img-
resposive, koja to omogucava
</h2>
<p style="text-align: justify; font-size: 24px;">

. 25% ,
. responsive

.
class="col-lg-3" :
class="col-lg-3 col-sm-3 col-xs-3"
</p>
<h2> rezolucije ekrana Large screen lg >= 1200px</h2>
<div class="col-lg-3" style="background: lightblue"> prvi</div>
<div class="col-lg-3" style="background: darkred"> drugi</div>
<div class="col-lg-3" style="background: blue"> treci</div>
<div class="col-lg-3" style="background: antiquewhite"> cetvrti</div>
<h2> rezolucije ekrana Media screen md >= 992px</h2>

<div class="col-md-3" style="background: brown"> prvi</div>
<div class="col-md-3" style="background: red"> drugi</div>
<div class="col-md-3" style="background: orange"> treci</div>
<div class="col-md-3" style="background: greenyellow"> cetvrti</div>
<h2> rezolucije ekrana Small screen sm >= 768px</h2>

<div class="col-sm-3" style="background: pink"> prvi</div>
<div class="col-sm-3" style="background: deepskyblue"> drugi</div>
<div class="col-sm-3" style="background: orchid"> treci</div>
<div class="col-sm-3" style="background: lightgrey"> cetvrti</div>
<h2> rezolucije ekrana Extra Small screen xs >= 768px</h2>

<div class="col-xs-3" style="background: lightblue"> prvi</div>
<div class="col-xs-3" style="background: darkred"> drugi</div>
<div class="col-xs-3" style="background: blue"> treci</div>
<div class="col-xs-3" style="background: antiquewhite"> cetvrti</div>
</div>
<br>
</div>
<div class="tab-pane" id="cetvrto">

<div class="row">
<h1> Alerts</h1>
<div class="alert alert-danger">
opomena <button type="button" class="close" data-dismiss="alert"> ×</button>

</div>
<h2> Dodata kalsa u tagu dugme data-dismiss="alert" omogucava sakrivanje ili
iskljucivanje upozorenja
ovaj niz znakova × daje krstic na koji kada se klikne isto je kao komanda Close
zatvori
</h2>
<div class="alert alert-success"> uspesno poslati paket </div>
<div class="alert alert-info"> potrebene informacije </div>
<div class="alert alert-warning">da li si siguran </div>
<h1> Progres bar</h1>

HTML
<div class="progress-bar progress-bar-striped active" style="width: 70%;"><span
class="sr-only"> 70%</span></div>
</div>
<h2> malo objasnjenja: dodati span izmedju diva skriva cifru od u ovom slucaju 70%, dok
dodata klasa
progress-bar-striped daje sliku progres bara kao izuvijanu linuju preko njega
dodatkom klase activ se dobija nekavresta animacije te izuvijane linje. HTML ispred
divasa klasom progres dajesliku
da je od njega ucitano 70%.
</h2>
<br>
CSS
<div class="progress-bar progress-bar-warning progress-bar-striped active"
style="width: 70%;"> 70%</div>
</div>
CSS
<div class="progress-bar progress-bar-danger progress-bar-striped active"
style="width: 70%;"> 70%</div>
</div>

</div>
<div class="tab-pane" id="peto">
<div class="row">
<h1 style="text-align: center"> Buttons, Button Groups and images in bootstrap </h1>
<h2> dugmeta</h2>
<h3> kao sto se vidi u okviru klase BTN postoje vec napravljene pod klase
btn-default"> standardno , primary"> primarno, btn-info"> informaciono ,
btn-warning">upozorenje, btn-success">uspesno . Ali to nije prepreka da se napravi i
slobodno
po izboru drugi opsi dugmeta. Dodajuci jos jedna red t Head tagu ovakav
<link rel="stylesheet" href="css/mystyle.css" /> u ovmo failu mystyle.css pisete kako
zelite da
dugme izgleda. </h3>
<p>ovo je zeleno ali u pomenutom fali</p>
se napise ovako klasa::::
<h3> <br>
.btn-zuto{ <br>
background-color: #ffb85c; <br>
color:white; <br>
} <br>
</h3>
i dobijate novo zuto dugme sa belim slovima
<button type="button" class="btn btn-zuto">novo zuto </button>
<p>
Velicina dugmeta moze se menjati ako se u kalsu doda ovako druga klasa
<button type="button" class="btn btn-zuto btn-lg">vece zuto </button>
<button type="button" class="btn btn-zuto btn-md">manje zuto </button>
<button type="button" class="btn btn-zuto btn-sm">jos manje zuto </button>
<button type="button" class="btn btn-zuto btn-xs">najmanje zuto </button>
</p>
<p><h2>grupisanje dugmeta u bootstrapu clasom btn-group</h2></p>
<div class="btn-group">
</div>
<p>
na stranicam na kojima se nalazi posetilac potrebno mu je na neki nacin naznaciti
gde se nalazi na stranicama sajta. Zat ose upotrebljava klasa "avtive: ovako
<button type="button" class="btn btn-zuto btn-lg active">vece zuto </button>
</p>
<p>
ali dugmeta mogu biti i iskljucena ovako
<button type="button" class="btn btn-zuto btn-lg active">aktivno </button>
<button type="button" class="btn btn-zuto btn-lg disabled">iskljuceno </button>
</p>
<p>
NA ovaj nacin mozete i linkove pretvoriti u dugmeta ovako<br>
<button type="button" class="btn btn-zuto btn-md">manje zuto </button> dugme<br>
<a href="#" class="btn btn-primary">klikni </a> ovako izgleda pomenuti slucaj od lika
nastane dugme<br>
dok obican link izgleda ovako <a href="#" >klikni </a> <br> sve ovo se moze primeniti
i na
dugmeta u formama. Znaci input dugme tipa SUBMIT.
<br> <input type="submit" class=" btn-primary " value=" dugme sa klasom btn-
primary">
</p>
<h1> sve ovo se moze odnositi na tekst, sliku i drugo</h1>
<p class="text-danger " style="font-size: 50px"> tekst sa dodatom klasom preko
pargrafa</p>
<h2>kod izgleda ovako class="text-danger " style="font-size: 50px"</h2>
<h1> sve ovo se moze odnositi na sliku i drugo</h1>

<img src="img/ja.jpg" class="img-responsive img-circle img-thumbnail"/>
<br> <h2> ova slika je u obliku kruga sa okvirom ali se mogu uokvoriti i drugi oblici slika
kao ovo class="img-responsive img-rounded img-thumbnail". Responsive se dodaje kako
bi
slika uvek bila prilagodjena velicini ekran gde se prikazuje
</h2>
<h1> sve su kombinacije moguce u cilju postizanja zeljenog rezultata</h1>
</div>
</div>
</div>
<div class="tab-pane" id="sest">
<h1><b> Karusel ili slajder</b></h1>
<h2>Objasnjenje za ovaj slajder ili prikazivac serije slika potrebno je da
slike budu iste velicine, kako bi sve ovo izgledalo veoma lepo za gledanje.
Klasama class="carousel slide" se opisjuce sta se trazi da se uradi na<br>
<b> carusel klasi. Data-ride govori na kom mestu se to radi.</b><br>
<b> data-inteval odredjuje vreme ponavlanja</b><br>
Sa promenam u cSS failu moci cete da kretawe slika pokrenete u desno, navise ili
nanize.
</h2>
</div>
<div class="container" style="background:cyan;" >

<div id="slider1" class="carousel slide" data-ride="carousel" data-interval="1500" >
<div CLASS="carousel-inner">

<img src="img/1.jpg">
</div>
<div class="item">
<div class="carousel-caption">
<h1 style="color: blue">Ovo je slika</h1>
<p> ovo je pois slike koja se prikazije </p>
</div>
</div>
<div class="item">
<img src="img/3.jpg" >
slike -->
<h1 style="color: crimson;" >Ovo je slika</h1>
</div>
</div>
<div class="item">
slike -->
<h1 style="color:darkgreen">Ovo je slika</h1>
</div>
</div>

<li data-target="#slider1" data-slide-to="0" class="active"></li>
<li data-target="#slider1" data-slide-to="1" ></li>
<li data-target="#slider1" data-slide-to="2" ></li>
</ol>

<a HREF="#slider1" class="left carousel-control" data-slide="prev"> prev

<span class="icon-prev"></span>
</a>
<a HREF="#slider1" class="right carousel-control" data-slide="prev"> desna
<span class="icon-next"></span>
</a>
</div>
</div>
</div>
Moze movo ispis
</div>
</div>
<div class="tab-pane" id="sedam">

<div class="row">
<h1> Meni bar sa klasom class="breadcrumb"</h1>
<h3>Primetno je da iza svakog dela ima malu zakrivljenu crtu, koja poseca na kiflu</h3>
<ul class="breadcrumb" style="margin: 20px auto;background: whitesmoke " >
<li><a href="#"> HOME</a></li>
<li><a href="#">MOME</a></li>
<li><a href="#">DRUOG</a></li>
<li><a href="#">TRECE</a></li>
</ul>
<h1> LAbele il ipodveznice</h1>
<h3>
Ovo je zgodno sa se upotrebi na mestima gde je potrebno nesto nagalasiti, znaci obojiti
nekom bojom<br>
A ppotrebno je primeniti <b> span i jednu od ponudjenih klasa label-default, label-
primary,label-warning</b><br>
iza klase <b> label</b>. Cime se dobija isto kao i kod slicnih klasa kod dugmadi
Ali. mozete i sami napisati drugu klasu sa sospstvenim promenama koje se odnose na
tekst ili ono<br>
sto je izmedju <b>span tagova.</b>
</h3>
neki natpis<span class="label label-default "> NOVO</span><br><br>
neki natpis<span class="label label-primary "> NOVO</span><br><br>
neki natpis<span class="label label-warning "> NOVO</span> pronadjeno
<h2> moze i ovakava primena gdese sav sadrzaj nalazi izmedju H1 tagova </h2>
<h2>ali ako postavimo umesto h1 h3 </h2>

<h2> sve se smanjuje. Kalsom label-danger i slicno se uokviruje natpis izmedju span.
</h2>
<h1> Novi deo gradiva - NOTIFIKACIJE</h1>

<h2> <a href="#">Inbox <span class="badge">9</span> </a> <br>
ovim se dobija da je broj 9 uokviren u crni krug, simulijacuci da je nam stiglo 9 poruka
u inboksu<br>
<a href="#">Inbox <span class="badge">9</span> </a>
<button type="button" class="btn btn-primary">Notifikacija<span
class="badge">20+</span></button></h2>
<h1>Inbox <span class="label label-danger "> NOVO</span></h1> <br>
<h1> PAGINACIJA gradiva </h1>

<h3>
Ovo je nacin da se naprave dugmad za paginaciju. Paginacija je mogucnost da prikazete
samo odredjen broj<br>
prikaza na jednom ekranskom prikazu ili stranici, dok se ostali ne vide dok se ne kline
na neko od ponudjenih<br>
dugmadi, a koje je povezano sa php skriptom koja vrsi stranicenje izracunavajuci od
ukupnog broja onoga<br>
sto ima za prikazivanje broj stranica prema nasim zadatim vrednostim koliko prikazani
komponenti zelimo da vidimo<br>
na jednoj strannici. Pogodno je kod baza podataka ili prikazivanja slika u nekoj galeriji
slika <br>
</h3>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<h1>
Ovaj dole drugi primer za razliku od predhodnog primera u ovom primeru je postavljeno
da se vidi aktivno dugme.
Ali moguce je dodatikao i kod menija da se to i krece sa klikom na neko drugo dugme sa
drugim brojem
</h1>
<ul class="pagination nav-pills">

<li><a href="">«</a></li>
<li class="active"><a href="">10</a></li>

<li><a href="">11</a></li>
<li><a href="">12</a></li>
<li><a href="">13</a></li>
<li><a href="">51</a></li>
<li class="disabled"><a href="">»</a></li>
</ul>
<h3>na ovom linku se mogu pronaci karakteri i ostalo<b> https://dev.w3.org/html5/html-
author/charref </b>gde mozete videti koji od tih
znakova ima koju vrednost koja pocine sa ovima znakom <b>&</b>. kao u primeru
» koji je vec upotrebljen </h3>
<h1> prev and next dugmad</h1>
<ul class="pager">
<li class="previous "><a href=""> <h1>← Previous</h1></a></li>
<li class="next"><a href=""> Next→</a></li>

</ul>
<h2> upotrebom klasa <b> previous i next u Li tagu</b> dobija se razdvajanje levo i
desno dugmadi na prikazu
ovo dugme je vece od desnog jer je ubaceno <b>u h1 tag</b> ali mu se isto drugim
kalsam moze promeniti opis</h2>
</div>
<div class="tab-pane" id="osam">
<h2>
Ovo je ono sto sam uspeo da naucim i odradim u Bototstrap-u.<br>
Ali ima jos dosta toga sto je vezano za klase koje nisma uspeo<br>
da jos utvrdim kako to radi.<br>
Ono sto sam shvatio je da se mora dodati prvo klasa primer<b> btn </b><br>
za dugmad pa onda dodati druge klase koje blize opisuju to dugme.<br>
Te dodate mogu se i samostalno napisati i postaviti u css stil fail.<br>
Ono sto me jos intersuje je da pronadjem nacin da ovaj deo stilova za paginaciju<br>
mogu da povezem sa onim sto je potrebno iz recimo abaze ili foto albuma<br>
i slicnog.<br>
Mislim da sam dosta toga naucio, no nikada dovljno znanja>..<br>
</h2>
</div>
<div class="tab-pane" id="tuorijal">
<h1> Bootstrap tutorijal </h1>
<h2>
pored svega u strannicu se ukljucuje ovo <br>
u meta tag zbog IE<b> htttp-equiv="X-UA-Compatabile" content="IE-edge"</b><br>
ovo za IE vazi za sve verzije<br> U isti meta tag se ukljucuje i opcija viewport
<b>name="viweport" content="width=device-width, inicial-scale=1" </b>
razlog za ovaj red u meta tagu je da vi se prikazala stranica na svim uredjalima<br>
od tv do ekrana mobilnog telefona, jer ova komanda viewport daje felksibilno
prilagodjavanje<br>
dok najmanje sto je potrebno ukljuciti u head tagu je <br>

<b> link rel="stylesheet" href="css/bootstrap.css" </b>ali se<br>
svakako dodaju i osstali potrebni stilovi koji se postavljaju u istom direktorijumu.<br>
Dok se ispred zatvorenog body dodaju redovi<br>
<b>script type="text/javasccript" src="js/jquery.js"</b> <br>
<b>script type="text/javasccript" src="js/bootstrap.js"</b> <br>
Pri cemu se mogu doati i drugi kao dodaci ako su potrebni onome na samoj stranici<br>
Boot strap se preuzima sa ovo internet stranice<b> http://getbootstrap.com/getting-
started/#download</b>
Po preuzimanju na racunar zipovani fail se otpakuje u jednom direktoriju. Tako da se dobiju
tri <br>
nova direktorijuma u njemu: css. js i fonts.<br>
bootstrap/<br>
less/<br>
js/<br>
fonts/<br>
dist/<br>
css/<br>
js/<br>
fonts/<br>
docs/<br>
examples/ <br>
Kao sto se moze videti po preuzimanju imamo samo ovaj dist direktorijumu i pomeniuto u
njemu<br>
NA istom sajtu moze se preuzeti i osnovi templejt forma koja izgleda ovako
!DOCTYPE html<br>
html lang="en"<br>
head<br>
meta charset="utf-8"><br>
meta http-equiv="X-UA-Compatible" content="IE=edge"><br>
meta name="viewport" content="width=device-width, initial-scale=1"><br>
The above 3 meta tags *must* come first in the head; any other head content must come
*after* these tags -->
title>Bootstrap 101 Template /title<br>
Bootstrap --><br>
link href="css/bootstrap.min.css" rel="stylesheet"><br>
<b> ovo je znak za komentar koji dolazi sa desne strane --> <br>
dok onaj sa leve izgleda ovako < i znak uzvika ! i dvaputa znak minus -- </b><br>
HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
--><br>
WARNING: Respond.js doesn't work if you view the page via file:// --><br>
[if lt IE 9]><br>
script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"/script<br>
script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js" /script<br>
<![endif]--><br>
/head><br>
body><br>
h1>Hello, world!/h1<br>
izmedju dva body taga se pise sve potrebno stranici osim faa sa stilovima pisanja i script-a js
ili php<br>
tako nesto ide u posebnim failovima i stranicama koje se postavljaju u odgovarajuce
direktorijume<br>
za te namene a linkovima se pozivaju u index-ni i drugi fail po potrebi<br>
jQuery (necessary for Bootstrap's JavaScript plugins) --><br>
script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"/script<br>
Include all compiled plugins (below), or include individual files as needed -->
script src="js/bootstrap.min.js">/script<br>
/body<br>
/html
<br> naravno ovome svemu treba dodati ove zagrade < > gde je potrebno, jer ako bih ovde to
napisao<br>
zbunio bih ovaj ostali kod html-a i mnog cega bi pogresno bilo prikazano.
</h2>
<h2> <b> :</b>
</h2><br>
<h3> <b>http://fontawesome.io/get-started/</b><br>
<b>http://www.css3maker.com/ </b>dobijenje vrednosti za css<br>
<b> https://dev.w3.org/html5/html-author/charref </b> za karakter oznake sa &
simbolom<br>
<b>http://quirktools.com/screenfly/ </b>za proveru prilagodavnja prikaza ekraniskim

velicinama mobilnog i dr<br>
<b>http://pineapple.io/tags/jquery,<br>
http://webeasystep.com/tag/tag_page/jquery</b></h3><br>
</div>

<div class="container active ">

<div class="row">
<h2><b> Da bi se mogao upotrebiti na vise mesta na sajtu ovakav primer</b></h2>
<p class="text-justify" style="font-size: 28px;">
div sa ovom klasom<b> class="tab-pane i odgovarajucim ID-om</b> nemoze da
sadrzi klasu active,
tu klasu treba da sadrzi sledeci div sa klasom conatainer ovako class="container active
"
ispod toga se normalno postavlja div sa klasom red <b>div class="row" </b>, ispod
cega moze biti neki natpis
iza cega sledi ovakav meni kao i dole ispod. Inace mo\e doci da da se sve ovo vidi na
svim
panelima
Moze se upotrebiti ovde umesto klase <b>nav-tabs i nav-pills</b> , s time sto se mora
zameniti i
u <b> data-toggle="tab" tab sa pill </b>cime se postize automacko oblezavanje taba koji
je aktivan
tako sto se on odmah oboji drugm bojom</p>
<li class="active"><a href="#strana " data-toggle="pill"></a></li>
<li><a href="#strana3" data-toggle="pill">1</a></li>
<li><a href="#strana23" data-toggle="pill"> </a></li>
<li><a href="#strana22" data-toggle="pill"> 1</a></li>
<li><a href="#strana11" data-toggle="pill"> </a></li>
</ul>
<div class="tab-pane active" id="strana">
<h2 >
Ovo je dobar nacin da dobijete prikaz vise stranica jednu preko druge.<br>
Sve su najednom mestu olaksavajuci problem koji se moze nazvati izrada.<br>
vise stranica. kao i resavanje problema pozicioniranja svega. <br>
Jer prakticno se sve svodi na izradu ove jedne stranice.<br>
Ceo postupak se svodi na izradu jedne uredjene liste, znaci UL i LI tagivi.<br>
U ul class="nav nav-pills" se dodaje da je to uredjeno da bude horizontalno.<br>
Sto govori klasa nav. Dok nav-pills kaze da je ono sto se klikne promenilo
bolju.<br>
U delu <b>li class="active" a href="#home " data-toggle="pill" HOME</b> .<br>
Nam kaze da li je aktivan i da prihvata onaj koji je aktivan promenu boje ispod
njegova naziva .<br>
sto objasnjava <b>data-toggle="pill" </b> . Nastavak na drugom tabu<br>
</h2>
</div>
<div class="tab-pane" id="strana1">
<h2 class="text-justify">
Ovo<b> a href="#home " </b>kaze kada se klikne na natpis <b>HOME</b> u tabu
on pokrece ono
Sto ima takav id. Jer Id je nesto sto je moguce upotrebit isamo jednom.
za neciju identifikaciju, tj. nepostoje na vise mesta na jednom sajtu .
sa jednim ID-om, za to sto je oj jedinstven zarazliku od klasa koje se.
mogu upotreblavati na vise mesta cak i na istoj stranici.<br>
<b> data-toggle="pill" </b> kaze sta se ocekuje .
kaze sta se ocekuje .
Ovo je dobar nacin da dobijete prikaz vise stranica jednu preko druge.
</h2>
<h2>
Ovaj div <b>div class="tab-content"</b> nam govori da je tu sadrzaj koji se
pojavljuje.<br>
kada kliknemo na neko od dugmadi tab menija .<br>
On se odnosi na to da je izmedju njega postavljen sadrzaj jednog ili vise .<br>
<b> div class="tab-pane active" id="home"</b>.<br>
mogu upotreblavati na vise mesta cak i na istoj stranici.<br>
<b> data-toggle="pill" </b> kaze sta se ocekuje .<br>
ovo je dobar nacin da dobijete prikaz vise stranica jednu preko druge.<br>
</h2>
</div>
Ovim nacinom mogu se napraviti i vertikalni meniji ovako</p>
<ul class="nav nav-pills nav-stacked">
</ul>
<br>
</div>
Da bi se mogl odoci do koda za ovaj i drugo na ovom sajtu u nekom veb
pretrazivacu
mozete prvo pitisnuti F12 a posle sa klikom desnog tastera misa na ciljani deo
stranice
izabrati Inspect Element i podtrdom toga vicete deo koda koji vas interesuje, ali
ako
zeliti isti da vidite kao i celu stranicu izaberite view page source.
</p>
<div class="col-md-3">
<li class="active"><a href="#">Meni 1</a></li>
</ul>
</div>
<br>
<br>
</div>
<br>
<h3 style="text-align: justify">

li
class="dropdown"
.

</h3>
<li class="active"><a href="#"> </a></li>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<li><a href="#">Submenu 1-1</a></li>
</ul>
</li>
</ul>
<br>
</div>
<br>
<h3>
class="nav nav-tabs nav-justified"
</h3>

<ul class="nav nav-tabs nav-justified">
</ul>
<br>
</div>

<br>
<h3>
class="nav nav-pills nav-justified" ul
</h3>

<ul class="nav nav-pills nav-justified">
<li><a href="#">NEki 1</a></li>
<li><a href="#">NEki2</a></li>
<li><a href="#">NEki 3</a></li>
</ul>
<h3> active li

</h3>
<br>
</div>
<h3> class="nav nav-tabs"</h3>
<br>
<ul class="nav nav-tabs">

</ul>
</div>
<h2>
Ovaj div <b>div class="tab-pane active"</b> je mesto u kome unosimo to
sto.<br>
zelimo da se vidi nastranicama nakon klika. Prakticno to bi bilo kao da smo<br>
napravili vise stranica. Primera radi stranica1.html, stranica2.html ,stranica3.html
,stranica1.html....<br>
On ima i svoj id <b> id="home"</b> preko koga umesto pisanja<b> a href"#"
>ime stranice< / a </b> .<br>
cime se uobicajeno vrsi takozvano linkovanje stranica internet sajatova.<br>
</h2>
</div>
<b>data-toggle="tab"</b> .tab-
pane
div id="home" class="tab-pane fade in active" ,

,
div id="menu1" class="tab-pane fade".

data-toggle="tab" data-toggle="pill"
</h2>
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
</ul>
<div id="home" class="tab-pane fade in active">
<h3> </h3>
<p><img src="img/ja.jpg"/> </p>
</div>
<h3>Strana druga </h3>
<p> </p>
</div>
<h3> </h3>
<p>
</p>
</div>
</div>
</div>
</div>

</div>
<div class="tab-pane" id="medija">

<div class="row">
<h1> VIDEO I OSTALI MEDIJSKI MAARIJALI</h1>
<div class="embed-responsive embed-responsive-16by9">

<iframe src="https://player.vimeo.com/video/176779749" webkitallowfullscreen

mozillowfullscreen allowfullscreen></iframe>
</div>
</div>
<br>
<div class="row">
<iframe src="https://www.youtube.com/embed/HJahSFPFkKw?
list=PLPQBfZaQFu4ZEdIsl8Vb6Ku0dDyg3exrX" allowfullscreen></iframe>
</div>
</div>
<br>
<h2> Malo objasnjenja za video signale podela reda na kolone omogucava da imate
vise video okvira za prikazivanje vidoe zapisa
na istom prostoru. Klasa embed-responsive omogucava da ti video prikazi budu
automacki prilagodljivi velicini ekrana
dok ova klasa embed-responsive-16by9 definise odnose duzine i visine ekranskog
prikaza. To je ono sto kod tv aparata je bilo
odnos 4 X 9 ili 16 X 9 znac sirina i visina ekrana gdese prikazuje video sarzaj
</h2>
<div class="tab-pane" id="slike">
<h1>
<b>Rad sa slikama</b>
</h1>

,

. .img-circle
,
.

. .
.img-thumbnail

.img-responsive .img-rounded
.

.img-responsive.
,

display: block; max-width: 100%; height: auto;.

.
http://www.css3maker.com/

.
,
.
<br>
-moz-box-shadow: 22px 13px 18px #e02de0;<br>
-webkit-box-shadow: 22px 13px 18px #e02de0;<br>
box-shadow: 22px 13px 18px #e02de0;<br>
22px 13px
18px
#e02de0;

.

. . <br><br><br><br><br><br><br>
<img src="img/ja.jpg " class="senka">
<style>
.senka{
-moz-box-shadow: 22px 13px 18px #e02de0;
-webkit-box-shadow: 22px 13px 18px #e02de0;
box-shadow: 22px 13px 18px #e02de0;
}
</style>
</h2>
<br> <br>
</div>
<!podesavanje slike da bude jednako prikazana na svim velicinama ekrana-->
<img src="img/1.jpg " class="img-responsive "> <h3> sasvim obicna slika koju inace
postavljate po potrebi na stranicu</h3>
<br><img src="img/2.jpg " class="img-responsive img-circle"><h3>slika koja je postavljena
da je vidljivi deo nje u krugu</h3>
<br><img src="img/3.jpg " class="img-responsive img-thumbnail"><h3> slika oko koje je
postavljen mali ram- uramljena slika </h3>
<br><img src="img/4.jpg " class="img-responsive img-circle img-thumbnail"><h3> slika u
obliku kruga koja ima mali ram oko sebe</h3>
</div>
</div>
</div>
</div>
</div>


<script src="js/jquery.js"></script>


</body>
</html>
https://cssanimation.rocks/list-items/
http://callmenick.com/post/image-overlay-hover-effects-with-css3-transitions

Class in Bootstrap1

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Class in Bootstrap1

Загружено:

Авторское право:

Доступные форматы

Bootstrap Sloboda u svakom pogledu

<button class="btn btn-default" type="submit">Button</button>

<button>Click to fade in boxes</button><br><br>

<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>

// ovo je za vise prozoraanimacije sa jednom funkcijom jquerya

// if the next image is not available then

next = $('.slides1 img:first,.slides2 img:first,.slides3 img:first');

curr.animate({opacity: 0.0},1000, function() {

// pick the next image

// repeat the function execution for every 3 secs

$('.slides1 img:first,.slides2 img:first,.slides3 img:first').addClass('top');

/* slajderi u srednjem delu stranice */

<div class="alert alert-success" role="alert"></div>

<div class="alert alert-success" role="alert">

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-

<a href=# data-toggle=tooltip data-placement=top data-original-title=Na primer> Nesto

<div class="container"> <! -->

<h2> Media screen md >= 992px</h2>

<h2> Small screen sm >= 768px</h2>

<h2> Extra Small screen xs >= 768px</h2>

(class="col-lg-2 col-md-2 col-sm-3 col-xs-2") , .

<div class="container"> <! -->

</div> <! -->

<h1> Novi deo gradiva - NOTIFIKACIJE</h1>

<button type="button" class="btn btn-primary">

<ul class="pagination nav-pills">

<li class="active"><a href="">10</a></li>

Home Private Pictures,

<button type="button" class="btn btn-primary btn-block">Button 1</button>

<img src="..." alt="..." class="img-rounded">

<img src="..." alt="..." class="img-circle">

<img src="..." alt="..." class="img-thumbnail">

<img src="..." class="img-responsive" alt="Responsive image">

img-responsive .center-block umesto .text-center.

<table class=table table-striped > <! -- >

.disabled dropdown item text color "no-parking-sign" icon

<div class="container" >

.form-controlU input, textarea,

.h1 - .h6 (h1-h6)

<div class="form-group has-success has-feedback">

.info background (<tr> (<td>).

<div id="myCarousel" class="carousel slide" data-ride="carousel">

<nav class="navbar navbar-default">

if (actives && actives.length) {

.progress progress bar

<nav class="navbar navbar-inverse navbar-fixed-top">

<div class="container active ">

.table (padding, bottom borders, etc)

.visible-print-block (display:block) print (pre)view

<script src="js/jquery-dodatak.js" type="text/javascript"></script>

<script src="js/javascript-dodatak.js" type="text/javascript"></script>

// ovo je za vise prozora animacije sa jednom funkcijom jquerya

/* slajderi u srednjem delu stranice */

<button type="button" class="btn btn-info" id="demo" >Simple collapsible</button>

<div class="container" style="border: #ff1e12 solid 5px;">

<h2 class="text-center"> .<br></h2>

opomena <button type="button" class="close" data-dismiss="alert"> ×</button>