Tham khảo kiểu chữ CSS Bootstrap
Cài đặt mặc định của Bootstrap
Kích thước phông chữ mặc định chung của Bootstrap là 14px, với chiều cao dòng là 1.428.
Điều này được áp dụng cho <body> và tất cả các đoạn văn.
Ngoài ra, tất cả các phần tử <p> đều có lề dưới bằng một nửa chiều cao dòng được tính toán của chúng (10px theo mặc định).
Kiểu chữ
Các phần tử dưới đây là các phần tử HTML sẽ được Bootstrap tạo kiểu khác một chút so với mặc định của trình duyệt. Hãy xem các ví dụ "Hãy thử" để xem kết quả / sự khác biệt.
Các lớp bên dưới được sử dụng để tạo kiểu thêm cho các phần tử.
| Element/Class | Description | Example |
|---|---|---|
| <h1> - <h6> or .h1 - .h6 |
h1 - h6 headings | |
| <small> | Creates a lighter, secondary text in any heading
Heading (secondary text) |
|
| .small | Indicates smaller text (set to 85% of the size of the parent): Smaller text | |
| .lead | Makes a text stand out: Stand out text | |
| <mark> or .mark |
Highlights text: Highlighted text | |
| <del> | Indicates deleted text: |
|
| <s> | Indicates no longer relevant text: |
|
| <ins> | Indicates inserted text: Inserted text | |
| <u> | Indicates underlined text: Underlined text | |
| <strong> | Indicates bold text: Bold text | |
| <em> | Indicates italic text: Italic text | |
| .text-left | Indicates left-aligned text | |
| .text-center | Indicates center-aligned text | |
| .text-right | Indicates right-aligned text | |
| .text-justify | Indicates justified text | |
| .text-nowrap | Indicates no wrap text | |
| .text-lowercase | Indicates lowercased text: LOWERCASED TEXT | |
| .text-uppercase | Indicates uppercased text: uppercased text | |
| .text-capitalize | Indicates capitalized text: capitalized text | |
| <abbr> | The <abbr> element indicates an abbreviation or acronym. Abbreviations with a title attribute have a dotted bottom border and a help cursor on hover, providing additional context on hover. | |
| .initialism | Displays the text inside the <abbr> element in a slightly smaller font size | |
| <address> | Presents contact information | |
| <blockquote> | Indicates blocks of content from another source | |
| .blockquote-reverse | Indicates a blockquote with right-aligned content | |
| <ul> | Indicates an unordered list | |
| <ol> | Indicates an ordered list | |
| .list-unstyled | Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well) | |
| .list-inline | Places all list items on a single line | |
| <dl> | Indicates a description list | |
| .dl-horizontal | Lines up the terms and descriptions in the <dl> element side-by-side. Starts off like default <dl>s, but when the browser window expands, it will line up side-by-side |
Mã số
| Element/Class | Description | Example |
|---|---|---|
| <var> | Indicates variables: x = ab + y | |
| <kbd> | Indicates input that is typically entered via the keyboard: CTRL + P | |
| <pre> | Indicates multiple lines of code | |
| <pre class="pre-scrollable"> | Indicates multiple lines of code with scrollbar | |
| <samp> | Indicates sample output from a computer program: Sample output | |
| <code> | Indicates inline snippets of code: span, div |