Bootstrap Metin/Tipografi
Bootstrap'in Varsayılan Ayarları
Bootstrap'in genel varsayılan yazı tipi boyutu 14 pikseldir ve satır yüksekliği 1.428'dir.
Bu, <body>öğeye ve tüm paragraflara ( <p>) uygulanır.
Ek olarak, tüm <p>öğelerin hesaplanan satır yüksekliğinin yarısına (varsayılan olarak 10 piksel) eşit bir alt kenar boşluğu vardır.
Bootstrap ve Tarayıcı Varsayılanları
Bu bölümde, Bootstrap tarafından tarayıcı varsayılanlarından biraz daha farklı biçimlendirilecek bazı HTML öğelerine bakacağız.
<h1> - <h6>
Öntanımlı olarak Bootstrap, HTML başlıklarını ( <h1>to
<h6>) aşağıdaki şekilde biçimlendirir:
Örnek
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
<küçük>
Bootstrap'ta HTML <small>öğesi, herhangi bir başlıkta daha hafif, ikincil bir metin oluşturmak için kullanılır:
Örnek
h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
<işaret>
Bootstrap, HTML <mark>öğesini şu şekilde biçimlendirir:
Örnek
Use the mark element to highlight text.
<kısaltma>
Bootstrap, HTML <abbr>öğesini şu şekilde biçimlendirir:
Örnek
The WHO was founded in 1948.
<blockquote>
Bootstrap, HTML <blockquote>öğesini şu şekilde biçimlendirir:
Örnek
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
Sağdaki alıntıyı göstermek için .blockquote-reversesınıfı kullanın:
Örnek
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
<dl>
Bootstrap, HTML <dl>öğesini şu şekilde biçimlendirir:
Örnek
- Coffee
- - black hot drink
- Milk
- - white cold drink
<kod>
Bootstrap, HTML <code>öğesini şu şekilde biçimlendirir:
Örnek
The following HTML elements: span, section, and div defines a section in a document.
<kbd>
Bootstrap, HTML <kbd>öğesini şu şekilde biçimlendirir:
Örnek
Use ctrl + p to open the Print dialog box.
<pre>
Bootstrap, HTML <pre>öğesini şu şekilde biçimlendirir:
Örnek
Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.
Bağlamsal Renkler ve Arka Planlar
Bootstrap ayrıca "renkler aracılığıyla anlam" sağlamak için kullanılabilecek bazı bağlamsal sınıflara sahiptir.
Metin renkleri için sınıflar şunlardır: .text-muted,
.text-primary, .text-success, .text-info,
.text-warning, ve .text-danger:
Örnek
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Arka plan renkleri için sınıflar şunlardır: .bg-primary,
.bg-success, .bg-info, .bg-warning, ve .bg-danger:
Örnek
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Daha Fazla Tipografi Sınıfı
Aşağıdaki Bootstrap sınıfları, HTML öğelerine daha fazla stil eklemek için eklenebilir:
| Class | Description | Example |
|---|---|---|
.lead |
Makes a paragraph stand out | |
.small |
Indicates smaller text (set to 85% of the size of the parent) | |
.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 | |
.text-uppercase |
Indicates uppercased text | |
.text-capitalize |
Indicates capitalized text | |
.initialism |
Displays the text inside an <abbr> element in a slightly smaller font size |
|
.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-horizontal |
Lines up the terms (<dt>) and descriptions (<dd>) in
<dl> elements side-by-side. Starts off like default <dl>s, but when the browser window expands, it will line up side-by-side |
|
.pre-scrollable |
Makes a <pre> element scrollable |
Eksiksiz Bootstrap Tipografi Referansı
Tüm tipografi öğelerinin/sınıflarının eksiksiz bir referansı için eksiksiz Bootstrap Tipografi Referansımıza gidin .
Ayrıca bağlamsal sınıflar hakkında daha fazla bilgi için Bootstrap Helper Classes Reference'ımıza bakın.