Unu Doi Trei Important Patru Cinci Unu Doi Trei Important Patru Cinci
Bootstrap modal
Demonstratie × Titlul ferestrei Acest exemplu foloseste AJAX pentru incarcarea textului ferestrei modale : <button type="button" class="btn btn-info" data-toggle="modal" data-target="#fereastra" onclick="getAJAX()">Demonstratie</button> <div class="modal fade" id="fereastra" tabindex="-1" role="dialog" aria-labelledby="fereastraLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="fereastraLabel">Titlul ferestrei</h4> </div> <div class="modal-body" id="fereastraContent"> </div> </div> </div></div><script type="text/javascript"> function getAJAX() […]
Bootstrap responsive embed
embed-responsive-16by9 embed-responsive-4by3 <div class=”embed-responsive [responsivetype]”> <iframe class=”embed-responsive-item” src=”https://www.youtube.com/embed/e6cSOtcc6l0?rel=0&showinfo=0″ frameborder=”0″ allowfullscreen></iframe> </div> [responsivetype] poate fi embed-responsive-4by3 sau embed-responsive-16by9 Pentru alte [responsivetype] adaptati CSS-ul dupa modelul : .embed-responsive-square { border: 1px solid #eee; padding-bottom: 100%; position: relative; }
Carusel (image slider)
Previous Next <div data-ride="carousel" class="carousel slide" id="carousel-example-generic"> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#carousel-example-generic"></li> <li data-slide-to="1" data-target="#carousel-example-generic" class=""></li> <li data-slide-to="2" data-target="#carousel-example-generic" class=""></li> <li data-slide-to="3" data-target="#carousel-example-generic" class=""></li> </ol> <div role="listbox" class="carousel-inner"> <div class="item active"> <img alt="First slide" src="http://www.mommypotamus.com/wp-content/uploads/2012/03/431589_66152372.jpg" data-holder-rendered="true"> </div> <div class="item"> <img alt="Second slide" src="http://diamondpages.co.za/wpimages/wpe6693555_05_06.jpg" data-holder-rendered="true"> </div> <div class="item"> <img alt="Third slide" src="http://www.westlandsdentalstudio.co.uk/images/facial.jpg" data-holder-rendered="true"> </div> <div […]
Panouri
Titlul panoului Continutul panoului Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tellus risus, tempor dignissim sodales a, dignissim et ex. Cras egestas consequat rhoncus. Nam fringilla pellentesque nunc non hendrerit. Aliquam condimentum tincidunt tortor, in pellentesque tortor molestie nec. Donec cursus egestas lacus, vel mollis urna lacinia quis. Cum sociis natoque penatibus et […]
Bara de navigare
Tab-uri
Acasa Profil Mesaje <ul role="tablist" class="nav nav-tabs"> <li class="active" role="presentation"><a href="#">Acasa</a></li> <li role="presentation"><a href="#">Profil</a></li> <li role="presentation"><a href="#">Mesaje</a></li> </ul> In loc de nav-tabs mai merge nav-pills
Alerte
Mesaj de alerta <div role="alert" class="alert alert-[type]"> Mesaj de alerta </div> [type] – una din variantele : default, primary, success, info, warning, danger CSS pentru alte tipuri : .alert-facebook { background-image: -webkit-linear-gradient(top,#f2dede 0,#e7c3c3 100%); background-image: -o-linear-gradient(top,#f2dede 0,#e7c3c3 100%); background-image: -webkit-gradient(linear,left top,left bottom,from(#f2dede),to(#e7c3c3)); background-image: linear-gradient(to bottom,#f2dede 0,#e7c3c3 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff2dede’,endColorstr=’#ffe7c3c3′,GradientType=0); background-repeat: repeat-x; border-color: #dca7a7; }
Tabele
# Numele Prenumele Username 1 Vasile Popescu @vasipop 2 Elena Ionescu @elenaio 3 Paul Georgescu @pgeo <table class="table [more]"> <thead> <tr> <th>#</th> <th>Numele</th> <th>Prenumele</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Vasile</td> <td>Popescu</td> <td>@vasipop</td> </tr> <tr> <td>2</td> <td>Elena</td> <td>Ionescu</td> <td>@elenaio</td> </tr> <tr> <td>3</td> <td>Paul</td> <td>Georgescu</td> <td>@pgeo</td> </tr> </tbody></table> Clase suplimentare optionale (in loc de [more]) table-striped […]
Butoane
Default Primary Success Info Warning Danger Link <button class=”btn btn-size btn-type” type=”button”>Danger</button> btn-size (optional) una din variantele : btn-lg, btn-sm, btm-xs type – una din variantele : default, primary, success, info, warning, danger, link CSS pentru alte tipuri : .btn-facebook { background-image: -webkit-linear-gradient(top,#d9534f 0,#c12e2a 100%); background-image: -o-linear-gradient(top,#d9534f 0,#c12e2a 100%); background-image: -webkit-gradient(linear,left top,left bottom,from(#d9534f),to(#c12e2a)); background-image: linear-gradient(to […]