Chủ đề Bootstrap "Đơn giản là tôi"
Tạo chủ đề: "Đơn giản là tôi"
Trang này sẽ chỉ cho 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, sau đó thêm ngày càng nhiều thành phần cho đến khi chúng tôi có một trang web đầy đủ chức năng, cá nhân và phản hồi.
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 CDN Bootstrap và đặt 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 vào trong một vùng chứa:
Ví 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 ở 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 lớp .text-center để căn giữa văn bản bên trong vùng chứa:
Ví 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 một hình tròn với lớp .img-circle :
Ví 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
Thêm nội dung
Thêm nhiều nội dung hơn và đặt nó vào trong các vùng chứa mới:
Ví 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?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Với một mục tiêu tối thiểu là có thể làm được, điều này sẽ không xảy ra khi bạn phải làm việc quá sức để có được một giải pháp sau mỗi giao dịch.
Tìm tôi ở đâu?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Với một mục tiêu tối thiểu là có thể làm được, điều này sẽ không xảy ra khi bạn phải làm việc quá sức để có được một giải pháp sau mỗi giao dịch.
Thêm phần đệm
Hãy làm cho các thùng chứa trông đẹp mắt bằng cách thêm một số phần đệm:
Ví 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?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Với một mục tiêu tối thiểu là có thể làm được, điều này sẽ không xảy ra khi bạn phải làm việc quá sức để có được một giải pháp sau mỗi giao dịch.
Tìm tôi ở đâu?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Với một mục tiêu tối thiểu là có thể làm được, điều này sẽ không xảy ra khi bạn phải làm việc quá sức để có được một giải pháp sau mỗi giao dịch.
Thêm một nút
Thêm một nút vào vùng chứa ở giữa:
Ví 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?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Với một mục tiêu tối thiểu là có thể làm được, điều này sẽ không xảy ra khi bạn phải làm việc quá sức để có được một giải pháp sau mỗi giao dịch.
Tìm kiếmThêm biểu tượng
Thêm biểu tượng Tìm kiếm vào nút "Tìm kiếm":
Ví dụ
<a href="#" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</a>
Kết quả:
Hãy tự mình thử »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 ):
Ví 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?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua.
Làm cho hình ảnh phản hồi nhanh
Thêm lớp .img-responsive cho tất cả hình ảnh.
Thêm display:inline vào hình ảnh đầu tiên để buộc nó ở giữa (lớp .img-responsive thêm display:block vào hình ảnh, khiến nó nhảy sang bên trái màn hình).
Nếu bạn muốn hình ảnh trải dài toàn bộ chiều rộng của màn hình khi nó bắt đầu xếp chồng, hãy thêm width:100% vào hình ảnh.
Khi mở ví dụ các bạn nhớ chỉnh kích thước màn hình để xem hiệu ứng responsive nhé:
Ví 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"> Hãy tự mình thử »Thêm thanh điều hướng
Thêm một thanh điều hướng tiêu chuẩn ở đầu trang và làm cho nó có thể thu gọn trên các màn hình nhỏ hơn:
Ví dụ
<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>Kết quả:
Hãy tự mình thử »Kiểu thanh điều hướng
Sử dụng CSS để tùy chỉnh thanh điều hướng:
Ví dụ
.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;
}Kết quả:
Hãy tự mình thử »Thêm chân trang
Thêm chân trang và sử dụng CSS để tạo kiểu cho nó:
Ví dụ
<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.example.com.vn">www.example.com.vn</a></p>
</footer>Kết quả:
Hãy tự mình thử »Liên lạc cuối cùng
Cá nhân hóa Chủ đề của bạn bằng cách thêm phông chữ bạn thích. Chúng tôi đã sử dụng "Montserrat" từ Thư viện Phông chữ của Google.
Link tới font chữ ở phần <head> :
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
Sau đó, bạn có thể sử dụng nó trong trang:
Ví dụ
body {
font: 20px "Montserrat", sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;} Chúng tôi cũng đã tạo một lớp lề "trợ giúp" để bổ sung thêm không gian ở những nơi mà chúng tôi cho là cần thiết; thường sau mỗi phần tử <h3> và <img> .
