En son web geliştirme öğreticiler
 

Bootstrap Tema "Bant"

❮ Önceki Sonraki Bölüm ❯

Tema oluşturun: "The Band"

Bu sayfa nasıl sıfırdan bir Bootstrap tema oluşturmak için size gösterecektir.

Biz basit bir HTML sayfası ile başlar ve biz tamamen işlevsel kişisel ve duyarlı web sitesi var kadar sonra, daha fazla bileşen katacak.

Sonuç aşağıdaki gibi görünecektir ve kullanmak veya onunla ne yapmak istiyorsanız, değiştirmek payı kaydetmek serbesttir:

Tam Sayfa Demosu Tam Kaynak Kodu

HTML Başlangıç ​​Sayfası

Aşağıdaki HTML sayfası ile başlar:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Theme The Band</title>
  <meta charset="utf-8">
</head>
<body>

<div>
  <h3>THE BAND</h3>
  <p>We love music!</p>
  <p>We have created a fictional band website. Lorem ipsum..</p>
</div>

</body>
</html>

Önyükleme CDN ekleyin ve Kapsayıcı ekle

Önyükleme CDN ve jQuery bir bağlantı ekleyin ve bir kap içine HTML öğelerini koymak ( .container ) :

Örnek

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Theme The Band</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="container">
  <h3>THE BAND</h3>
  <p>We love music!</p>
  <p>We have created a fictional band website. Lorem ipsum..</p>
</div>

</body>
</html>

Sonuç:

MÜZİK GRUBU

Biz müziği seviyorum!

Biz hayali bant web sitesi oluşturduk. ipsum Lorem ..

Kendin dene "

merkez Metin

Ekle .text-center konteyner içindeki metni ortalamak için sınıf ve kullanımı <em> yapmak için eleman "We love music" metni italik:

Örnek

<div class="container text-center">
  <h3>THE BAND</h3>
  <p><em>We love music!</em></p>
  <p>We have created a fictional band website. Lorem ipsum..</p>
</div>

Sonuç:

MÜZİK GRUBU

Biz müziği seviyorum!

Biz hayali bant web sitesi oluşturduk. ipsum Lorem ..

Kendin dene "

Geciktirme ekle

konteyner dolgu ile iyi görünmesi için CSS kullanın:

Örnek

.container {
    padding: 80px 120px;
}

Sonuç:

MÜZİK GRUBU

Biz müziği seviyorum!

Biz hayali bant web sitesi oluşturduk. ipsum Lorem ..

Kendin dene "

Bir Izgara ekle

Genişliği eşit üç sütun oluşturun ( .col-sm-4 ) , metin ve resimleri ekleyin ve kabın içine koyun:

Örnek

<div class="container text-center">
  <h3>THE BAND</h3>
  <p><em>We love music!</em></p>
  <p>We have created a fictional band website. Lorem ipsum..</p>
  <br>
  <div class="row">
    <div class="col-sm-4">
      <p><strong>Name</strong></p><br>
      <img src="bandmember.jpg" alt="Random Name">
    </div>
    <div class="col-sm-4">
      <p><strong>Name</strong></p><br>
      <img src="bandmember.jpg" alt="Random Name">
    </div>
    <div class="col-sm-4">
      <p><strong>Name</strong></p><br>
      <img src="bandmember.jpg" alt="Random Name">
    </div>
  </div>
</div>

Sonuç:

MÜZİK GRUBU

Biz müziği seviyorum!

Biz hayali bant web sitesi oluşturduk. ipsum Lorem ..


isim


Rastgele Adı

isim


Rastgele Adı

isim


Rastgele Adı
Kendin dene "

çember Görüntü

Ile bir çevreye görüntü şekil .img-circle sınıfı.

Ayrıca görüntülerin iyi görünmesi için biraz CSS ekledik:

Örnek

.person {
    border: 10px solid transparent;
    margin-bottom: 25px;
    width: 80%;
    height: 80%;
    opacity: 0.7;
}
.person:hover {
    border-color: #f1f1f1;
}

<img src="bandmember.jpg" class="img-circle person" alt="Random Name">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name">

Sonuç:

isim


Rastgele Adı

isim


Rastgele Adı

isim


Rastgele Adı
Kendin dene "

Collapsibles

