Bootstrap bọc văn bản

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ơn

Bootstrap có sẵn 6 tiêu đề hiển thị khác nhau. This is a ví dụ

________số 8

Kế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ăn

Bạ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

3

Mã HTML trong các ví dụ trên sẽ tạo ra kết quả sau

mẹo. Trong CSS

Display Heading 1
Display Heading 2
Display Heading 3
Display Heading 4
Display Heading 5
Display Heading 6

4 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ệt

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

5

Kế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

0

Kế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

1

Kế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

2

Kế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.

h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading

3

Kế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

Display Heading 1
Display Heading 2
Display Heading 3
Display Heading 4
Display Heading 5
Display Heading 6

8 layer, as after

    Fancy display heading
    With faded secondary text

0

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

Display Heading 1
Display Heading 2
Display Heading 3
Display Heading 4
Display Heading 5
Display Heading 6

9 hoặc

    Fancy display heading
    With faded secondary text

30 trên phần tử cũng được

hoặc

Cắ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

    Fancy display heading
    With faded secondary text

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

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

    Fancy display heading
    With faded secondary text

1

Style text and overlay section

Bạn có thể sử dụng lớp

    Fancy display heading
    With faded secondary text

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