Tema oluşturun: "Simply Me"
Bu sayfa nasıl bir inşa etmek size gösterecektir Bootstrap sıfırdan tema.
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:
HTML Başlangıç Sayfası
Aşağıdaki HTML sayfası ile başlar:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap
Theme Simply Me</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
</head>
<body>
<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>
</body>
</html>Ekle Bootstrap CDN ve kapsayıcı Elements koy
Ekle Bootstrap CDN ve jQuery bir bağlantı ve bir kap içine HTML öğelerini koyun:
Örnek
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap
Theme Simply Me</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-fluid">
<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>
</div>
</body>
</html>Sonuç:
Ben kimim?
Ben bir maceracı değilim
Arkaplan Rengi ve Centre Metin Ekle
1. Özel bir sınıf ekleyin (.bg-1) bir arka plan rengi eklemek için konteynıra.
2. Ekle .text-center konteyner içindeki metni ortalamak için sınıf:
Örnek
<style>
.bg-1 {
background-color: #1abc9c;
/* Green */
color: #ffffff;
}
</style>
<body>
<div class="container-fluid
bg-1
text-center">
<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>
</div>
</body>Sonuç:
Ben kimim?
Ben bir maceracı değilim
çember Görüntü
Ile bir çevreye görüntü şekil .img-circle sınıfı:
Örnek
<img src="bird.jpg"
class="img-circle" alt="Bird">
Sonuç:
Ben kimim?
Ben bir maceracı değilim
Diğer İçerikler
Daha fazla içerik ekleyin ve yeni kaplara içine koydu:
Örnek
<style>
.bg-1 {
background-color: #1abc9c;
/* Green */
color: #ffffff;
}
.bg-2 {
background-color:
#474e5d; /* Dark Blue */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff;
/* White */
color: #555555;
}
</style>
<body>
<div class="container-fluid
bg-1
text-center">
<h3>Who Am I?</h3>
<img src="bird.jpg" class="img-circle" alt="Bird">
<h3>I'm an adventurer</h3>
</div>
<div class="container-fluid bg-2 text-center">
<h3>What Am I?</h3>
<p>Lorem ipsum..</p>
</div>
<div class="container-fluid bg-3 text-center">
<h3>Where To Find Me?</h3>
<p>Lorem ipsum..</p>
</div>
</body>Sonuç:
Ben kimim?
Ben bir maceracı değilim
Ben neyim?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, eiusmod incididunt ut tempor do sed Labore et dolore magna aliqua. Ut enim reklam damla veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Nerede Beni Bul?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, eiusmod incididunt ut tempor do sed Labore et dolore magna aliqua. Ut enim reklam damla veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Geciktirme ekle
Bazı dolgu ekleyerek konteynerler iyi görünmesini sağlar:
Örnek
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>Sonuç:
Ben kimim?
Ben bir maceracı değilim
Ben neyim?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, eiusmod incididunt ut tempor do sed Labore et dolore magna aliqua. Ut enim reklam damla veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Nerede Beni Bul?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, eiusmod incididunt ut tempor do sed Labore et dolore magna aliqua. Ut enim reklam damla veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Bir Düğme Ekle
orta kaba bir düğme ekleyin:
Örnek
<div class="container-fluid bg-2
text-center">
<h3>What Am I?</h3>
<p>Lorem ipsum..</p>
<a href="#" class="btn btn-default btn-lg">Search</a>
</div>
Sonuç:
Ben neyim?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, eiusmod incididunt ut tempor do sed Labore et dolore magna aliqua. Ut enim reklam damla veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
AramaBir Simgesi ekleme
Bir ara simge ekleyin "Search" butonuna:
Örnek
<a href="#" class="btn btn-default btn-lg">
<span
class="glyphicon glyphicon-search"></span> Search
</a>
Sonuç:
Kendin dene "Üçüncü Kapsayıcı değiştirin (Add Grid)
Üçüncü kap içinde eşit genişlikte, üç sütun ekleyin ( .col-sm-4 ) :
Örnek
<div class="container-fluid bg-3 text-center">
<h3>Where
To Find Me?</h3>
<div class="row">
<div class="col-sm-4">
<p>Lorem
ipsum..</p>
<img src="birds1.jpg" alt="Image">
</div>
<div class="col-sm-4">
<p>Lorem
ipsum..</p>
<img src="birds2.jpg" alt="Image">
</div>
<div class="col-sm-4">
<p>Lorem
ipsum..</p>
<img src="birds3.jpg" alt="Image">
</div>
</div>
</div>Sonuç:
Nerede Beni Bul?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, eiusmod incididunt ut tempor do sed Labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, eiusmod incididunt ut tempor do sed Labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, eiusmod incididunt ut tempor do sed Labore et dolore magna aliqua.
Görüntüler Duyarlı olun
Ekle .img-responsive tüm resimlere sınıfı.
Ekle display:inline ilk görüntüye artık ortada edilecek zorlamak için ( .img-responsive sınıf ekler display:block ekranın solunda atlamak yapar görüntüye kadar).
Eğer yığın başladığında görüntü ekranın tüm genişliğini kapsayan istiyorsanız eklemek width:100% görüntüye.
örnek açarken, duyarlı etkisini görmek için ekrana yeniden boyutlandırmak unutmayın:
Örnek
<!-- The circular bird -->
<img src="bird.jpg" class="img-responsive
img-circle" style="display:inline" alt="Bird">
<!-- The birds in our grid: -->
<img src="birds1.jpg" class="img-responsive" style="width:100%" alt="Image">
<img
src="birds2.jpg" class="img-responsive" style="width:100%"
alt="Image">
<img
src="birds3.jpg" class="img-responsive" style="width:100%"
alt="Image"> Kendin dene " Bir Navbarınızı ekle
ile sayfanın üst kısmında standart bir gezinti çubuğu ekleyin ve daha küçük ekranlarda katlanabilir olun:
Örnek
<nav class="navbar navbar-default">
<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="#">Me</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul
class="nav navbar-nav navbar-right">
<li><a href="#">WHO</a></li>
<li><a href="#">WHAT</a></li>
<li><a href="#">WHERE</a></li>
</ul>
</div>
</div>
</nav>Sonuç:
Kendin dene "Stil Navbar'ı
gezinme çubuğunu özelleştirmek için CSS kullanın:
Örnek
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}Sonuç:
Kendin dene "Bir Altbilgi Ekle
altbilgi ekleyin ve bunu CSS kullanarak:
Örnek
<style>
.bg-4 {
background-color: #2f2f2f;
color: #ffffff;
}
</style>
<footer class="container-fluid bg-4
text-center">
<p> Bootstrap Theme Made By <a href="http://www.w3ii.com">www.w3ii.com</a></p>
</footer>Sonuç:
Kendin dene "Son dokunuş
Beğendiğiniz bir yazı ekleyerek Tema kişiselleştirin. Biz kullandık "Montserrat" 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">
Sonra sayfasında kullanabilirsiniz:
Örnek
body {
font: 20px "Montserrat", sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;} Biz de bir yarattık "helper" biz gerekli düşünüyorum ekstra boşluk eklemek için marjı sınıfını; genellikle her sonra <h3> ve <img> elemanı.