Tema Bootstrap "Simply Me"
Buat Tema: "Simply Me"
Halaman ini akan menunjukkan cara membuat tema Bootstrap dari awal.
Kami akan mulai dengan halaman HTML sederhana, dan kemudian menambahkan lebih banyak komponen, hingga kami memiliki situs web yang berfungsi penuh, pribadi, dan responsif.
Hasilnya akan terlihat seperti ini, dan Anda bebas untuk memodifikasi, menyimpan, membagikan, menggunakan, atau melakukan apa pun yang Anda inginkan dengannya:
Halaman Awal HTML
Kita 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 Masukkan Elemen ke dalam Wadah
Tambahkan Bootstrap CDN dan tautan ke jQuery dan letakkan 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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/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 Warna Latar Belakang dan Teks Tengah
1. Tambahkan kelas khusus (.bg-1) ke wadah untuk menambahkan warna latar belakang.
2. Tambahkan .text-centerkelas untuk memusatkan teks di dalam wadah:
Contoh
<head>
<style>
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
</style>
</head>
<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
Gambar lingkaran
Bentuk gambar menjadi lingkaran dengan .img-circlekelas:
Contoh
<img src="bird.jpg" class="img-circle" alt="Bird">
Hasil:
Siapa saya?
Saya seorang petualang
Lebih Banyak Konten
Tambahkan lebih banyak konten dan masukkan ke dalam wadah baru:
Contoh
<head>
<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>
</head>
<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?
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat. Untuk tujuan minimal, siapa di antara kita yang harus melakukan pekerjaan apa pun kecuali untuk mengambil keuntungan dari konsekuensinya.
Dimana Menemukan Saya?
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat. Untuk tujuan minimal, siapa di antara kita yang harus melakukan pekerjaan apa pun kecuali untuk mengambil keuntungan dari konsekuensinya.
Tambahkan Padding
Mari membuat wadah terlihat bagus dengan menambahkan beberapa bantalan:
Contoh
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>
Hasil:
Siapa saya?
Saya seorang petualang
Aku ini apa?
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat. Untuk tujuan minimal, siapa di antara kita yang harus melakukan pekerjaan apa pun kecuali untuk mengambil keuntungan dari konsekuensinya.
Dimana Menemukan Saya?
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat. Untuk tujuan minimal, siapa di antara kita yang harus melakukan pekerjaan apa pun kecuali untuk mengambil keuntungan dari konsekuensinya.
Tambahkan Tombol
Tambahkan tombol ke wadah tengah:
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?
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat. Untuk tujuan minimal, siapa di antara kita yang harus melakukan pekerjaan apa pun kecuali untuk mengambil keuntungan dari konsekuensinya.
MencariTambahkan Ikon
Tambahkan ikon Pencarian pada tombol "Cari":
Contoh
<a href="#" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</a>
Hasil:
Ubah Wadah Ketiga (Tambahkan Kotak)
Tambahkan tiga kolom dengan lebar yang sama di dalam wadah 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:
Dimana Menemukan Saya?
Rasa sakit itu sendiri penting, tetapi rasa sakit itu ditingkatkan oleh proses adipiscing, tetapi saya memberikan waktu untuk menguranginya sehingga saya melakukan beberapa pekerjaan dan rasa sakit yang hebat.
Rasa sakit itu sendiri penting, tetapi rasa sakit itu ditingkatkan oleh proses adipiscing, tetapi saya memberikan waktu untuk menguranginya sehingga saya melakukan beberapa pekerjaan dan rasa sakit yang hebat.
Rasa sakit itu sendiri penting, tetapi rasa sakit itu ditingkatkan oleh proses adipiscing, tetapi saya memberikan waktu untuk menguranginya sehingga saya melakukan beberapa pekerjaan dan rasa sakit yang hebat.
Jadikan Gambar Responsif
Tambahkan .img-responsivekelas ke semua gambar.
Tambahkan display:inlineke gambar pertama untuk memaksanya berada di tengah ( .img-responsivekelas menambahkan display:block
ke gambar, yang membuatnya melompat ke kiri layar).
Jika Anda ingin gambar menjangkau seluruh lebar layar saat mulai ditumpuk, tambahkan width:100%ke gambar.
Saat membuka contoh, ingatlah 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">
Tambahkan Navbar
Add a standard navigation bar at the top of the page with and make it collapsible on smaller screens:
Example
<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>
Result:
Style The Navbar
Use CSS to customize the navigation bar:
Example
.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;
}
Result:
Add a Footer
Add a footer and use CSS to style it:
Example
<style>
.bg-4 {
background-color: #2f2f2f;
color: #ffffff;
}
</style>
<footer class="container-fluid bg-4 text-center">
<p>Bootstrap Theme Made By <a href="https://www.w3schools.com">www.w3schools.com</a></p>
</footer>
Result:
Final Touch
Personalize your Theme by adding a font that you like. We have used "Montserrat" from Google's Font Library.
Link to the font in the
<head> section:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
Then you can use it in the page:
Example
body {
font: 20px "Montserrat", sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;}
We have also created a "helper" margin class to add extra space
where we think it's needed; usually after each <h3> and <img> element.
Example
.margin {margin-bottom: 45px;}