görüntüler katlanabilir olun; Her resmin üzerine tıkladığınızda ekstra içerik göstermek:

Örnek

<div class="row">
  <div class="col-sm-4">
    <p class="text-center"><strong>Name</strong></p><br>
    <a href="#demo" data-toggle="collapse">
      <img src="bandmember.jpg" class="img-circle person" alt="Random Name">
    </a>
    <div id="demo" class="collapse">
      <p>Guitarist and Lead Vocalist</p>
      <p>Loves long walks on the beach</p>
      <p>Member since 1988</p>
    </div>
  </div>
  <div class="col-sm-4">
    <p class="text-center"><strong>Name</strong></p><br>
    <a href="#demo2" data-toggle="collapse">
      <img src="bandmember.jpg" class="img-circle person" alt="Random Name">
    </a>
    <div id="demo2" class="collapse">
      <p>Drummer</p>
      <p>Loves drummin'</p>
      <p>Member since 1988</p>
    </div>
  </div>
  <div class="col-sm-4">
    <p class="text-center"><strong>Name</strong></p><br>
    <a href="#demo3" data-toggle="collapse">
      <img src="bandmember.jpg" class="img-circle person" alt="Random Name">
    </a>
    <div id="demo3" class="collapse">
      <p>Bass player</p>
      <p>Loves math</p>
      <p>Member since 2005</p>
    </div>
  </div>
</div>

Sonuç (click on the images to see the effect) :

isim


Rastgele Adı

Gitarist ve Kurşun Vokalist

sahilde uzun yürüyüşler Loves

Üye 1988 yılından bu yana

isim


Rastgele Adı

davulcu

Davul sesi Loves

Üye 1988 yılından bu yana

isim


Rastgele Adı

Bas çalan

matematik Loves

Üye 2005'den beri

Kendin dene "

Bir Carousel ekle

Bir atlıkarınca oluşturun ve konteyner önce ekleyin:

Örnek

<div id="myCarousel" class="carousel slide" 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">
      <img src="ny.jpg" alt="New York">
      <div class="carousel-caption">
        <h3>New York</h3>
        <p>The atmosphere in New York is lorem ipsum.</p>
      </div>
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
      <div class="carousel-caption">
        <h3>Chicago</h3>
        <p>Thank you, Chicago - A night we won't forget.</p>
      </div>
    </div>

    <div class="item">
      <img src="la.jpg" alt="Los Angeles">
      <div class="carousel-caption">
        <h3>LA</h3>
        <p>Even though the traffic was a mess, we had the best time.</p>
      </div>
    </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>

Sonuç:

Kendin dene "

Stil Carousel

atlıkarınca görünümünün CSS kullanın:

Örnek

.carousel-inner img {
    -webkit-filter: grayscale(90%);
    filter: grayscale(90%); /* make all photos black and white */
    width: 100%; /* Set width to 100% */
    margin: auto;
}

.carousel-caption h3 {
    color: #fff !important;
}

@media (max-width: 600px) {
    .carousel-caption {
        display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
    }
}

Sonuç:

Kendin dene "

Tur Kapsayıcı ekle

Yeni bir kapsayıcı ekleyin ve bir liste eklemek ( .list-group and .list-group-item ) bunun içinde.

Özel bir sınıf ekleyin ( .bg-1 ) konteynıra (black background color) ve çocuklara bazı stilleri:

Örnek

