Tài liệu và ví dụ về kiểu chữ Bootstrap, bao gồm cài đặt chung, tiêu đề, văn bản nội dung, danh sách, v.v.

Bạn đang xem : lớp bootstrap cho tiêu đề

Kiểu chữ

Tài liệu và ví dụ về kiểu chữ Bootstrap, bao gồm cài đặt chung, tiêu đề, nội dung, danh sách, v.v.

Cài đặt chung

Bootstrap thiết lập các kiểu hiển thị, kiểu chữ và liên kết toàn cầu cơ bản. Khi cần kiểm soát nhiều hơn, hãy xem các lớp tiện ích dạng văn bản .

  • Sử dụng ngăn xếp phông chữ gốc để chọn font-family tốt nhất cho từng hệ điều hành và thiết bị.
  • Để có thang loại bao gồm và dễ tiếp cận hơn, chúng tôi giả định rằng root mặc định của trình duyệt font-size (thường là 16px) để khách truy cập có thể tùy chỉnh các mặc định của trình duyệt nếu cần. < / li>
  • Sử dụng $ font-family-base , $ font-size-base $ line-height-base làm cơ sở đánh máy của chúng tôi được áp dụng cho & lt; body & gt; .
  • Đặt màu liên kết chung qua $ link-color và chỉ áp dụng gạch dưới liên kết trên : hover .
  • Sử dụng $ body-bg để đặt background-color trên & lt; body & gt; ( # fff theo mặc định).

Bạn có thể tìm thấy những kiểu này trong _ reboot.scss và các biến toàn cục được xác định trong _ variable.scss . Đảm bảo đặt $ font-size-base trong rem .

Tiêu đề

Tất cả các tiêu đề HTML, & lt; h1 & gt; đến & lt; h6 & gt; , đều có sẵn.

Phần mở đầu
Thí dụ

& lt; h1 & gt; & lt; / h1 & gt;

h1. Tiêu đề Bootstrap

& lt; h2 & gt; & lt; / h2 & gt;

h2. Tiêu đề Bootstrap

& lt; h3 & gt; & lt; / h3 & gt;

h3. Tiêu đề Bootstrap

& lt; h4 & gt; & lt; / h4 & gt;

h4. Tiêu đề Bootstrap

& lt; h5 & gt; & lt; / h5 & gt;

h5. Tiêu đề Bootstrap

& lt; h6 & gt; & lt; / h6 & gt;

h6. Tiêu đề Bootstrap

  

& lt; h1 & gt;

h1. Tiêu đề Bootstrap

& lt; / h1 & gt;

& lt; h2 & gt;

h2. Tiêu đề Bootstrap

& lt; / h2 & gt;

& lt; h3 & gt;

h3. Tiêu đề Bootstrap

& lt; / h3 & gt;

& lt; h4 & gt;

h4. Tiêu đề Bootstrap

& lt; / h4 & gt;

& lt; h5 & gt;

h5. Tiêu đề Bootstrap

& lt; / h5 & gt;

& lt; h6 & gt;

h6. Tiêu đề Bootstrap

& lt; / h6 & gt;

Các lớp

. h1 đến . h6 cũng có sẵn, khi bạn muốn khớp với kiểu phông chữ của một tiêu đề nhưng không thể sử dụng phần tử HTML được liên kết.

h1. Tiêu đề Bootstrap

h2. Tiêu đề Bootstrap

h3. Tiêu đề Bootstrap

h4. Tiêu đề Bootstrap

h5. Tiêu đề Bootstrap

h6. Tiêu đề Bootstrap

  

& lt; p

class =

"h1"

& gt;

h1. Tiêu đề Bootstrap

& lt; / p & gt;

& lt; p

class =

"h2"

& gt;

h2. Tiêu đề Bootstrap

& lt; / p & gt;

& lt; p

class =

"h3"

& gt;

h3. Tiêu đề Bootstrap

& lt; / p & gt;

& lt; p

class =

"h4"

& gt;

h4. Tiêu đề Bootstrap

& lt; / p & gt;

& lt; p

class =

"h5"

& gt;

h5. Tiêu đề Bootstrap

& lt; / p & gt;

& lt; p

class =

"h6"

& gt;

h6. Tiêu đề Bootstrap

& lt; / p & gt;

Tùy chỉnh tiêu đề

Sử dụng các lớp tiện ích đi kèm để tạo lại văn bản tiêu đề phụ nhỏ từ Bootstrap 3.

Tiêu đề hiển thị lạ mắt
Với văn bản phụ bị mờ

  

& lt; h3 & gt;

Tiêu đề hiển thị lạ mắt

& lt; small

class =

"text-muted"

& gt;

Với văn bản phụ bị mờ

& lt; / small & gt;

& lt; / h3 & gt;

Hiển thị tiêu đề

Các phần tử tiêu đề truyền thống được thiết kế để hoạt động tốt nhất trong nội dung trang của bạn. Khi bạn cần một tiêu đề nổi bật, hãy cân nhắc sử dụng tiêu đề hiển thị —một kiểu tiêu đề lớn hơn, cố định hơn một chút.

Hiển thị 1

Hiển thị 2

Hiển thị 3

Hiển thị 4

  

& lt; h1

class =

"display-1"

& gt;

Hiển thị 1

& lt; / h1 & gt;

& lt; h1

class =

"display-2"

& gt;

Hiển thị 2

& lt; / h1 & gt;

& lt; h1

class =

"display-3"

& gt;

Hiển thị 3

& lt; / h1 & gt;

& lt; h1

class =

"display-4"

& gt;

Hiển thị 4

& lt; / h1 & gt;

Khách hàng tiềm năng

Làm cho một đoạn văn nổi bật bằng cách thêm . lead .

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, không phải hàng hóa luctus.

  

& lt; p

class =

"lead"

& gt;

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, không phải hàng hóa luctus.

& lt; / p & gt;

Phần tử văn bản nội tuyến

Tạo kiểu cho các phần tử HTML5 nội tuyến phổ biến.

Bạn có thể sử dụng thẻ đánh dấu để đánh dấu văn bản.

Dòng văn bản này được coi là văn bản đã xóa.

Dòng văn bản này có nghĩa là không còn chính xác nữa.

Dòng văn bản này được coi như một phần bổ sung cho tài liệu.

Dòng văn bản này sẽ hiển thị như được gạch chân

Dòng văn bản này được coi là bản in đẹp.

Dòng này được hiển thị dưới dạng văn bản in đậm.

Dòng này được hiển thị dưới dạng văn bản in nghiêng.

  

& lt; p & gt;

Bạn có thể sử dụng thẻ mark để

& lt; mark & ​​gt; đánh dấu

& lt; / mark & ​​gt;

text.

& lt; / p & gt;

& lt; p & gt; & lt; del & gt;

Dòng văn bản này được coi là văn bản đã xóa.

& lt; / del & gt; & lt; / p & gt ;

& lt; p & gt; & lt; s & gt;

Dòng văn bản này có nghĩa là không còn chính xác nữa.

& lt; / s & gt; & lt; / p & gt;

& lt; p & gt; & lt; ins & gt;

Dòng văn bản này được coi như một phần bổ sung cho tài liệu.

& lt; / ins & gt; & lt ; / p & gt;

& lt; p & gt; & lt; u & gt;

Dòng văn bản này sẽ hiển thị dưới dạng gạch chân

& lt; / u & gt; & lt; / p & gt;

& lt; p & gt; & lt; small & gt;

Dòng văn bản này được coi là bản in đẹp.

& lt; / small & gt; & lt; / p & gt ;

& lt; p & gt; & lt; strong & gt;

Dòng này được hiển thị dưới dạng văn bản in đậm.

& lt; / strong & gt; & lt; / p & gt;

& lt; p & gt; & lt; em & gt;

Dòng này được hiển thị dưới dạng văn bản in nghiêng.

& lt; / em & gt; & lt; / p & gt;

< / code>

. mark . small cũng có sẵn để áp dụng cùng kiểu với & lt; mark & ​​gt; & lt; small & gt; đồng thời tránh mọi hàm ý ngữ nghĩa không mong muốn mà các thẻ sẽ mang theo.

Mặc dù không được hiển thị ở trên, vui lòng sử dụng & lt; b & gt; & lt; i & gt; trong HTML5. & lt; b & gt; được dùng để đánh dấu các từ hoặc cụm từ mà không truyền tải thêm tầm quan trọng trong khi & lt; i & gt; là chủ yếu về giọng nói, thuật ngữ kỹ thuật, v.v.

Tiện ích văn bản

Thay đổi căn chỉnh, chuyển đổi, kiểu, độ đậm và màu văn bản bằng tiện ích văn bản tiện ích màu của chúng tôi.

Viết tắt

Triển khai cách điệu & lt; abbr & gt;Phần tử cho các từ viết tắt và từ viết tắt để hiển thị phiên bản mở rộng khi di chuột. Các từ viết tắt có gạch chân mặc định và có con trỏ trợ giúp để cung cấp ngữ cảnh bổ sung khi di chuột và cho người dùng công nghệ hỗ trợ.

Thêm . initialism vào một chữ viết tắt của font-size nhỏ hơn một chút.

đính kèm

HTML

  

& lt; p & gt; & lt; abbr

title =

"thuộc tính"

& gt;

attr

& lt; / abbr & gt; & lt; / p & gt;

& lt; p & gt; & lt; abbr

title =

"Ngôn ngữ đánh dấu siêu văn bản"

class =

"chủ nghĩa ban đầu"

& gt;

HTML

& lt; / abbr & gt; & lt; / p & gt;

Blockquotes

Để trích dẫn các khối nội dung từ một nguồn khác trong tài liệu của bạn. Bao bọc & lt; blockquote class = "blockquote" & gt; xung quanh bất kỳ HTML nào dưới dạng trích dẫn.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante.

  

& lt; blockquote

class =

"blockquote"

& gt;

& lt; p

class =

"mb-0"

& gt;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante.

& lt; / p & gt;

& lt; / blockquote & gt;

Đặt tên nguồn

Thêm & lt; footer class = "blockquote-footer" & gt; để xác định nguồn. Đặt tên của tác phẩm nguồn trong & lt; cite & gt; .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante.

  

& lt; blockquote

class =

"blockquote"

& gt;

& lt; p

class =

"mb-0"

& gt;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante.

& lt; / p & gt;

& lt; footer

class =

"blockquote-footer"

& gt;

Một người nào đó nổi tiếng trong

& lt; cite

title =

"Tiêu đề nguồn"

& gt;

Tiêu đề nguồn

& lt; / cite & gt; & lt; / footer & gt;

& lt; / blockquote & gt;

Căn chỉnh

Sử dụng các tiện ích văn bản nếu cần để thay đổi căn chỉnh của blockquote của bạn.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante.

  

& lt; blockquote

class =

"blockquote text-center"

& gt;

& lt; p

class =

"mb-0"

& gt;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante.

& lt; / p & gt;

& lt; footer

class =

"blockquote-footer"

& gt;

Một người nào đó nổi tiếng trong

& lt; cite

title =

"Tiêu đề nguồn"

& gt;

Tiêu đề nguồn

& lt; / cite & gt; & lt; / footer & gt;

& lt; / blockquote & gt;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante.

  

& lt; blockquote

class =

"blockquote text-right"

& gt;

& lt; p

class =

"mb-0"

& gt;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante.

& lt; / p & gt;

& lt; footer

class =

"blockquote-footer"

& gt;

Một người nào đó nổi tiếng trong

& lt; cite

title =

"Tiêu đề nguồn"

& gt;

Tiêu đề nguồn

& lt; / cite & gt; & lt; / footer & gt;

& lt; / blockquote & gt;

Danh sách

Chưa được phân loại

Xóa list-style mặc định và lề trái trên các mục danh sách (chỉ dành cho phần con ngay lập tức). Điều này chỉ áp dụng cho các mục danh sách con ngay lập tức , nghĩa là bạn cũng cần thêm lớp cho bất kỳ danh sách lồng nhau nào.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Dễ dàng trả giá tại các sân bay
  • Không ai muốn có bất kỳ vấn đề nào
    • Vật lý của các mũi tên
    • Các thành viên thuần túy của lớp học
    • Đầu tư vào hãng hàng không
    • Và cuối tuần rảnh rỗi thoải mái tại
  • Dán cổng khách hàng của chúng tôi
  • Hãy nhớ rằng bây giờ rất vui
  • Phương tiện sáng tạo
  

& lt; ul

class =

"list-unstyled"

& gt;

& lt; li & gt;

& lt; li & gt;

& lt; li & gt;

& lt; li & gt;

Giá xe câu cá dễ dàng

& lt; li & gt;

& lt; ul & gt;

& lt; li & gt;

Mũi tên Phasellus cũng như

& lt; / li & gt;

& lt; li & gt;

Các thành viên thuần túy của lớp học

& lt; / li & gt;

& lt; li & gt;

& lt; li & gt;

Cuối tuần rảnh rỗi bằng xe tăng tại

& lt; / li & gt;

& lt; / ul & gt;

& lt; / li & gt;

& lt; li & gt;

& lt; li & gt;

Lúc này Aeneas rất quan trọng

& lt; / li & gt;

& lt; li & gt;

& lt; / ul & gt;

Nội tuyến

Xóa dấu đầu dòng của danh sách và áp dụng một số margin nhẹ với sự kết hợp của hai lớp, . list-inline . list-inline-item .

  • Yêu bản thân mình
  • Phaselus đã được nhắm mục tiêu
  • Không còn chỗ nữa
  

& lt; ul

class =

"list-inline"

& gt;

& lt; li

class =

"list-inline-item"

& gt;

& lt; li

class =

"list-inline-item"

& gt;

Phasellus phi tiêu

& lt; / li & gt;

& lt; li

class =

"list-inline-item"

& gt;

Không thành vấn đề

& lt; / li & gt;

& lt; / ul & gt;

Căn chỉnh danh sách mô tả

Căn chỉnh các thuật ngữ và mô tả theo chiều ngang bằng cách sử dụng các lớp được xác định trước của hệ thống lưới của chúng tôi (hoặc các mixin ngữ nghĩa). Đối với các thuật ngữ dài hơn, bạn có thể tùy chọn thêm lớp . Text-truncate để cắt ngắn văn bản bằng hình elip.

Danh sách mô tả
Danh sách mô tả hoàn hảo để xác định các thuật ngữ.
Hiệu suất

Lối vào phần cứng đó là cổng của con mèo, và cái lưới luôn cần phải bị cả đội ghét bỏ.

Thật không may, tôi không cần phải đợi đến khi cửa mình mang thai và tôi mới cần sợ hãi.

Malesuada porta
Ngay cả cánh cổng vẫn là một mạng lưới ký ức êm đềm tuyệt vời.
Cụm từ bị cắt ngắn được cắt bớt
Fusce dapibus, Tellus ac cursus goodso, rùa bò mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Làm tổ
Danh sách định nghĩa lồng nhau
Aeneas đã nằm xuống, kẻ tra tấn, nhưng tất nhiên
  

& lt; dl

class =

"row"

& gt;

& lt; dt

class =

"col-sm-3"

& gt;

Danh sách mô tả

& lt; / dt & gt;

& lt; dd

class =

"col-sm-9"

& gt;

Một danh sách mô tả hoàn hảo để xác định các thuật ngữ.

& lt; / dd & gt;

& lt; dt

class =

"col-sm-3"

& gt;

Hiệu suất

& lt; / dt & gt;

& lt; dd

class =

"col-sm-9"

& gt;

& lt; p & gt;

Hisibulum id ligula porta felis euismod semper eget lacinia odio sem perf elit.

& lt; / p & gt;

& lt; / dd & gt;

& lt; dt

class =

"col-sm-3"

& gt;

Massuada porta

& lt; / dt & gt;

& lt; dd

class =

"col-sm-9"

& gt;

Than ôi

& lt; dt

class =

"col-sm-3 text-truncate"

& gt;

Cụm từ bị cắt ngắn được cắt bớt

& lt; / dt & gt;

& lt; dd

class =

"col-sm-9"

& gt;

Fusce dapibus, Tellus ac cursus goodso, rùa bò mauris condimentum nibh, ut fermentum massa justo sit amet risus.

& lt; / dd & gt;

& lt; dt

class =

"col-sm-3"

& gt;

Làm tổ

& lt; / dt & gt;

& lt; dd

class =

"col-sm-9"

& gt;

& lt; dl

class =

"row"

& gt;

& lt; dt

class =

"col-sm-4"

& gt;

Danh sách định nghĩa lồng nhau

& lt; / dt & gt;

& lt; dd

class =

"col-sm-8"

& gt;

& lt; / dl & gt;

& lt; / dd & gt;

& lt; / dl & gt;

Kiểu chữ đáp ứng

Kiểu chữ đáp ứng đề cập đến việc chia tỷ lệ văn bản và các thành phần bằng cách chỉ cần điều chỉnh font-size của phần tử gốc trong một loạt các truy vấn phương tiện. Bootstrap không làm điều này cho bạn, nhưng nó khá dễ dàng để thêm nếu bạn cần.

Đây là một ví dụ về nó trong thực tế. Chọn bất kỳ font-size và truy vấn phương tiện nào bạn muốn.

  

html

{

font-size

:

1rem

;

}

@ include

media-breakpoint-up

(

)

{

html

{

font-size

:

1

. 2rem

;

}

}

@ include

media-breakpoint-up

(

)

{

html

{

font-size

:

1

. 4rem

;

}

}

@ include

media-breakpoint-up

(

lg

)

{

html

{

font-size

:

1

. 6rem

;

}

}


Xem thêm những thông tin liên quan đến chủ đề lớp bootstrap cho tiêu đề

Bootstrap tutorial 8 - Typography Classes

  • Tác giả: Quentin Watt Tutorials
  • Ngày đăng: 2015-03-28
  • Đánh giá: 4 ⭐ ( 4770 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this tutorial I show you how to use some boostrap typography elements and classes like blockquotes, small tags and headings.

    Useful links:
    -----------------------------------
    Don't forget to subscribe:
    www.youtube.com/QuentinWatt

    Follow me on Twitter:
    www.twitter.com/QuentinWatt

    Follow me on Facebook:
    www.facebook.com/quentin.watt

    Feel free to donate:
    https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=CH68DBULMJ37N
    ------------------------------------

Tổng hợp cách học bootstrap cơ bản với các định nghĩa

  • Tác giả: getbootstrap.com.vn
  • Đánh giá: 4 ⭐ ( 6879 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bootstrap chính là 1 framework của css và javascript, cùng tham khảo các định nghĩa của các lớp được sử dụng nhiều trong bootstrap tại Blog Getbootstrap

Bootstrap Typography

  • Tác giả: comdy.vn
  • Đánh giá: 5 ⭐ ( 8177 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 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.

Sử dụng Bootstrap để tạo ứng dụng web thiết kế vật liệu – web tài chính chuyên nghiệp – 0971522486

  • Tác giả: webzado.com
  • Đánh giá: 3 ⭐ ( 1274 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Học Bootstrap 5 từ A tới Z – Hành trang Lập trình blog

  • Tác giả: hanhtranglaptrinh.net
  • Đánh giá: 5 ⭐ ( 7591 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Văn bản trong Bootstrap 4

  • Tác giả: codegym.vn
  • Đánh giá: 3 ⭐ ( 4853 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết này sẽ giới thiệu về Văn bản trong Bootstrap 4, một số lớp hay dùng và cách sử dụng trong framework này. Bootstrap 4 dùng font chữ có kích thước

Bootstrap 4 Văn bản / Kiểu chữ

  • Tác giả: pluginthanhtoan.com
  • Đánh giá: 3 ⭐ ( 6300 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: botvietbai.com cung cấp các hướng dẫn, tài liệu tham khảo và bài tập trực tuyến miễn phí bằng tất cả các ngôn ngữ chính của web. Bao gồm các chủ đề phổ biến như HTML, CSS, JavaScript, Python, SQL, Java, và nhiều hơn nữa.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  PHP thêm vào mảng: Cách thêm phần tử và giá trị bằng cách sử dụng hàm - php thêm vào mảng

By ads_php