Bootstrap - Reboot: Hướng dẫn thân thiện cho người mới bắt đầu

Xin chào các bạn future web developers! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị này vào thế giới của Bootstrap Reboot. Như một người đã dạy khoa học máy tính trong nhiều năm, tôi không thể chờ đợi để chia sẻ kiến thức và kinh nghiệm của mình với các bạn. Vậy, hãy lấy một tách cà phê (hoặc trà, nếu đó là sở thích của bạn), và chúng ta cùng bắt đầu nhé!

Bootstrap - Reboot

Bootstrap Reboot là gì?

Trước khi chúng ta bắt đầu, hãy để tôi kể cho bạn một câu chuyện ngắn. Hãy tưởng tượng bạn đang chuyển vào một ngôi nhà mới. Trước khi bắt đầu trang trí, bạn muốn có một mặt phẳng sạch sẽ, phải không? Đó chính xác là điều mà Bootstrap Reboot làm cho phát triển web. Nó giống như việc bạn sơn lại ngôi nhà của bạn, tạo ra một nền tảng nhất quán để bạn xây dựng.

Bootstrap Reboot là một bộ các phong cách CSS giúp chuẩn hóa các phần tử HTML mặc định trên các trình duyệt khác nhau. Nó giống như một ngôn ngữ UNIVERSAL cho các trình duyệt web, đảm bảo rằng trang web của bạn trông nhất quán không matter nó được xem ở đâu.

Cách tiếp cận

Cách tiếp cận của Bootstrap Reboot đơn giản nhưng mạnh mẽ. Nó nhằm mục đích:

Cung cấp một mặt phẳng sạch sẽ cho phát triển web
Đảm bảo tính nhất quán giữa các trình duyệt
Cải thiện tính khả dụng và khả năng truy cập

Bây giờ, hãy cùng tìm hiểu cụ thể!

Mặc định trang

Bootstrap Reboot đặt một số phong cách mặc định cho toàn bộ trang. Dưới đây là một ví dụ đơn giản:

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Trang web tuyệt vời của tôi</title>
</head>
<body>
<h1>Chào mừng bạn đến với trang web của tôi!</h1>
</body>
</html>

Trong ví dụ này, Bootstrap Reboot đảm bảo rằng:

box-sizing được đặt thành border-box cho tất cả các phần tử
font-family được đặt thành một stack phông chữ gốc (sẽ nói chi tiết hơn sau!)
line-height được đặt thành 1.5 để cải thiện khả năng đọc
background-color của body được đặt thành trắng

Stack phông chữ gốc

Nhớ lại khi chúng ta từng chỉ định phông chữ cụ thể cho các trang web của mình? Well, Bootstrap Reboot giới thiệu một stack phông chữ gốc. Nó giống như việc bạn có một tủ quần áo luôn trông đẹp, không matter bạn mặc gì!

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

Stack phông chữ này đảm bảo rằng văn bản của bạn trông tuyệt vời trên bất kỳ thiết bị nào, sử dụng phông chữ mặc định của hệ thống.

Tiêu đề

Tiêu đề giống như các tiêu đề chương trong một cuốn sách. Chúng giúp tổ chức nội dung và làm cho nó dễ đọc hơn. Bootstrap Reboot cung cấp phong cách nhất quán cho tất cả các cấp độ tiêu đề (h1 đến h6).

<h1>Đây là tiêu đề chính</h1>
<h2>Đây là tiêu đề phụ</h2>
<h3>Đây là tiêu đề phụ-thứ</h3>

Đoạn văn

Đoạn văn là phần không thể thiếu của nội dung của bạn. Bootstrap Reboot đảm bảo rằng chúng dễ đọc và có khoảng cách hợp lý.

<p>Đây là một đoạn văn. Nó dễ đọc nhờ vào phong cách mặc định của Bootstrap Reboot.</p>
<p>Đây là một đoạn văn khác. Chú ý khoảng cách giữa các đoạn văn nhé?</p>

Liên kết

Liên kết là những con đường cao tốc của internet, kết nối các phần khác nhau của trang web của bạn và dẫn đến các trang web khác. Bootstrap Reboot đảm bảo rằng chúng dễ nhận biết.

<a href="https://example.com">Đây là một liên kết</a>

Theo mặc định, liên kết có màu xanh lam và gạch chân. Khi bạn rê chuột vào chúng, gạch chân sẽ biến mất.

Quy tắc ngang

Quy tắc ngang giống như các phân cách trong một cuốn sổ tay. Chúng giúp phân cách các phần khác nhau của nội dung của bạn.

<hr>

Bootstrap Reboot đảm bảo rằng các quy tắc ngang dễ thấy nhưng không quá nổi bật.

