Trong hướng dẫn này, bạn sẽ tìm hiểu về cách tạo kiểu và định dạng nội dung văn bản như tiêu đề, đoạn văn, dấu ngoặc kép, v. v. với Bootstrap
Làm việc với tiêu đề
You can mean all the HTML title, from
to - theo cách giống như cách bạn định nghĩa trong tài liệu HTML đơn giản. Bạn có thể sử dụng các lớp tiêu đề
Fancy display heading
With faded secondary text
4 đến
Fancy display heading
With faded secondary text
5 cho các phần tử khác, nếu bạn muốn áp dụng kiểu trên văn bản của phần tử giống như các tiêu đề. h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
Kết quả của ví dụ trên sẽ giống như sau
Customise title
Ngoài ra, bạn có thể sử dụng thẻ
Fancy display heading
With faded secondary text
6 với lớp
Fancy display heading
With faded secondary text
7 để hiển thị văn bản phụ thuộc bất kỳ tiêu đề nào trong một biến có thể nhỏ hơn và nhẹ hơn. This is a ví dụ
Fancy display heading
With faded secondary text
Kết quả của ví dụ trên sẽ giống như sau
Tiêu đề hiển thị
Bootstrap cũng cung cấp các tiêu đề hiển thị có thể được sử dụng khi bạn cần một tiêu đề nổi bật. Các tiêu đề hiển thị được hiển thị với
Fancy display heading
With faded secondary text
8 lớn hơn nhưng
Fancy display heading
With faded secondary text
9 nhẹ hơnBootstrap có sẵn 6 tiêu đề hiển thị khác nhau. This is a ví dụ
________số 8Kết quả của ví dụ trên sẽ giống như sau
Làm việc với đoạn văn
Default
Fancy display heading
With faded secondary text
8 chung of Bootstrap is 1rem [thường là 16px], with Display Heading 1
Display Heading 2
Display Heading 3
Display Heading 4
Display Heading 5
Display Heading 6
1 is 1. 5 [thường là 24px], được áp dụng cho phần tử cũng như tất cả các đoạn văn bản tức là phần tửNgoài ra
Display Heading 1
Display Heading 2
Display Heading 3
Display Heading 4
Display Heading 5
Display Heading 6
2 là 1rem cũng được áp dụng cho tất cả các đoạn vănBạn có thể làm cho một đoạn văn nổi bật bằng cách thêm lớp
Display Heading 1
Display Heading 2
Display Heading 3
Display Heading 4
Display Heading 5
Display Heading 6
3 cho nó
Fancy display heading
With faded secondary text
3Mã HTML trong các ví dụ trên sẽ tạo ra kết quả sau
mẹo. Trong CSS4 là viết tắt của "root em". 1rem bằng kích thước phông chữ của phần tử gốc [tức là phần tử ], theo mặc định là 16px trong hầu hết các trình duyệtDisplay Heading 1 Display Heading 2 Display Heading 3 Display Heading 4 Display Heading 5 Display Heading 6
Căn chỉnh văn bản
Bạn có thể dễ dàng căn chỉnh văn bản sang trái, phải và giữa bằng cách sử dụng các lớp căn chỉnh văn bản
Fancy display heading
With faded secondary text
5Kết quả của ví dụ trên sẽ giống như sau
Bạn cũng có thể căn chỉnh văn bản dựa trên kích thước màn hình bằng cách sử dụng các lớp để căn chỉnh văn bản trả lời. Các lớp này sử dụng các điểm ngắt độ rộng khung nhìn giống như hệ thống lưới
Fancy display heading
With faded secondary text
6Định dạng văn bản
Bạn có thể tự mình sử dụng các thẻ định dạng văn bản như
Fancy display heading
With faded secondary text
6,
Fancy display heading
With faded secondary text
6,
Fancy display heading
With faded secondary text
6 để làm cho văn bản của bạn đậm, nghiêng, nhỏ, v. v. , same as how you doing in page HTML đơn giản. This is a ví dụh1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
0Kết quả của ví dụ trên sẽ giống như sau
Chuyển đổi văn bản
Bạn cũng có thể biến văn bản thành chữ thường, chữ hoa hoặc chữ hoa
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
1Kết quả của ví dụ trên sẽ giống như sau
tô màu văn bản
Màu sắc là phương pháp mạnh mẽ để truyền tải thông tin quan trọng trong web thiết kế
Bootstrap có một số lớp tiện ích nhấn mạnh có thể được sử dụng cho mục đích này như hiển thị thông báo thành công bằng màu xanh lá cây, cảnh báo hoặc thông báo lỗi có màu đỏ, v. v
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
2Kết quả của ví dụ trên sẽ giống như sau
Create style quote
Bạn có thể tạo ra phong cách đẹp mắt cho các trích dẫn [blockquotes] của mình - Chỉ cần định nghĩa các trích dẫn bằng cách sử dụng phần tử
chuẩn và biểu định kiểu của bootstrap sẽ thực hiện lại phần còn lại.3h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading h6. Bootstrap headingKết quả của ví dụ trên sẽ giống như sau
Khi cung cấp thuộc tính, hãy bao bọc phần tử
của bạn trong một phần tử và sử dụng một phần tử hoặc một khối phần tử [ví dụ] with
8 layer, as afterDisplay Heading 1 Display Heading 2 Display Heading 3 Display Heading 4 Display Heading 5 Display Heading 6
0
Fancy display heading With faded secondary text
Kết quả của ví dụ trên sẽ giống như sau
Bạn có thể căn chỉnh các khối trích dẫn ở bên phải hoặc chính giữa bằng cách chỉ cần áp dụng các lớp căn cứ để chỉnh sửa văn bản
9 hoặcDisplay Heading 1 Display Heading 2 Display Heading 3 Display Heading 4 Display Heading 5 Display Heading 6
30 trên phần tử cũng được
Fancy display heading With faded secondary text
hoặcCắt bớt văn bản dài
Đối với văn bản dài hơn, bạn có thể sử dụng lớp
31 để cắt ngắn văn bản bằng dấu chấm lửng. Giá trị thuộc tính
Fancy display heading With faded secondary text
32 của phần tử phải là
Fancy display heading With faded secondary text
33 hoặc
Fancy display heading With faded secondary text
34
Fancy display heading With faded secondary text
Nó đặc biệt hữu ích trong trường hợp bạn muốn hiển thị một đoạn văn bản trong một dòng duy nhất nhưng không có đủ dung lượng. Hãy thử một ví dụ và xem nó hoạt động như thế nào
1
Fancy display heading With faded secondary text
Style text and overlay section
Bạn có thể sử dụng lớp
35 để bọc văn bản trong một phần tử bằng cách ghi đè thuộc tính
Fancy display heading With faded secondary text
36 của nó nếu nó được đặt thành
Fancy display heading With faded secondary text
37 hoặc
Fancy display heading With faded secondary text
38, ví dụ như thành phần huy hiệu của Bootstrap
Fancy display heading With faded secondary text