<style>
.bg-1 {
    background: #2d2d30;
    color: #bdbdbd;
}
.bg-1 h3 {color: #fff;}
.bg-1 p {font-style: italic;}
</style>

<div class="bg-1">
  <div class="container">
    <h3 class="text-center">TOUR DATES</h3>
    <p class="text-center">Lorem ipsum we'll play you some music.<br> Remember to book your tickets!</p>

    <ul class="list-group">
      <li class="list-group-item">September Sold Out!</li>
      <li class="list-group-item">October Sold Out!</li>
      <li class="list-group-item">November 3</li>
    </ul>
  </div>
</div>

Sonuç:

TUR TARİHLERİ

Lorem ipsum size bazı müzik oynayacağız.
bilet rezervasyon unutmayın!

  • Eylül kalmadı!
  • Ekim kalmadı!
  • 3 Kasım
Kendin dene "

Etiketleri ve Rozetleri ekle

Etiket ekleme ( .label ) ve bir rozet ( .badge ) satıldı mevcut bilet / vurgulamak için:

Örnek

<ul class="list-group">
  <li class="list-group-item">September <span class="label label-danger">Sold Out!</span></li>
  <li class="list-group-item">October <span class="label label-danger">Sold Out!</span></li>
  <li class="list-group-item">November <span class="badge">3</span></li>
</ul>

Sonuç:

TUR TARİHLERİ

Lorem ipsum size bazı müzik oynayacağız.
bilet rezervasyon unutmayın!

  • Eylül kalmadı!
  • Ekim kalmadı!
  • 3 Kasım
Kendin dene "

Küçük Resim Ekle

Tur kap içinde, eşit genişlikte, üç sütun eklemek ( .col-sm-4 ) :

Her sütunda içinde, bir görüntü ekleyin.

Ardından, kullanmak .img-thumbnail küçük resim görüntüyü şekillendirmeye sınıfı.

Normalde, eklersiniz .img-thumbnail doğrudan sınıfını <img> elemanı. biz de bir görüntü metni belirtebilirsiniz böylece bu örnekte, görüntünün etrafında bir minik konteyner yerleştirdik.

Örnek

<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>Fri. 27 November 2015</p>
      <button class="btn">Buy Tickets</button>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="thumbnail">
      <img src="newyork.jpg" alt="New York">
      <p><strong>New York</strong></p>
      <p>Sat. 28 November 2015</p>
      <button class="btn">Buy Tickets</button>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="thumbnail">
      <img src="sanfran.jpg" alt="San Francisco">
      <p><strong>San Francisco</strong></p>
      <p>Sun. 29 November 2015</p>
      <button class="btn">Buy Tickets</button>
    </div>
  </div>
</div>

Sonuç:

Moustiers-Sainte-Marie

Paris

Cum 27 Kasım 2015

Moustiers-Sainte-Marie

New York

Oturdu. 28 Kasım 2015

Moustiers-Sainte-Marie

San Francisco

Güneş. 29 Kasım 2015

Kendin dene "

Stil Listeleri, Minyatür ve Düğmeler

listesi ve küçük resimler görünümünün CSS kullanın. Örneğimizde, biz listeden yuvarlak sınırları kaldırdık ve biz onların sınır kaldırarak, kartlar gibi küçük resimler yapmaya çalıştık ve her görüntü üzerinde% 100 genişliğini ayarlayın.

Ayrıca Bootstrap adlı varsayılan stilleri değiştirmiş .btn siyah düğmeye, sınıf:

Örnek

/* Remove rounded borders from list */
.list-group-item:first-child {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.list-group-item:last-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

/* Remove border and add padding to thumbnails */
.thumbnail {
    padding: 0 0 15px 0;
    border: none;
    border-radius: 0;
}

.thumbnail p {
    margin-top: 15px;
    color: #555;
}

/* Black buttons with extra padding and without rounded borders */
.btn {
    padding: 10px 20px;
    background-color: #333;
    color: #f1f1f1;
    border-radius: 0;
    transition: .2s;
}

/* On hover, the color of .btn will transition to white with black text */
.btn:hover, .btn:focus {
    border: 1px solid #333;
    background-color: #fff;
    color: #000;
}

Sonuç:

  • Eylül kalmadı!
  • Ekim kalmadı!
  • 3 Kasım
Moustiers-Sainte-Marie

Paris

Cum 27 Kasım 2015

Moustiers-Sainte-Marie

New York

Oturdu. 28 Kasım 2015

Moustiers-Sainte-Marie

San Francisco

Güneş. 29 Kasım 2015

Kendin dene "

Bir Modal Ekle

İlk olarak, bir küçük resim içindeki tüm düğmeleri değiştirmek <button class="btn">Buy Tickets</button> için <button class="btn" data-toggle="modal" data-target="#myModal" >Buy Tickets</button> . Bu düğmeler, gerçek kalıcı açmak için kullanılır.

modal oluşturmak için, aşağıdaki kodu bakmak:

Örnek

<style>
/* Add a dark gray background color to the modal header and center text */
.modal-header, h4, .close {
    background-color: #333;
    color: #fff !important;
    text-align: center;
    font-size: 30px;
}

.modal-header, .modal-body {
    padding: 40px 50px;
}
</style>

<!-- Used to open the Modal -->
<button class="btn" data-toggle="modal" data-target="#myModal">Buy Tickets</button>

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

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4><span class="glyphicon glyphicon-lock"></span> Tickets</h4>
      </div>
      <div class="modal-body">
        <form role="form">
          <div class="form-group">
            <label for="psw"><span class="glyphicon glyphicon-shopping-cart"></span> Tickets, $23 per person</label>
            <input type="number" class="form-control" id="psw" placeholder="How many?">
          </div>
          <div class="form-group">
            <label for="usrname"><span class="glyphicon glyphicon-user"></span> Send To</label>
            <input type="text" class="form-control" id="usrname" placeholder="Enter email">
          </div>
          <button type="submit" class="btn btn-block">Pay
            <span class="glyphicon glyphicon-ok"></span>
          </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>Need <a href="#">help?</a></p>
      </div>
    </div>
  </div>
</div>

Sonuç (click on the "Buy Tickets" button to see the effect) :

Kendin dene "

İletişim Kapsayıcı ekle

Eşit olmayan genişlikte iki sütunlu, bir kapsayıcı oluşturma ( .col-md-4 and .col-md-8 ) .

İkinci ilk sütun ve form kontrolleri içindeki metin ile bilgilendirme simgeleri ekleyin:

Örnek

<div class="container">
  <h3 class="text-center">Contact</h3>
  <p class="text-center"><em>We love our fans!</em></p>
  <div class="row test">
    <div class="col-md-4">
      <p>Fan? Drop a note.</p>
      <p><span class="glyphicon glyphicon-map-marker"></span>Chicago, US</p>
      <p><span class="glyphicon glyphicon-phone"></span>Phone: +00 1515151515</p>
      <p><span class="glyphicon glyphicon-envelope"></span>Email: [email protected]</p>
    </div>
    <div class="col-md-8">
      <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>
      <div class="row">
        <div class="col-md-12 form-group">
          <button class="btn pull-right" type="submit">Send</button>
        </div>
      </div>
    </div>
  </div>
</div>

Sonuç:

Temas

Biz fanlar seviyorum!

Fan? Bir not bırak.

Chicago, ABD

Telefon: +00 1515151515

E-posta: [email protected]


Kendin dene "

Toggable Sekmeler Ekle

Sekmeler ekleyin ( .nav nav-tabs ) ile temas kabın içine "quotes" grup üyelerinin dan:

Örnek

<style>
.nav-tabs li a {
    color: #777;
}
</style>

<h3 class="text-center">From The Blog</h3>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Mike</a></li>
  <li><a data-toggle="tab" href="#menu1">Chandler</a></li>
  <li><a data-toggle="tab" href="#menu2">Peter</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h2>Mike Ross, Manager</h2>
    <p>Man, we've been on the road for some time now. Looking forward to lorem ipsum.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h2>Chandler Bing, Guitarist</h2>
    <p>Always a pleasure people! Hope you enjoyed it as much as I did. Could I BE.. any more pleased?</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h2>Peter Griffin, Bass player</h2>
    <p>I mean, sometimes I enjoy the show, but other times I enjoy other things.</p>
  </div>
</div>

Sonuç:

Blogdan

Mike Ross, Yöneticisi

Dostum, biz bir süredir yolda oldum. lorem ipsum bekliyorum.

Kendin dene "

Google Haritalar

Google Maps ekleyin (Daha fazla bilgi için lütfen okuyunuz Google Maps Tutoria l).

Haritanın genişlik, yükseklik ve rengini ayarlamak için CSS kullanın:

Örnek

<style>
#googleMap {
    width: 100%; /* Span the entire width of the screen */
    height: 400px; /* Set the height to 400 pixels */
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%); /* Change the color of the map to black and white * /
}
</style>

<div id="googleMap"></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>

Sonuç:

gri tonlama (% 100) ">
Kendin dene "

Bir Navbarınızı ekle

küçük ekranlarında çöker sayfanın üst kısmında bir navbar ekleyin:

Örnek

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <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="#home">HOME</a></li>
        <li><a href="#band">BAND</a></li>
        <li><a href="#tour">TOUR</a></li>
        <li><a href="#contact">CONTACT</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Merchandise</a></li>
            <li><a href="#">Extras</a></li>
            <li><a href="#">Media</a></li>
          </ul>
        </li>
        <li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
      </ul>
    </div>
  </div>
</nav>

Sonuç:

Kendin dene "

İpucu: ile navigasyon bağlantılarını sağ hizaya navbar-right sınıfa.
Bir açılır menüde gibi davranmaya gezinme çubuğu üzerinde bağlantılardan birini istiyorsanız, kullanmak .dropdown sınıfını

Stil Navbar'ı

gezinme çubuğunu özelleştirmek için CSS kullanın:

Örnek

/* Add a dark background color with a little bit see-through */
.navbar {
    margin-bottom: 0;
    background-color: #2d2d30;
    border: 0;
    font-size: 11px !important;
    letter-spacing: 4px;
    opacity:0.9;
}

/* Add a gray color to all navbar links */
.navbar li a, .navbar .navbar-brand {
    color: #d5d5d5 !important;
}

/* On hover, the links will turn white */
.navbar-nav li a:hover {
    color: #fff !important;
}

/* The active link */
.navbar-nav li.active a {
    color: #fff !important;
    background-color:#29292c !important;
}

/* Remove border color from the collapsible button */
.navbar-default .navbar-toggle {
    border-color: transparent;
}

/* Dropdown */
.open .dropdown-toggle {
    color: #fff ;
    background-color: #555 !important;
}

/* Dropdown links */
.dropdown-menu li a {
    color: #000 !important;
}

/* On hover, the dropdown links will turn red */
.dropdown-menu li a:hover {
    background-color: red !important;
}

Sonuç:

Kendin dene "

Scrollspy ekle

otomatik kaydırma yaparken navbar bağlantıları güncelleştirmek için scrollspy ekleyin:

Örnek

<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">

<div id="band" class="container">
<div id="tour" class="container">
<div id="contact" class="container">
Kendin dene "

Bir Altbilgi Ekle

1. Bir oluşturma <footer> elemanı ve bazı metin ekleyin.

2. CSS altbilgi stil.

3. Bir ekleme "Up Arrow" tıklandığında sayfanın üst kullanıcıyı alacak simgesini.

4. ipucu eklentisi başlatmak için jQuery kullanın:

Örnek

<style>
/* Add a dark background color to the footer */
footer {
    background-color: #2d2d30;
    color: #f5f5f5;
    padding: 32px;
}

footer a {
    color: #f5f5f5;
}

footer a:hover {
    color: #777;
    text-decoration: none;
}
</style>

<footer class="text-center">
  <a class="up-arrow" href="#myPage" data-toggle="tooltip" title="TO TOP">
    <span class="glyphicon glyphicon-chevron-up"></span>
  </a><br><br>
  <p>Bootstrap Theme Made By <a href="http://www.w3ii.com" data-toggle="tooltip" title="Visit w3ii">www.w3ii.com</a></p>
</footer>

<script>
$(document).ready(function(){
    // Initialize Tooltip
    $('[data-toggle="tooltip"]').tooltip();
})
</script>

Sonuç:

Kendin dene "

Pürüzsüz Kaydırma Ekleme

Düzgün kaydırma eklemek için jQuery kullanarak (when clicking on the links in the navbar) :

Örnek

<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>
Kendin dene "

Son dokunuş

Beğendiğiniz bir yazı ekleyerek Tema kişiselleştirin. Biz kullandık "Montserrat" ve "Lato" Google'ın Yazı Kütüphanesi'nden.

Içinde yazı bağlantı <head> bölümünde:

<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">

Sonra sayfasında kullanabilirsiniz:

Örnek

body {
    font: 400 15px/1.8 Lato, sans-serif;
    color: #777;
}

.navbar {
    font-family: Montserrat, sans-serif;
}

Ayrıca, bazı öğelere bazı ekstra stil ekledik:

Örnek

/* Overwrite default styles of h3 and h4 */
h3, h4 {
    margin: 10px 0 30px 0;
    letter-spacing: 10px;
    font-size: 20px;
    color: #111;
}

/* Remove rounded borders on input fields */
.form-control {
    border-radius: 0;
}

/* Disable the ability to resize textareas */
textarea {
    resize: none;
}
Kendin dene "

Komple "The Band" Teması


Tam Sayfa Demosu Tam Kaynak Kodu

❮ Önceki Sonraki Bölüm ❯