Danh sách

Danh sách giúp tổ chức thông tin theo cấu trúc. Bootstrap Reboot cung cấp phong cách cho cả danh sách có thứ tự và danh sách không có thứ tự.

<ul>
<li>Đây là mục trong danh sách không có thứ tự</li>
<li>Đây là mục tiếp theo</li>
</ul>

<ol>
<li>Đây là mục trong danh sách có thứ tự</li>
<li>Đây là mục thứ hai</li>
</ol>

Mã inline

Đôi khi, bạn cần nổi bật một đoạn mã trong văn bản. Bootstrap Reboot làm điều này dễ dàng và trực quan.

<p>Sử dụng hàm <code>console.log()</code> để in ra console.</p>

Khối mã

Đối với các đoạn mã lớn hơn, bạn có thể sử dụng khối mã. Bootstrap Reboot đảm bảo rằng chúng dễ đọc và khác biệt về thị giác so với phần còn lại của nội dung.

<pre><code>
function greet(name) {
console.log(`Hello, ${name}!`);
}
</code></pre>

Biến

Trong lập trình, biến giống như các容器 chứa dữ liệu. Bootstrap Reboot cung cấp phong cách cho việc hiển thị biến trong văn bản.

<p>Biến <var>x</var> đại diện cho tọa độ x.</p>

Đầu vào người dùng

Khi bạn cần hiển thị đầu vào mà người dùng nên nhập, Bootstrap Reboot có bạn.

<p>Để lưu công việc của bạn, nhấn <kbd>Ctrl + S</kbd>.</p>

Đầu ra mẫu

Đôi khi, bạn cần hiển thị đầu ra của một chương trình có thể trông như thế nào. Bootstrap Reboot cung cấp phong cách cho điều này.

<samp>Đây là đầu ra có thể trông như thế này.</samp>

Bảng

Bảng rất tốt cho việc hiển thị dữ liệu có cấu trúc. Bootstrap Reboot đảm bảo rằng chúng sạch sẽ và dễ đọc.

<table>
<thead>
<tr>
<th>Tên</th>
<th Tuổi</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
</tr>
</tbody>
</table>

Form

Form là cách người dùng tương tác với trang web của bạn. Bootstrap Reboot cung cấp phong cách nhất quán cho các phần tử form.

<form>
<label for="name">Tên:</label>
<input type="text" id="name" name="name">

<label for="email">Email:</label>
<input type="email" id="email" name="email">

<button type="submit">Gửi</button>
</form>

Chỉ dẫn trên nút

Nút là các phần tử tương tác, và Bootstrap Reboot đảm bảo rằng chúng trông đúng phần tử.

<button>Nhấn vào tôi!</button>

Khi bạn rê chuột vào một nút, con trỏ sẽ thay đổi thành con trỏ chỉ dẫn, cho biết rằng nó có thể nhấp được.

Các phần tử khác nhau

Bootstrap Reboot cũng cung cấp phong cách cho nhiều phần tử HTML khác nhau. Dưới đây là một ví dụ nhanh:

<abbr title="HyperText Markup Language">HTML</abbr> là ngôn ngữ đánh dấu chuẩn cho các trang web.

Trích dẫn

Trích dẫn rất tốt để nổi bật các câu trích hoặc đoạn văn quan trọng.

<blockquote>
<p>Phải hay không phải, đó là vấn đề.</p>
<footer>— William Shakespeare</footer>
</blockquote>

Phần tử inline

Bootstrap Reboot đảm bảo rằng các phần tử inline được phong cách hóa nhất quán.

<p>Đoạn văn này có phần <strong>đậm</strong>, phần <em>italic</em>, và phần <u>gạch chân</u>.</p>

Tóm tắt

Phần tử <summary> được sử dụng cùng với <details> để tạo một phần có thể mở rộng/thu gọn.

<details>
<summary>Nhấp để mở rộng</summary>
<p>Đây là nội dung mở rộng.</p>
</details>

Thuộc tính [hidden] HTML5

Bootstrap Reboot tuân thủ thuộc tính hidden của HTML5, được sử dụng để ẩn các phần tử.

<div hidden>Nội dung này bị ẩn.</div>

Và đó là tất cả, các bạn! Chúng ta đã bao gồm các khía cạnh chính của Bootstrap Reboot. Nhớ rằng, thực hành làm cho hoàn hảo, vì vậy đừng ngần ngại thử nghiệm với các phần tử này trong các dự án của riêng bạn. Chúc các bạn may mắn với lập trình!

Credits: Image by storyset

Hướng Dẫn Trước:

Bootstrap - Lưới CSS

Hướng Dẫn Tiếp Theo:

Bootstrap - Typograph