طراحی سایت | طراحی اسلایدر | خدمات سئو | سئو وبسایت | خدمات طراحی وبسایت | پشتیبانی وبسایت |
0 محصولات نمایش سبد خرید

هیچ محصولی در سبد خرید نیست.

Bootstrap 4 Text/Typography

تنظیمات پیش فرض 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>قابل پیمایش را ایجاد می کند
دیدگاه‌های نوشته

Share via
ارسال این به یک دوست