تنظیمات پیش فرض Bootstrap 4
Bootstrap 4 از اندازه قلم پیش فرض ۱۶px استفاده می کند ، و طول خط آن ۱٫۵ است.خانواده پیش فرض “Helvetica Neue” ، Helvetica ، Arial ، sans-serif است.علاوه بر این ، همه عناصردارای حاشیه بالا: ۰ و حاشیه پایین: ۱rem (16px توسط defaul
عنوان های (<h1>
to <h6>
) راه انداز Bootstrap 4 با وزن قلم جسورانه تر و افزایش اندازه فونت:
<div class="container">
<h1>h1 Bootstrap heading (2.5rem = 40px)</h1>
<h2>h2 Bootstrap heading (2rem = 32px)</h2>
<h3>h3 Bootstrap heading (1.75rem = 28px)</h3>
<h4>h4 Bootstrap heading (1.5rem = 24px)</h4>
<h5>h5 Bootstrap heading (1.25rem = 20px)</h5>
<h6>h6 Bootstrap heading (1rem = 16px)</h6>
</div>
سرفصل های display
عناوین نمایشگر برای ایستادگی بیشتر از عناوین معمولی (اندازه فونت بزرگتر و وزن سبک تر) استفاده می شوند و چهار کلاس برای انتخاب وجود دارد: .display-1 ، .display-2 ، .display-3 ، .display- 4
<small>
در Bootstrap 4 از عنصر <small> برای ایجاد متن سبک تر و ثانویه در هر عنوان استفاده می شود:
<div class="container">
<h1>Display Headings</h1>
<p>Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight):</p>
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<mark>
Bootstrap 4 عنصر <mark>را با رنگ پس زمینه زرد و مقداریcontainer می کند:
<div class="container">
<h1>Highlight Text</h1>
<p>Use the mark element to <mark>highlight</mark> text.</p>
</div>
<abbr>
Bootstrap 4 عنصر <abbr> برای اشاره به کسی دارد به طور مثال .
<div class="container">
<h1>Abbreviations</h1>
<p>The abbr element is used to mark up an abbreviation or acronym:</p>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>
<blockquote>
هنگام نقل قول بلوک های محتوا از منبع دیگر ، کلاس .blockquote را به
اضافه کنید.
<div class="container">
<h1>Blockquotes</h1>
<p>The blockquote element is used to present content from another source:</p>
<blockquote class="blockquote">
<p>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.</p>
<footer class="blockquote-footer">From WWF's website</footer>
</blockquote>
</div>
<dl>
Bootstrap 4 عنصر <dl>را به روش زیر سبک می دهد:
<div class="container">
<h1>Description Lists</h1>
<p>The dl element indicates a description list:</p>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</div>
<code>
Bootstrap 4 عنصر <code>را به این صورت سبک میدهد .
<div class="container">
<h1>Code Snippets</h1>
<p>Inline snippets of code should be embedded in the code element:</p>
<p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>
</div>
<kbd>
<div class="container">
<h1>Keyboard Inputs</h1>
<p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>
<pre>
<div class="container">
<h1>Multiple Code Lines</h1>
<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
</pre>
</div>
کلس ها | توضیحات |
---|---|
.font-weight-bold | تکست bold |
.font-weight-bolder | متن بولد تر |
.font-italic | متن ایتالیک |
.font-weight-light | متن وزن سبک |
.font-weight-lighter | متن وزن سبک تر |
.font-weight-normal | متن عادی |
.lead | یک پاراگراف را برجسته می کند |
.small | متن کوچکتر را نشان می دهد (روی ۸۰٪ اندازه والدین تنظیم شده است) |
.text-left | متن چپ را نشان می دهد |
.text-*-left | متن سمت چپ را روی صفحه نمایش های کوچک ، متوسط ، بزرگ یا xlarge نشان می دهد |
.text-break | از شکستن طرح دراز جلوگیری می کند |
.text-center | متن وسط را نشان میدهد |
.text-*-center | متن تراز وسط را روی صفحه های کوچک ، متوسط ، بزرگ یا xlarge نشان می دهد |
.text-decoration-none | زیر خط را از پیوند حذف می کند |
.text-right | متن سمت راست را نشان می دهد |
.text-*-right | متن سمت راست را روی صفحه نمایش های کوچک ، متوسط ، بزرگ یا xlarge نشان می دهد |
.text-justify | متن موجه را نشان می دهد |
.text-monospace | متن monospaced |
.text-nowrap | هیچ متن بسته بندی را نشان نمی دهد |
.text-lowercase | متن کوچک را نشان می دهد |
.text-reset | رنگ یک متن یا پیوند را تنظیم می کند (از پدر و مادر خود به ارث می برد) |
.text-uppercase | متن بزرگ را نشان می دهد |
.text-capitalize | متن سرمایه دار را نشان می دهد |
.initialism | متن را درون یک عنصر در اندازه قلم <abbr>کمی کوچکتر نشان می دهد |
.list-unstyled | حاشیه سمت چپ و لیست پیش فرض لیست موارد را حذف می کند (روی هر دو<ul> و <ol> کار می کند). این کلاس فقط برای موارد لیست فوری کودکان اعمال می شود (برای حذف سبک پیش فرض لیست از لیست های تو در تو ، این کلاس را در هر لیست لانه دار نیز اعمال کنید) |
.list-inline | همه موارد لیست را در یک خط واحد قرار می دهد (همراه با آیتم .list-inline در هر عنصر ) |
.pre-scrollable | عنصر <pre>قابل پیمایش را ایجاد می کند |