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 […]
Border shadow effect
CSS Box Shadow Effect 2 This effect will add shadows to the bottom corners of the boxes to create a lifted corner look on the boxes. This effect uses both the :before and :after properties to create new elements used for the corners. The HTML <div class=”box effect2″> <h3>Effect 2</h3> </div> The CSS .box h3{ […]
border-radius
-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomright: 30px; -moz-border-radius-bottomleft: 60px; -webkit-border-radius: 10px 20px 30px 60px; border-radius: 10px 20px 30px 60px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 50px; -moz-border-radius-bottomleft: 30px; -webkit-border-radius: 0px 0px 50px 30px; border-radius: 0px 0px 50px 30px;
Gradient
background: #ebf1f6; background: -moz-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb)); background: -webkit-linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); background: -o-linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); background: -ms-linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ebf1f6′, endColorstr=’#d5ebfb’,GradientType=0 ); background: linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); […]
text-shadow
Horizontal Length: 5px Vertical Length: 5px Blur Radius: 5px Shadow Color: #ff00ff; text-shadow: 5px 5px 5px #ff00ff; filter: dropshadow(color=#ff00ff, offx=5, offy=5);
box shadow
Inset: No; Horizontal Length: 0px Vertical Length: 0px Blur Radius: 50px Spread: 5px Shadow Color:#CCC -webkit-box-shadow: 0px 0px 50px 5px #ccc; -moz-box-shadow: 0px 0px 50px 5px #ccc; box-shadow: 0px 0px 50px 5px #ccc; Inset: No; Horizontal Length: 0px Vertical Length: 0px Blur Radius: 5px Spread: 50px -webkit-box-shadow: 0px 0px 5px 50px […]
jQuery Cycle
DOWNLOAD DEMO Prezentare Plugin-ul Cycle este un plugin jQuery pentru slideshow care acceptă multe tipuri diferite de efecte de tranzitie. Aceasta acceptă pause-on-hover, auto-oprire, auto-fit, înainte / după callback, declansatoare la clic si multe altele. De asemenea, suporta, dar nu necesita, plugin-ul Easing. Cum funcÅ£ionează Plugin-ul oferă o metodă numită cycle care este invocata pe […]