Crea o temă: "Company"
Această pagină vă va arăta cum să construiască o temă Bootstrap de la zero.
Vom începe cu o pagină HTML simplu și apoi adăugați mai multe și mai multe componente, până când vom avea un site web complet funcțional, personal și receptiv.
Rezultatul va arata ca acest lucru, și sunteți liberi să modificați, salvați, să distribuiți, utilizați sau să faci ce vrei cu ea:
HTML Pagina de pornire
Vom începe cu următoarea pagină HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
Theme Company</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Company</h1>
<p>We specialize in blablabla</p>
</body>
</html>Adauga Bootstrap CDN Adaugă Jumbotron
Adăugați Bootstrap CDN și un link de jQuery și de a pune elemente HTML în interiorul unui .jumbotron :
Exemplu
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
Theme Company</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron">
<h1>Company</h1>
<p>We specialize in blablabla</p>
</div>
</body>
</html>Rezultat:
Companie
Suntem specializati in blablabla
Adăugați culoare de fundal și Centrul de text
1. Adăugați o culoare de fundal portocaliu la Jumbotron.
2. Adăugați .text-center de clasa pentru a centra textul din interiorul Jumbotron:
Exemplu
<style>
.jumbotron {
background-color:
#f4511e;
/* Orange */
color: #ffffff;
}
</style>
<body>
<div class="jumbotron
text-center">
<h1>Company</h1>
<p>We specialize in blablabla</p>
</div>
</body>Rezultat:
Companie
Suntem specializati in blablabla
Adăugați o formă
Adăugați un formular cu un câmp de intrare și un buton:
Exemplu
<div class="jumbotron
text-center">
<h1>Company</h1>
<p>We specialize in blablabla</p>
<form class="form-inline">
<input type="email" class="form-control" size="50" placeholder="Email
Address">
<button type="button" class="btn btn-danger">Subscribe</button>
</form>
</div>Rezultat:
Companie
Suntem specializati in blablabla
Adăugați Containere
Adăugați două recipiente ( .container-fluid ) , și se adaugă o clasă personalizat la al doilea container ( .bg-grey - adaugă o culoare de fundal gri):
Exemplu
<style>
.bg-grey {
background-color: #f6f6f6;
}
</style>
<div class="container-fluid">
<h2>About Company Page</h2>
<h4>Lorem ipsum..</h4>
<p>Lorem ipsum..</p>
<button
class="btn btn-default btn-lg">Get in Touch</button>
</div>
<div class="container-fluid
bg-grey">
<h2>Our Values</h2>
<h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4>
<p><strong>VISION:</strong> Our vision Lorem ipsum..
</div>Rezultat:
Despre companie Pagina
Lorem ipsum ..
Lorem ipsum ..
Valorile noastre
MISIUNE: Misiunea noastra Lorem ipsum ..
Viziune: Viziunea noastra Lorem ipsum ..
Adăugați Umplere
Permite face Jumbotron și containerele arata bine prin adăugarea unor padding:
Exemplu
<style>
.jumbotron {
background-color: #f4511e;
color: #fff;
padding: 100px 25px;
}
.container-fluid {
padding: 60px
50px;
}
</style>Rezultat:
Companie
Suntem specializati in blablabla
Despre companie Pagina
Lorem ipsum ..
Lorem ipsum ..
Valorile noastre
MISIUNE: Misiunea noastra Lorem ipsum ..
Viziune: Viziunea noastra Lorem ipsum ..
Adăugați o grilă
1. Adăugați o pictogramă (or the company's logo) - (or the company's logo) pentru fiecare container.
2. Se separă pictograma și "about text" cu .col-sm-8 .col-sm-4 "about text" la "about text" prin crearea a două coloane ( .col-sm-8 și .col-sm-4 )
3. Adăugați interogări media pentru a centra "logo column" - "logo column" pe ecrane mai mici de 768 pixeli lățime.
Exemplu
<style>
.logo {
font-size: 200px;
}
@media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
}
</style>
<div class="container-fluid">
<div
class="row">
<div class="col-sm-8">
<h2>About Company Page</h2>
<h4>Lorem
ipsum..</h4>
<p>Lorem ipsum..</p>
<button class="btn btn-default btn-lg">Get
in Touch</button>
</div>
<div
class="col-sm-4">
<span
class="glyphicon glyphicon-signal logo"></span>
</div>
</div>
</div>
<div class="container-fluid bg-grey">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon
glyphicon-globe logo"></span>
</div>
<div class="col-sm-8">
<h2>Our Values</h2>
<h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4>
<p><strong>VISION:</strong> Our vision Lorem ipsum..</p>
</div>
</div>
</div>Rezultat:
Despre companie Pagina
Lorem ipsum ..
Lorem ipsum ..
Valorile noastre
MISIUNE: Misiunea noastra Lorem ipsum ..
Viziune: Viziunea noastra Lorem ipsum ..
Adăugați servicii Container
Se adaugă un nou container, cu coloane 2x3 de lățime egală ( .col-sm-4 ) :
Exemplu
<div class="container-fluid text-center">
<h2>SERVICES</h2>
<h4>What we offer</h4>
<br>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon
glyphicon-off"></span>
<h4>POWER</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon
glyphicon-heart"></span>
<h4>LOVE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon
glyphicon-lock"></span>
<h4>JOB DONE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
<br><br>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon
glyphicon-leaf"></span>
<h4>GREEN</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon
glyphicon-certificate"></span>
<h4>CERTIFIED</h4>
<p>Lorem ipsum dolor
sit amet..</p>
</div>
<div
class="col-sm-4">
<span class="glyphicon
glyphicon-wrench"></span>
<h4>HARD
WORK</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
</div>
Rezultat:
SERVICII
Ceea ce oferim
PUTERE
Lorem ipsum dolor sit amet ..
DRAGOSTE
Lorem ipsum dolor sit amet ..
TREABA FĂCUTA
Lorem ipsum dolor sit amet ..
VERDE
Lorem ipsum dolor sit amet ..
CERTIFIED
Lorem ipsum dolor sit amet ..
MUNCA GREA
Lorem ipsum dolor sit amet ..
Styling Icoane
Adăugați o clasă personalizată ( .logo-small ) pentru fiecare glyphicon în "Services" container. Utilizați CSS pentru a le stil:
Exemplu
/* Add an orange color to all icons and set the font-size */
.logo-small
{
color: #f4511e;
font-size:
50px;
}
.logo
{
color: #f4511e;
font-size:
200px;
}
Rezultat:
Despre companie Pagina
Lorem ipsum ..
Lorem ipsum ..
Valorile noastre
MISIUNE: Misiunea noastra Lorem ipsum ..
Viziune: Viziunea noastra Lorem ipsum ..
SERVICII
Ceea ce oferim
PUTERE
Lorem ipsum dolor sit amet ..
DRAGOSTE
Lorem ipsum dolor sit amet ..
TREABA FĂCUTA
Lorem ipsum dolor sit amet ..
VERDE
Lorem ipsum dolor sit amet ..
CERTIFIED
Lorem ipsum dolor sit amet ..
MUNCA GREA
Lorem ipsum dolor sit amet ..
Adăugați Portofoliu Container
Crearea unui nou container de lățime, cu trei coloane de lățime egală ( .col-sm-4 ) :
În interiorul fiecărei coloane, adăugați o imagine.
Apoi, utilizați .img-thumbnail clasa de a modela imaginea la o miniatură.
În mod normal, va trebui să adăugați .img-thumbnail clasa direct la <img> element. În acest exemplu, am plasat un container miniatură în jurul imaginii, astfel încât să putem specifica un text de imagine, de asemenea.
Exemplu
<div class="container-fluid text-center bg-grey">
<h2>Portfolio</h2>
<h4>What we have created</h4>
<div
class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img
src="paris.jpg" alt="Paris">
<p><strong>Paris</strong></p>
<p>Yes, we built Paris</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img
src="newyork.jpg" alt="New York">
<p><strong>New York</strong></p>
<p>We built New York</p>
</div>
</div>
<div
class="col-sm-4">
<div class="thumbnail">
<img src="sanfran.jpg" alt="San Francisco">
<p><strong>San Francisco</strong></p>
<p>Yes, San Fran is ours</p>
</div>
</div>
</div>
Rezultat:
Portofoliu
Ceea ce am creat
Paris
Da, am construit Paris
New York
Am construit din New York
San Francisco
Da, San Fran este al nostru
Styling imagini în miniatură
Utilizați CSS pentru stilul imaginilor. În exemplul nostru, am încercat să le arate ca carduri, prin eliminarea frontierelor lor, și a stabilit o lățime de 100% pe fiecare imagine.
Exemplu
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
Rezultat:
Portofoliu
Ceea ce am creat
Paris
Da, am construit Paris
New York
Am construit din New York
San Francisco
Da, San Fran este al nostru
Adăugați un Carusel
Adăugați un carusel:
Exemplu
<h2>What our customers say</h2>
<div id="myCarousel" class="carousel
slide text-center" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel"
data-slide-to="0" class="active"></li>
<li
data-target="#myCarousel" data-slide-to="1"></li>
<li
data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<h4>"This company is the
best. I am so happy with the result!"<br><span style="font-style:normal;">Michael
Roe, Vice President, Comment Box</span></h4>
</div>
<div class="item">
<h4>"One word...
WOW!!"<br><span style="font-style:normal;">John Doe, Salesman, Rep Inc</span></h4>
</div>
<div class="item">
<h4>"Could I... BE any more happy with this company?"<br><span style="font-style:normal;">Chandler
Bing, Actor, FriendsAlot</span></h4>
</div>
</div>
<!-- Left and right controls -->
<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>Rezultat:
Ce spun clienții noștri
Încearcă - l singur »Stil caruselul
Utilizați CSS pentru stilul carusel:
Exemplu
.carousel-control.right, .carousel-control.left {
background-image: none;
color:
#f4511e;
}
.carousel-indicators li {
border-color: #f4511e;
}
.carousel-indicators li.active {
background-color: #f4511e;
}
.item h4 {
font-size: 19px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}
.item
span {
font-style: normal;
}Rezultat:
Ce spun clienții noștri
Încearcă - l singur »Adăugați Preturi Container
Crearea unui container plin lățime, cu trei coloane de lățime egală ( .col-sm-4 ) :
În interiorul fiecărei coloane, adăugați un panou:
Exemplu
<div class="container-fluid">
<div class="text-center">
<h2>Pricing</h2>
<h4>Choose a payment plan that works
for you</h4>
</div>
<div class="row">
<div class="col-sm-4">
<div
class="panel panel-default text-center">
<div class="panel-heading">
<h1>Basic</h1>
</div>
<div class="panel-body">
<p><strong>20</strong> Lorem</p>
<p><strong>15</strong> Ipsum</p>
<p><strong>5</strong> Dolor</p>
<p><strong>2</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div
class="panel-footer">
<h3>$19</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Pro</h1>
</div>
<div class="panel-body">
<p><strong>50</strong> Lorem</p>
<p><strong>25</strong> Ipsum</p>
<p><strong>10</strong> Dolor</p>
<p><strong>5</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div
class="panel-footer">
<h3>$29</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Premium</h1>
</div>
<div class="panel-body">
<p><strong>100</strong> Lorem</p>
<p><strong>50</strong> Ipsum</p>
<p><strong>25</strong> Dolor</p>
<p><strong>10</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div
class="panel-footer">
<h3>$49</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
</div>
</div>
Rezultat:
Prețuri
Alegeți un plan de plată care funcționează pentru tine
De bază
20 Lorem
15 Ipsum
5 Dolor
2 Sit
Endless Amet
Pro
50 Lorem
25 Ipsum
10 Dolor
5 Sit
Endless Amet
premiu
100 Lorem
50 Ipsum
25 Dolor
10 Sit
Endless Amet
Panouri Styling
Utilizați CSS pentru stilul panourilor:
Exemplu
.panel {
border: 1px solid #f4511e;
border-radius:0;
transition: box-shadow
0.5s;
}
.panel:hover {
box-shadow: 5px 0px
40px rgba(0,0,0, .2);
}
.panel-footer .btn:hover {
border: 1px solid #f4511e;
background-color: #fff
!important;
color: #f4511e;
}
.panel-heading
{
color: #fff !important;
background-color: #f4511e !important;
padding: 25px;
border-bottom: 1px solid transparent;
border-top-left-radius: 0px;
border-top-right-radius:
0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.panel-footer {
background-color:
#fff !important;
}
.panel-footer h3 {
font-size: 32px;
}
.panel-footer h4 {
color: #aaa;
font-size: 14px;
}
.panel-footer .btn {
margin:
15px 0;
background-color: #f4511e;
color: #fff;
}
Rezultat:
Prețuri
Alegeți un plan de plată care funcționează pentru tine
De bază
20 Lorem
15 Ipsum
5 Dolor
2 Sit
Endless Amet
Pro
50 Lorem
25 Ipsum
10 Dolor
5 Sit
Endless Amet
premiu
100 Lorem
50 Ipsum
25 Dolor
10 Sit
Endless Amet
Adăugați Contact Container
Adăugați un nou container cu informații de contact:
Exemplu
<div class="container-fluid bg-grey">
<h2
class="text-center">CONTACT</h2>
<div class="row">
<div
class="col-sm-5">
<p>Contact us and we'll get back to you
within 24 hours.</p>
<p><span class="glyphicon glyphicon-map-marker"></span>
Chicago, US</p>
<p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span>
[email protected]</p>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-6
form-group">
<input class="form-control" id="name" name="name"
placeholder="Name" type="text" required>
</div>
<div class="col-sm-6
form-group">
<input class="form-control" id="email" name="email"
placeholder="Email" type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments"
placeholder="Comment" rows="5"></textarea><br>
<div class="row">
<div class="col-sm-12 form-group">
<button class="btn btn-default pull-right"
type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>Rezultat:
A LUA LEGATURA
Contactați-ne și vom ajunge înapoi la tine în termen de 24 de ore.
Chicago, SUA
+00 1515151515
Adăugați Hărți Google
Adăugați Hărți Google (Pentru mai multe informații, citiți Google Maps Tutoria l):
Exemplu
<!-- Set height and width with CSS -->
<div id="googleMap" style="height:400px;width:100%;"></div>
<!-- Add Google Maps -->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(41.878114, -87.629798);
function initialize() {
var mapProp = {
center:myCenter,
zoom:12,
scrollwheel:false,
draggable:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("googleMap"),mapProp);
var
marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window,
'load', initialize);
</script>Rezultat:
Încearcă - l singur »Adăugați un Navbar
Adăugați un navbar în partea de sus a paginii, care se prăbușește pe ecrane mai mici:
Exemplu
<nav class="navbar navbar-default
navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#myNavbar">
<span
class="icon-bar"></span>
<span class="icon-bar"></span>
<span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul
class="nav navbar-nav navbar-right">
<li><a href="#about">ABOUT</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#pricing">PRICING</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>Rezultat:
Încearcă - l singur » Sfat: dreapta alinia butoanele de navigare cu navbar-right clasa.
Stilul navbar
Utilizați CSS pentru a personaliza bara de navigare:
Exemplu
.navbar {
margin-bottom: 0;
background-color: #f4511e;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing:
4px;
border-radius: 0;
}
.navbar li a, .navbar
.navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav
li.active a {
color: #f4511e !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle
{
border-color: transparent;
color: #fff !important;
}Rezultat:
Încearcă - l singur »Adăugați Scrollspy
Adăugați scrollspy pentru a actualiza automat link-uri navbar atunci când defilare:
Exemplu
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<div id="about" class="container-fluid">
<div id="services"
class="container-fluid">
<div id="portfolio" class="container-fluid">
<div id="pricing" class="container-fluid">
<div id="contact"
class="container-fluid"> Încearcă - l singur » Adăugați un subsol
Adăugați un "Up Arrow" în "Up Arrow" icoana la subsol, care va avea utilizatorul în partea de sus a paginii atunci când a făcut clic pe:
Exemplu
<style>
footer .glyphicon {
font-size: 20px;
margin-bottom: 20px;
color:
#f4511e;
}
</style>
<footer class="container-fluid text-center">
<a href="#myPage" title="To Top">
<span class="glyphicon
glyphicon-chevron-up"></span>
</a>
<p>Bootstrap Theme
Made By <a href="http://www.w3ii.com"
title="Visit w3ii">www.w3ii.com</a></p>
</footer>Rezultat:
Încearcă - l singur »Adăugarea Defilare lină
Utilizați jQuery pentru a adăuga defilarea lină (when clicking on the links in the navbar) - (when clicking on the links in the navbar) de (when clicking on the links in the navbar) :
Exemplu
<script>
$(document).ready(function(){
// Add
smooth scrolling to all links in navbar + footer link
$(".navbar
a, footer a[href='#myPage']").on('click', function(event) {
// Prevent default anchor
click behavior
event.preventDefault();
// Store hash
var hash =
this.hash;
// Using jQuery's animate() method to add smooth page
scroll
// The optional number (900) specifies the number of milliseconds
it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash
(#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
});
})
</script> Încearcă - l singur » Touch finală
Personalizați Tema adăugând un font care vă place. Am folosit "Montserrat" și "Lato" din Biblioteca Font Google.
Legătura cu fontul în <head> secțiunea:
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
Apoi, le puteți utiliza în pagina:
Exemplu
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
.jumbotron {
font-family: Montserrat,
sans-serif;
}
.navbar {
font-family:
Montserrat, sans-serif;
}Am adăugat, de asemenea, unele stil in plus la unele elemente:
Exemplu
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
} Încearcă - l singur » Slide în elementele
Am creat, de asemenea, un efect de animație care va aluneca în elementele de pe parcurgere. Dacă doriți să - l utilizați, trebuie doar să adăugați .slideanim clasa de la elementul pe care doriți să alunece în, și se adaugă următorul text la CSS și jQuery (simțiți - vă liber pentru a modifica durata, opacitatea, în cazul în care pentru a începe, când să alunece în, si asa mai departe):
CSS Exemplu
.slideanim {visibility:hidden;}
.slide {
/* The
name of the animation */
animation-name: slide;
-webkit-animation-name: slide;
/* The duration of the
animation */
animation-duration: 1s;
-webkit-animation-duration:
1s;
/* Make the element visible */
visibility: visible;
}
/* Go from 0% to 100% opacity (see-through) and specify the percentage
from when to slide in the element along the Y-axis */
@keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@-webkit-keyframes
slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}jQuery Exemplu
$(window).scroll(function() {
$(".slideanim").each(function(){
var pos = $(this).offset().top;
var winTop =
$(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
}); Încearcă - l singur »