Tworzenie Skórka: "Spółka"
Ta strona pokaże Ci, jak zbudować motyw Bootstrap od podstaw.
Zaczniemy od prostej strony HTML, a następnie dodać więcej i więcej składników, dopóki mamy w pełni funkcjonalny, osobiste i czułe internetowej.
Wynik będzie wyglądać, i jesteś swobodnie modyfikować, zapisywać, udostępniać lub wykorzystywać robić co chcesz z nim:
HTML startowa
Zaczniemy poniższej stronie 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>Dodaj Bootstrap CDN i Dodaj Jumbotron
Dodaj Bootstrap CDN oraz link do jQuery i umieścić elementy HTML wewnątrz .jumbotron :
Przykład
<!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>Wynik:
Firma
Specjalizujemy się w blablabla
Dodaj kolor tła i tekstu Center
1. Dodać pomarańczowy kolor tła do jumbotron.
2. Dodaj .text-center klasę, aby wyśrodkować tekst wewnątrz jumbotron:
Przykład
<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>Wynik:
Firma
Specjalizujemy się w blablabla
Dodaj Form
Dodaj formularz z polem wprowadzania i przycisk:
Przykład
<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>Wynik:
Firma
Specjalizujemy się w blablabla
Dodaj Kontenery
Dodaj dwa pojemniki ( .container-fluid ) i dodać klasę niestandardową do drugiego pojemnika ( .bg-grey - dodaje szary kolor tła):
Przykład
<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>Wynik:
O firmie Page
Lorem ipsum ..
Lorem ipsum ..
Nasze wartości
Misja: Misją lorem ipsum ..
VISION: Lorem ipsum Nasza wizja ..
Dodaj wyściółką
Pozwala dokonać jumbotron i pojemniki dobrze wyglądać dodając trochę padding:
Przykład
<style>
.jumbotron {
background-color: #f4511e;
color: #fff;
padding: 100px 25px;
}
.container-fluid {
padding: 60px
50px;
}
</style>Wynik:
Firma
Specjalizujemy się w blablabla
O firmie Page
Lorem ipsum ..
Lorem ipsum ..
Nasze wartości
Misja: Misją lorem ipsum ..
VISION: Lorem ipsum Nasza wizja ..
Dodaj siatce
1. Dodaj ikonę (lub logo firmy) do każdego pojemnika.
2. Oddzielić ikona i "o tekst" poprzez utworzenie dwóch kolumn ( .col-sm-8 i .col-sm-4 )
3. Dodać zapytań o media, aby wyśrodkować logo "kolumnę" na ekranach mniejsze niż 768 pikseli szerokości.
Przykład
<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>Wynik:
O firmie Page
Lorem ipsum ..
Lorem ipsum ..
Nasze wartości
Misja: Misją lorem ipsum ..
VISION: Lorem ipsum Nasza wizja ..
Dodaj usługi kontenerowe
Dodaj nowy pojemnik, z kolumnami 2x3 o równej szerokości ( .col-sm-4 ):
Przykład
<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>
Wynik:
USŁUGI
Co oferujemy
MOC
Lorem ipsum dolor sit amet..
MIŁOŚĆ
Lorem ipsum dolor sit amet..
ZADANIE WYKONANE
Lorem ipsum dolor sit amet..
ZIELONY
Lorem ipsum dolor sit amet..
ATESTOWANY
Lorem ipsum dolor sit amet..
CIĘŻKA PRACA
Lorem ipsum dolor sit amet..
Styling Ikony
Dodaj niestandardowej klasy ( .logo-small ) do każdego glyphicon w "Usługi" pojemnika. Za pomocą CSS, aby ich styl:
Przykład
/* 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;
}
Wynik:
O firmie Page
Lorem ipsum ..
Lorem ipsum ..
Nasze wartości
Misja: Misją lorem ipsum ..
VISION: Lorem ipsum Nasza wizja ..
USŁUGI
Co oferujemy
MOC
Lorem ipsum dolor sit amet..
MIŁOŚĆ
Lorem ipsum dolor sit amet..
ZADANIE WYKONANE
Lorem ipsum dolor sit amet..
ZIELONY
Lorem ipsum dolor sit amet..
ATESTOWANY
Lorem ipsum dolor sit amet..
CIĘŻKA PRACA
Lorem ipsum dolor sit amet..
Dodaj Portfolio Container
Utwórz nowy pojemnik na pełnej szerokości, z trzema kolumnami o równej szerokości ( .col-sm-4 ):
Wewnątrz każdej kolumny, dodać obraz.
Następnie użyj .img-thumbnail klasę kształtować obraz do miniaturki.
Normalnie, należy dodać .img-thumbnail klasę bezpośrednio do elementu <img>. W tym przykładzie, mamy umieścić pojemnik miniatury wokół obrazu, dzięki czemu możemy określić tekst obrazu, jak również.
Przykład
<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>
Wynik:
Teczka
Co udało nam się stworzyć
Paryż
Tak, zbudowaliśmy Paryż
Nowy Jork
Zbudowaliśmy Nowy Jork
San Francisco
Tak, San Fran jest nasze
Obrazy Styling Miniatura
Za pomocą CSS do stylu obrazów. W naszym przykładzie, staraliśmy się, aby wyglądały jak karty, usuwając ich obramowanie i ustaw szerokość 100% na każdym obrazie.
Przykład
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
Wynik:
Teczka
Co udało nam się stworzyć
Paryż
Tak, zbudowaliśmy Paryż
Nowy Jork
Zbudowaliśmy Nowy Jork
San Francisco
Tak, San Fran jest nasze
Dodaj karuzeli
Dodaj karuzeli:
Przykład
<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>Wynik:
Co mówią nasi klienci
Spróbuj sam "Styl Karuzela
Za pomocą CSS do stylu karuzeli:
Przykład
.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;
}Wynik:
Co mówią nasi klienci
Spróbuj sam "Dodaj Cennik Container
Tworzenie pełnej szerokości pojemnika, z trzema kolumnami o równej szerokości ( .col-sm-4 ):
Wewnątrz każdej kolumny, dodać panel:
Przykład
<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>
Wynik:
cennik
Wybierz plan płatności, który pracuje dla Ciebie
Podstawowy
20 Lorem
15 Ipsum
5 Dolor
2 Sit
Kompletne Amet
Zawodowiec
50 Lorem
25 Ipsum
10 Dolor
5 Sit
Kompletne Amet
Premia
100 Lorem
50 Ipsum
25 Dolor
10 Sit
Kompletne Amet
Panele stylizacji
Za pomocą CSS do stylu paneli:
Przykład
.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;
}
Wynik:
cennik
Wybierz plan płatności, który pracuje dla Ciebie
Podstawowy
20 Lorem
15 Ipsum
5 Dolor
2 Sit
Kompletne Amet
Zawodowiec
50 Lorem
25 Ipsum
10 Dolor
5 Sit
Kompletne Amet
Premia
100 Lorem
50 Ipsum
25 Dolor
10 Sit
Kompletne Amet
Dodaj kontakt Container
Dodaj nowy pojemnik z informacji kontaktowych:
Przykład
<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>Wynik:
KONTAKT
Skontaktuj się z nami, a my skontaktujemy się z Tobą w ciągu 24 godzin.
Chicago, USA
+00 1515151515
Dodaj Google Maps
Dodaj Google Maps (Aby uzyskać więcej informacji, przeczytaj nasz Google Maps Tutoria L):
Przykład
<!-- 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>Wynik:
Spróbuj sam "Dodaj NavBar
Dodaj navbar w górnej części strony, która zapada na mniejszych ekranach:
Przykład
<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>Wynik:
Spróbuj sam " | Wskazówka: Right-align przycisków nawigacyjnych z navbar-right klasie. |
|---|
Styl pasek nawigacyjny
Za pomocą CSS, aby dostosować pasek nawigacji:
Przykład
.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;
}Wynik:
Spróbuj sam "Dodaj Scrollspy
Dodaj scrollspy automatycznie aktualizować linki NavBar podczas przewijania:
Przykład
<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"> Spróbuj sam " Dodaj stopkę
Dodaj ikonę "Strzałka w górę" do stopki, które odbędzie użytkownika na górze strony po kliknięciu na:
Przykład
<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>Wynik:
Spróbuj sam "Dodawanie Płynne przewijanie
Użyj jQuery dodać płynnego przewijania (po kliknięciu na link na pasku nawigacyjnym):
Przykład
<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> Spróbuj sam " final Touch
Spersonalizuj swój temat, dodając czcionki, które lubisz. Użyliśmy "Montserrat" i "Lato" z biblioteki czcionek Google.
Link do czcionki w <head> sekcji:
<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">
Następnie można z nich korzystać na stronie:
Przykład
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;
}Dodaliśmy także kilka dodatkowych styl niektórych elementów:
Przykład
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;
} Spróbuj sam " Przesuń w elementach
Stworzyliśmy również efekt animacji, które będą przesuwać się w elementów na zwoju. Jeśli chcesz z niego korzystać, wystarczy dodać .slideanim klasy do elementu, który chcesz przesunąć się i dodaj następujące do CSS i jQuery (czuć się swobodnie modyfikować trwania, krycie, od czego zacząć, kiedy należy wsunąć, i tak dalej):
Przykład CSS
.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%);
}
}Przykład jQuery
$(window).scroll(function() {
$(".slideanim").each(function(){
var pos = $(this).offset().top;
var winTop =
$(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
}); Spróbuj sam "