Chủ đề Bootstrap "Simply Me"
Tạo chủ đề: "Simply Me"
Trang này sẽ hướng dẫn bạn cách xây dựng chủ đề Bootstrap từ đầu.
Chúng tôi sẽ bắt đầu với một trang HTML đơn giản, và sau đó thêm ngày càng nhiều thành phần hơn, cho đến khi chúng tôi có một trang web đầy đủ chức năng, cá nhân và đáp ứng.
Kết quả sẽ như thế này và bạn có thể tự do sửa đổi, lưu, chia sẻ, sử dụng hoặc làm bất cứ điều gì bạn muốn với nó:
Trang bắt đầu HTML
Chúng ta sẽ bắt đầu với trang HTML sau:
<!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>
Thêm Bootstrap CDN và đưa các phần tử vào vùng chứa
Thêm Bootstrap CDN và một liên kết đến jQuery và đặt các phần tử HTML bên trong một vùng chứa:
Thí dụ
<!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>
Kết quả:
Tôi là ai?
Tôi là một nhà thám hiểm
Thêm màu nền và văn bản chính giữa
1. Thêm một lớp tùy chỉnh (.bg-1) vào vùng chứa để thêm màu nền.
2. Thêm .text-centerlớp vào giữa văn bản bên trong vùng chứa:
Thí dụ
<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>
Kết quả:
Tôi là ai?
Tôi là một nhà thám hiểm
Hình ảnh vòng tròn
Định hình hình ảnh thành hình tròn với .img-circlelớp:
Thí dụ
<img src="bird.jpg" class="img-circle" alt="Bird">
Kết quả:
Tôi là ai?
Tôi là một nhà thám hiểm
Nội dung khác
Thêm nhiều nội dung hơn và đặt nó bên trong các vùng chứa mới:
Thí dụ
<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>
Kết quả:
Tôi là ai?
Tôi là một nhà thám hiểm
Tôi là ai?
Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn. Để phần lớn điều đó xảy ra, bất kỳ ai trong chúng ta cũng sẽ thực hiện bất kỳ loại công việc nào ngoại trừ để tận dụng các mục tiêu từ nó.
Tìm tôi ở đâu?
Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn. Để phần lớn điều đó xảy ra, bất kỳ ai trong chúng ta cũng sẽ thực hiện bất kỳ loại công việc nào ngoại trừ để tận dụng các mục tiêu từ nó.
Thêm đệm
Hãy làm cho các vùng chứa trông đẹp mắt bằng cách thêm một số phần đệm:
Thí dụ
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>
Kết quả:
Tôi là ai?
Tôi là một nhà thám hiểm
Tôi là ai?
Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn. Để phần lớn điều đó xảy ra, bất kỳ ai trong chúng ta cũng sẽ thực hiện bất kỳ loại công việc nào ngoại trừ để tận dụng các mục tiêu từ nó.
Tìm tôi ở đâu?
Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn. Để phần lớn điều đó xảy ra, bất kỳ ai trong chúng ta cũng sẽ thực hiện bất kỳ loại công việc nào ngoại trừ để tận dụng các mục tiêu từ nó.
Thêm một nút
Thêm một nút vào vùng chứa giữa:
Thí dụ
<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>
Kết quả:
Tôi là ai?
Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn. Để phần lớn điều đó xảy ra, bất kỳ ai trong chúng ta cũng sẽ thực hiện bất kỳ loại công việc nào ngoại trừ để tận dụng các mục tiêu từ nó.
Tìm kiếmThêm một biểu tượng
Thêm biểu tượng Tìm kiếm trên nút "Tìm kiếm":
Thí dụ
<a href="#" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</a>
Kết quả:
Sửa đổi vùng chứa thứ ba (Thêm lưới)
Thêm ba cột có chiều rộng bằng nhau bên trong vùng chứa thứ ba ( .col-sm-4):
Thí dụ
<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>
Kết quả:
Tìm tôi ở đâu?
Bản thân nỗi đau là quan trọng, nhưng nỗi đau được tăng cường bởi quá trình tạo mỡ, nhưng tôi cho nó thời gian để cắt giảm nó để tôi làm một số công việc lớn và đau đớn.
Bản thân nỗi đau là quan trọng, nhưng nỗi đau được tăng cường bởi quá trình tạo mỡ, nhưng tôi cho nó thời gian để cắt giảm nó để tôi làm một số công việc lớn và đau đớn.
Bản thân nỗi đau là quan trọng, nhưng nỗi đau được tăng cường bởi quá trình tạo mỡ, nhưng tôi cho nó thời gian để cắt giảm nó để tôi làm một số công việc lớn và đau đớn.
Làm cho hình ảnh thích ứng
Thêm .img-responsivelớp vào tất cả các hình ảnh.
Thêm vào display:inlinehình ảnh đầu tiên để buộc nó được căn giữa ( .img-responsivelớp thêm display:block
vào hình ảnh, làm cho nó nhảy sang bên trái của màn hình).
Nếu bạn muốn hình ảnh kéo dài toàn bộ chiều rộng của màn hình khi nó bắt đầu xếp chồng lên nhau, hãy thêm width:100%vào hình ảnh.
Khi mở ví dụ, hãy nhớ thay đổi kích thước màn hình để xem hiệu ứng phản hồi:
Thí dụ
<!-- 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">
Thêm thanh điều hướng
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;}