,%20Phần%201%20!!!)
Người Viết : ViKiMi Editor
Đối với trang web việc hiển thị Văn Bản luôn cần thiết và quan trọng. Giao diện người dùng luôn cần hiển thị văn bản chế độ chuẩn nhất. Việc giao tiếp của website và người dùng có được đánh giá cao khi hiển thị của giao diện website theo đúng mẫu chuẩn thiết kế của Văn bản trong giao diện web.
Việc thiết kế hiển thị văn bản luôn cần và là nhu cầu của Website. Bootstrap hỗ trợ các thiết kế văn bản đạt chuẩn khiến bạn hoàn toàn yên tâm khi hiển thị cho những khung bố cục Website. Các Chuẩn bố cục cho Văn bản và các định dạng của Văn Bản của Bootstrap giúp độ Nice của Website đạt điểm cao hơn.
Chúng ta sẽ làm quen với việc sử dụng Bootstrap với các định dạng cơ bản sẽ được đề cập tới dưới đây :
+ Mặc định chung, Bootstrap luôn để Font chữ cho toàn cục là 14px và line height là 1.428; điều này áp dụng chung cho cả website.
Và tất cả thẻ < P > đều có bottom margin bằng một nửa chiều cao được tính toàn của chúng.
+ Chúng ta sẽ thấy các thiết của Bootstrap khác hơn so với các mặc định trình duyệt.
THIẾT KẾ KIỂU CHO CÁC THẺ TIÊU ĐỀ HTML TỪ H1 ĐẾN H6
Chúng ta có đoạn mã HTML và Bootstrap :
<div class=”container”>
<h1>Tiêu Đề h1 Bootstrap (36px)</h1>
<h2>Tiêu Đề h2 Bootstrap (30px)</h2>
<h3>Tiêu Đề h3 Bootstrap (24px)</h3>
<h4>Tiêu Đề h4 Bootstrap (18px)</h4>
<h5>Tiêu Đề h5 Bootstrap (14px)</h5>
<h6>Tiêu Đề h6 Bootstrap (12px)</h6>
</div>
Kết quả hiển thị cho định dạng tiêu đề :
THIẾT KẾ VĂN BẢN PHỤ TRONG CÁC THẺ TIÊU ĐỀ HTML TỪ H1 ĐẾN H6
Bootstrap sử dụng thẻ < Small > để tạo văn bản phụ cho các tiêu đề, với kiểu được tạo cho các văn bản phụ nhỏ hơn bất kỳ tiêu đề nào.
Chúng ta có đoạn mã HTML và Bootstrap :
<div class=”container”>
<h1>Văn bản phụ, nhỏ hơn</h1>
<p>Phần tử <small> được sử dụng để tạo văn bản phụ, nhỏ hơn trong bất kỳ tiêu đề nào:</p>
<h1>Tiêu Đề h1 <small>Văn bản phụ</small></h1>
<h2>Tiêu Đề h2 <small>Văn bản phụ</small></h2>
<h3>Tiêu Đề h3 <small>Văn bản phụ</small></h3>
<h4>Tiêu Đề h4 <small>Văn bản phụ</small></h4>
<h5>Tiêu Đề h5 <small>Văn bản phụ</small></h5>
<h6>Tiêu Đề h6 <small>Văn bản phụ</small></h6>
</div>
Kết quả hiển thị cho các văn bản phụ của các tiêu đề :
THIẾT KẾ ĐÁNH DẤU CHO CÁC ĐOẠN VĂN BẢN, SỬ DỤNG ĐÁNH DẤU HIGHLIGHT VỚI THẺ < MARK >
Bootstrap sử dụng thẻ < mark > để highlight đoạn văn bản, cách thực hiện đem lại cách hiển thị tốt cho văn bản.
Chúng ta có đoạn mã HTML và Bootstrap :
<div class=”container”>
<h1>Highlight Văn bản</h1>
<p>Sử dụng thẻ < mark > để <mark> highlight </mark> Văn bản.</p>
<p>Sử dụng thẻ < mark > để <mark> highlight </mark> Văn bản.</p>
</div>
Kết quả hiển thị highlight đoạn văn bản sử dụng bootstrap :
THỰC HIỆN TRÍCH DẪN NGUỒN VĂN BẢN VỚI BOOTSTRAP
Bootstrap sử dụng thẻ < Blockquote > để hiển thị định dạng văn bản cho các trích dẫn từ các nguồn khác nhau.
Chúng ta có đoạn mã HTML và Bootstrap :
<div style=”color:green” class=”container”>
<h1>Blockquotes</h1>
<p>Phần tử < blockquote > được sử dụng để trình bày nội dung trích từ một nguồn khác:</p>
<blockquote>
<p>Nghi vấn làm sai đáp án của loạt câu hỏi lịch sử trong trận Chung kết, BTC Olympia chính thức lên tiếng. Chung kết Đường Lên Đỉnh Olympia năm 2022 đã diễn ra vào ngày 2/10, với vị trí Quán quân thuộc về thí sinh Đặng Lê Nguyên Vũ (trường THPT Bắc Duyên Hà – tỉnh Thái Bình). Dù đã kết thúc song trận Chung kết năm nay lại vấp phải nhiều tranh cãi khi xảy ra trường hợp trừ nhầm điểm của thí sinh (dù kết quả chung cuộc không bị ảnh hưởng).</p>
<footer>Nguồn Kênh 14 website</footer>
</blockquote>
</div>
Kết quả hiển thị nguồn trích dẫn sử dụng < Blockquote > với bootstrap :
ĐỂ HIỂN THỊ NGUỒN TRÍCH DẪN VỀ PHÍA BÊN PHẢI THÌ CẦN SỬ DỤNG THÊM CLASS = “.BLOCKQUOTE-REVERSE”
Chúng ta sẽ sử dụng thể class .blockquote-reverse như vậy < blockquote class =’ blockquote-reverse ’ >
Kết quả hiển thị nguồn trích dẫn về phía bên phải sử dụng < blockquote class=’ blockquote-reverse ’ >
TẠO KIỂU DANH SÁNH VỚI BOOTSTRAP SỬ DỤNG THẺ < DL>
Để tạo các danh sách sống động với Bootstrap, cho hiển thị tốt hơn định dạnh HTML mặc định của các trình duyệt, chúng ta sử dụng Bootstrap và thẻ < DL >
Chúng ta có đoạn mã HTML và Bootstrap :
<div class=”container”>
<h1>Hiển thị danh sách mô tả</h1>
<p>Thẻ <dl> dùng để hiển thị một danh sách mô tả :</p>
<dl>
<dt>Cà Phê Việt Nam </dt>
<dd>- Cà Phê sữa đá SG</dd>
<dt>Cà Phê Italy</dt>
<dd>- Expecial Capuchino</dd>
</dl>
</div>
Kết quả hiển thị danh sách với bootstrap :
HIỂN THỊ MÃ CODE TRONG TRÌNH BÀY VĂN BẢN VỚI BOOTSTRAP
Bootstrap sử dụng thẻ < code > để hiển thị các mã code trong đoạn văn bản trình bày hướng dẫn về mã code.
Chúng ta có đoạn mã HTML và Bootstrap :
<div class=”container”>
<h1>Code Snippets</h1>
<p>Các đoạn code nội tuyến phải được nhúng vào phần tử < code >:</p>
<p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.
Các phần tử HTML sau: <code> span </code>, <code> section </code> và <code> div </code> miêu tả một phần trong tài liệu.
</p>
</div>
Kết quả hiển thị mã code trong văn bản với bootstrap :
HIỂN THỊ NHIỀU DÒNG MÃ CODE TRONG VĂN BẢN VỚI BOOTSTRAP
Việc hiển thị nhiều dòng mã code trong các văn bản là luôn cần, đặc biệt với hiển thị đoạn mã code trong văn bản của website là cần thiết hơn nữa. Bootstrap sử dụng thẻ < PRE > để hiển thị nhiều dòng mã code.
Chúng ta có đoạn mã HTML và Bootstrap :
<div style=”color:green” class=”container”>
<h1>Hiển thị nhiều dòng Mã code</h1>
<p>Để hiển thị nhiều dòng mã code, sử dụng phần tử < pre > :</p>
<pre>
Văn bản trong một phần tử pre
được hiển thị trong một chiều rộng cố định
phông chữ và nó bảo tồn
cả không gian và
ngắt dòng.
</pre>
</div>
Kết quả hiển thị mã code trong văn bản với bootstrap :
Ngoài ra chúng ta còn nhiều class được định nghĩa trong Bootstrap để có thể đạt được mục đích hiển thị văn bản một cách tốt nhất mà chúng ta cần tham khảo.
.lead Làm cho một đoạn văn nổi bật
.small Thiết lập kích cỡ văn bản nhỏ hơn (được đặt thành 85% kích thước của văn bản gốc)
.text-left căn trái văn bản
.text-center căn giữa văn bản
.text-right căn phải văn bản
.text-justify căn đều 2 phía của văn bản
.text-nowrap Thiết lập không có văn bản bao bọc
.text-lowercase Thiết lập văn bản viết thường
.text-uppercase Thiết lập toàn bộ văn bản viết hoa
.text-capitalize Thiết lập văn bản viết hoa
.initialism Hiển thị văn bản bên trong phần tử <abbr> ở kích thước phông chữ nhỏ hơn một chút
.list-unstyled Loại bỏ kiểu danh sách mặc định và thực hiện căn lề trái trên các mục danh sách
.list-inline Đặt tất cả các mục trong danh sách trên một dòng
.dl-horizontal Các phần tử trong danh sách mô tả sẽ xếp hàng cạnh nhau
.pre-scrollable Tạo cho phần tử <pre> có thể cuộn
