tutorial pengembangan web terbaru
 

Bootstrap Theme "Simply Me"


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?

Burung

Saya seorang petualang

Cobalah sendiri "

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?

Burung

Saya seorang petualang

Cobalah sendiri "

lingkaran Gambar

Membentuk citra ke lingkaran dengan .img-circle kelas:

Contoh

<img src="bird.jpg" class="img-circle" alt="Bird">

Hasil:

Siapa saya?

Burung

Saya seorang petualang

Cobalah sendiri "

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?

Burung

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.

Cobalah sendiri "

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?

Burung

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.

Cobalah sendiri "

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.

Pencarian
Cobalah sendiri "

Menambahkan 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.

Gambar

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ut incididunt labore et dolore magna aliqua.

Gambar

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ut incididunt labore et dolore magna aliqua.

Gambar
Cobalah sendiri "

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.

Contoh

.margin {margin-bottom: 45px;}
Cobalah sendiri "

Lengkap "Simply Me" Tema