Buat Tema: "Simply Me"
Halaman ini akan menunjukkan cara untuk membangun Bootstrap tema dari awal.
Kami akan mulai dengan halaman HTML sederhana, dan kemudian menambahkan semakin banyak komponen, sampai kita memiliki website berfungsi penuh, pribadi dan responsif.
Hasilnya akan terlihat seperti ini, dan Anda bebas untuk mengubah, menyimpan, berbagi, menggunakan atau melakukan apapun yang Anda inginkan dengan itu:
Start Page HTML
Kami akan mulai dengan halaman HTML berikut:
<!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>Tambahkan Bootstrap CDN dan Pasang Elemen di Kontainer
Tambahkan Bootstrap CDN dan link ke jQuery dan menempatkan elemen HTML di dalam wadah:
Contoh
<!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>Hasil:
Siapa saya?
Saya seorang petualang
Tambahkan Background Color dan Pusat Text
1. Tambahkan kelas kustom (BG-1) ke wadah untuk menambahkan warna latar belakang.
2. Tambahkan .text-center kelas ke pusat teks di dalam wadah:
Contoh
<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>Hasil:
Siapa saya?
Saya seorang petualang
lingkaran Gambar
Membentuk citra ke lingkaran dengan .img-circle kelas:
Contoh
<img src="bird.jpg"
class="img-circle" alt="Bird">
Hasil:
Siapa saya?
Saya seorang petualang
Konten lebih
Menambahkan lebih banyak konten dan memasukkannya ke dalam wadah baru:
Contoh
<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>Hasil:
Siapa saya?
Saya seorang petualang
Aku ini apa?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed jangan eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Di mana Untuk Cari saya?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed jangan eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Tambahkan Padding
Mari membuat wadah terlihat baik dengan menambahkan beberapa padding:
Contoh
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>Hasil:
Siapa saya?
Saya seorang petualang
Aku ini apa?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed jangan eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Di mana Untuk Cari saya?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed jangan eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Tambahkan Button
Menambahkan tombol ke pertengahan wadah:
Contoh
<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>
Hasil:
Aku ini apa?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed jangan eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
PencarianMenambahkan Icon
Menambahkan ikon Cari di tombol "Cari":
Contoh
<a href="#" class="btn btn-default btn-lg">
<span
class="glyphicon glyphicon-search"></span> Search
</a>
Hasil:
Cobalah sendiri "Memodifikasi Ketiga Kontainer (Add Grid)
Tambahkan tiga kolom dengan lebar yang sama di dalam kontainer ketiga ( .col-sm-4 ):
Contoh
<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>Hasil:
Di mana Untuk Cari saya?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ut incididunt labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ut incididunt labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ut incididunt labore et dolore magna aliqua.
Membuat Gambar Responsive
Tambahkan .img-responsive kelas untuk semua gambar.
Tambahkan display:inline untuk gambar pertama untuk memaksa untuk dipusatkan (yang .img-responsive kelas menambahkan display:block untuk gambar, yang membuatnya melompat ke kiri layar).
Jika Anda ingin gambar untuk menjangkau seluruh lebar layar ketika mulai menumpuk, menambahkan width:100% untuk gambar.
Ketika membuka contoh, ingat untuk mengubah ukuran layar untuk melihat efek responsif:
Contoh
<!-- 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"> Cobalah sendiri " Tambahkan Navbar a
Menambahkan bar navigasi standar di bagian atas halaman dengan dan membuatnya dilipat pada layar yang lebih kecil:
Contoh
<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>Hasil:
Cobalah sendiri "Gaya Navbar
Gunakan CSS untuk menyesuaikan bar navigasi:
Contoh
.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;
}Hasil:
Cobalah sendiri "Tambahkan Footer a
Tambahkan footer dan menggunakan CSS untuk gaya itu:
Contoh
<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>Hasil:
Cobalah sendiri "Sentuh akhir
Personalisasi Tema Anda dengan menambahkan font yang Anda sukai. Kami telah menggunakan "Montserrat" dari Perpustakaan Font Google.
Link ke font di <head> bagian:
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
Kemudian Anda dapat menggunakannya di halaman:
Contoh
body {
font: 20px "Montserrat", sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;} Kami juga telah menciptakan sebuah "pembantu" kelas marjin untuk menambahkan ruang ekstra di mana kita pikir itu diperlukan; biasanya setelah setiap <h3> dan <img> elemen.