ابزارهای متن

  1. صفحه اصلی
  2. محتوا
  3. ابزارهای متن

تراز متن

به راحتی متن را با کامپوننت ها با کلاس های تراز متن تراز مجدد کنید.

مثال کلاس ها قطعه

Lorem Ipsum به سادگی متن ساختگی صنعت چاپ و حروفچینی است.

.text-justify
Markup
<p class="text-justify">Justified text.</p>

این یک واقعیت ثابت طولانی مدت است که یک خواننده.

 .text-nowrap
Markup
<p class="text-nowrap">No wrap text.</p>

برای تراز چپ، راست و وسط، کلاس‌های پاسخگو در دسترس هستند که از نقاط شکست پهنای دید مشابه سیستم شبکه استفاده می‌کنند.

مثال کلاس ها قطعه

متن تراز چپ در همه اندازه‌های درگاه دید.

 .text-left
Markup
<p class="text-left">Left aligned text on all viewport sizes.</p>

متن تراز شده در مرکز در همه اندازه‌های درگاه دید.

 .text-center
Markup
<p class="text-center">Center aligned text on all viewport sizes.</p>

متن تراز شده سمت راست در همه اندازه‌های درگاه دید.

 .text-right
Markup
<p class="text-right">Right aligned text on all viewport sizes.</p>

متن تراز چپ در نماهایی با اندازه SM یا بزرگتر.

متن تراز چپ در نماهایی با اندازه MD یا بزرگتر.

متن تراز چپ در نماهایی با اندازه LG یا بزرگتر.

متن تراز چپ در نماهایی با اندازه XL یا بزرگتر.

 .text-sm-left .text-md-left .text-lg-left .text-xl-left
Markup
<p class="text-sm-left">Left aligned text on viewports sized SM or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL or wider.</p>

متن تراز شده در مرکز روی درگاه‌های دید با اندازه SM یا بزرگتر.

متن تراز شده در مرکز روی درگاه‌های دید با اندازه MD یا بزرگتر.

متن تراز شده وسط در نماهایی با اندازه LG یا بزرگتر.

متن تراز شده در مرکز روی درگاه های دید با اندازه XL یا بزرگتر.

 .text-sm-center .text-md-center .text-lg-center .text-xl-center
Markup
<p class="text-sm-center">Center aligned text on viewports sized SM or wider.</p>
<p class="text-md-center">Center aligned text on viewports sized MD or wider.</p>
<p class="text-lg-center">Center aligned text on viewports sized LG or wider.</p>
<p class="text-xl-center">Center aligned text on viewports sized XL or wider.</p>

متن تراز شده سمت راست در نماهایی با اندازه SM یا بزرگتر.

متن تراز شده سمت راست در نماهایی با اندازه MD یا بزرگتر.

متن تراز شده سمت راست در نماهایی با اندازه LG یا بزرگتر.

متن تراز شده سمت راست در نماهایی با اندازه XL یا بزرگتر.

 .text-sm-right .text-md-right .text-lg-right .text-xl-right
Markup
<p class="text-sm-right">Right aligned text on viewports sized SM or wider.</p>
<p class="text-md-right">Right aligned text on viewports sized MD or wider.</p>
<p class="text-lg-right">Right aligned text on viewports sized LG or wider.</p>
<p class="text-xl-right">Right aligned text on viewports sized XL or wider.</p>

سرریز متن

برای محتوای طولانی تر، می توانید یک را اضافه کنید.text-truncate class to truncate the text with an ellipsis.

برای کلاس ها قطعه

سطح بلوک

 .text-truncate
Markup
<div class="col-2 text-truncate">Praeterea iter est quasdam</div>

سطح درون خطی

 .d-inline-block text-truncate
Markup
<span class="d-inline-block text-truncate" style="max-width: 150px;">Praeterea iter est quasdam</span>

تبدیل متن

تبدیل متن در اجزاء با کلاس های حروف بزرگ متن.

توجه داشته باشید که چگونهtext-capitalize only changes the first letter of each word, leaving the case of any other letters unaffected.

مثال کلاس ها قطعه

متن با حروف کوچک.

 .text-lowercase
Markup
<p class="text-lowercase">Lowercased text.</p>

متن بزرگ.

 .text-uppercase
Markup
<p class="text-uppercase">Uppercased text.</p>

متن با حروف بزرگ

 .text-capitalize
Markup
<p class="text-capitalize">CapiTaliZed text.</p>

گزینه متن

اندازه فونت

Chameleon Admin کلاس های مختلف فونت را در اندازه های بزرگ و کوچک برای تغییر اندازه فونت ارائه می دهد.

مثال کلاس ها قطعه

اندازه متن ال جی بزرگ.

 .font-large-3
Markup
<p class="font-large-3" >Large lg text size.</p>

اندازه متن ال جی بزرگ.

 .font-large-2
Markup
<p class="font-large-2" >Large lg text size.</p>

اندازه متن ال جی بزرگ.

 .font-large-1
Markup
<p class="font-large-1" >Large lg text size.</p>

اندازه متن md بزرگ.

 .font-medium-3
Markup
<p class="font-medium-3" >Large md text size.</p>

اندازه متن md بزرگ.

 .font-medium-2
Markup
<p class="font-medium-2" >Large md text size.</p>

اندازه متن اس ام اس بزرگ.

 .font-medium-1
Markup
<p class="font-medium-1" >Large sm text size.</p>

اندازه متن پایه معمولی

 N/A
Markup
<p>Normal base text size.</p>

اندازه متن lg کوچک.

 .font-small-3
Markup
<p class="font-small-3" >Small lg text size.</p>

اندازه متن md کوچک.

 .font-small-2
Markup
<p class="font-small-2" >Small md text size.</p>

اندازه متن کوچک sm.

 .font-small-1
Markup
<p class="font-small-1" >Small sm text size.</p>
وزن فونت

Chameleon Admin کلاس وزن فونت را ارائه می دهد.text-bold-{weight}, where {weight} value can be 100,200 ... 900.

مثال کلاس ها قطعه

وزن قلم 300

 .text-bold-300
Markup
<p class="text-bold-300">Font weight 300.</p>

وزن فونت 400

 .text-bold-400
Markup
<p class="text-bold-400">Font weight 400.</p>

وزن فونت 600

 .text-bold-600
Markup
<p class="text-bold-600">Font weight 600.</p>

وزن قلم 700

 .text-bold-700
Markup
<p class="text-bold-700">Font weight 700.</p>
عناصر متن درون خطی

یک ظاهر طراحی برای عناصر رایج HTML5 درون خطی.

.mark and .small classes are also available to apply the same styles as <mark> and <small> while avoiding any unwanted semantic implications that the tags would bring.

در حالی که در بالا نشان داده نشده است، با خیال راحت از آن استفاده کنید<b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

مثال قطعه

می توانید از تگ علامت گذاری استفاده کنیدhighlight text.
Markup
<p>You can use the mark tag to <mark>highlight</mark> text.</p>

This line of text is meant to be treated as deleted text.

Markup
<p><del>This line of text is meant to be treated as deleted text.</del></p>

This line of text is meant to be treated as no longer accurate.

Markup
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>

این خط از متنis meant to be treated as an addition to the document.

Markup
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>

This line of text will render as underlined
Markup
<p><u>This line of text will render as underlined.</u></p>

این خط از متن به عنوان چاپ ظریف در نظر گرفته شده است.
Markup
<p><small>This line of text is meant to be treated as fine print.</small></p>

این خط به صورت متن پررنگ ارائه می شود.
Markup
<p><strong>This line rendered as bold text.</strong></p>

This line rendered as italicized text.
Markup
<p><em>This line rendered as italicized text.</em></p>

نمونهabbreviation

Markup
<p> Sample <abbr>Abbreviations.</abbr></p>

نمونهHTML title.
Markup
<p> Sample <abbr title="HyperText Markup Language" class="initialism">HTML.</abbr></p>
y = m x + b
Markup
<p> For indicating variables use the <var> tag.</p>

تنظیمات را ویرایش کنید، فشار دهید ctrl + ,

Markup
<p> Use the <kbd>  to indicate input that is typically entered via keyboard.</p>
This text is meant to be treated as sample output from a computer program.
Markup
<p> For indicating sample output from a program use the  <samp>  tag. </p>
Inline code snippet
Markup
<p> Wrap inline snippets of code with <code> tag. </p>

رنگ های متنی

با چند کلاس کاربردی تاکیدی معنا را از طریق رنگ منتقل کنید.

مثال کلاس ها قطعه

Fusce dapibus، telus ac cursus commodo، tortor mauris nibh.

 .text-muted
Markup
<p class="text-muted">Your Text.</p>

Nullam id dolor id nibh ultrices vehicula ut id elit.

 .text-primary
Markup
<p class="text-primary">Your Text.</p>

Duis mollis، est non commodo luctus، nisi erat porttitor ligula.

 .text-success
Markup
<p class="text-success">Your Text.</p>

Maecenas sed diam eget risus varius blandit sit amet non magna.

 .text-info
Markup
<p class="text-info">Your Text.</p>

Fusce dapibus، telus ac cursus commodo، tortor mauris nibh.

 .text-warning
Markup
<p class="text-warning">Your Text.</p>

Donec ullamcorper nulla non metus auctor fringilla.

 .text-danger
Markup
<p class="text-danger">Your Text.</p>

Chameleon Admin نیز سفارشی را ارائه می دهدcolor palette for the text, below table show you usage.

همچنین می توانید از کلاس های روشن، تیره و تاکید متن استفاده کنید.

  • .red .lighten-* For lighten red text color, this two classes needed. Here *: 1,2,3,4 for lighten red color options.
  • .red .darken-* For darken red text color, this two classes needed. Here *: 1,2,3,4 for darken red color options.
  • .red .accent-* For accent red text color, this two classes needed. Here *: 1,2,3,4 for accent red color options.
مثال کلاس ها قطعه

Fusce dapibus، telus ac cursus commodo، tortor mauris nibh.

 .red
Markup
<p class="red">Your Text.</p>

Nullam id dolor id nibh ultrices vehicula ut id elit.

 .purple
Markup
<p class="purple">Your Text.</p>

Duis mollis، est non commodo luctus، nisi erat porttitor ligula.

 .cyan
Markup
<p class="cyan">Your Text.</p>

Maecenas sed diam eget risus varius blandit sit amet non magna.

 .blue
Markup
<p class="blue">Your Text.</p>

Fusce dapibus، telus ac cursus commodo، tortor mauris nibh.

 .teal
Markup
<p class="teal">Your Text.</p>

Donec ullamcorper nulla non metus auctor fringilla.

 .blue-grey
Markup
<p class="blue-grey">Your Text.</p>

پس زمینه متنی

کلاس های رنگ متن متنی، به راحتی پس زمینه یک عنصر را برای هر کلاس زمینه ای تنظیم می کند.

مثال کلاس ها قطعه
Nullam id dolor id nibh ultrices vehicula ut id elit. .bg-primary
Markup
<p class="bg-primary">Your Text.</p>
Duis mollis، est non commodo luctus، nisi erat porttitor ligula. .bg-success
Markup
<p class="bg-success">Your Text.</p>
Maecenas sed diam eget risus varius blandit sit amet non magna. .bg-info
Markup
<p class="bg-info">Your Text.</p>
Fusce dapibus، telus ac cursus commodo، tortor mauris nibh. .bg-warning
Markup
<p class="bg-warning">Your Text.</p>
Donec ullamcorper nulla non metus auctor fringilla. .bg-danger
Markup
<p class="bg-danger">Your Text.</p>
Fusce dapibus، telus ac cursus commodo، tortor mauris nibh. .bg-dark
Markup
<p class="bg-dark">Your Text.</p>

Chameleon Admin نیز سفارشی را ارائه می دهدcolor palette for the background colors, below table show you usage.

همچنین می توانید از کلاس های روشن، تیره و تاکید پس زمینه استفاده کنید.

  • .bg-red .bg-lighten-* For lighten red text color, this two classes needed. Here *: 1,2,3,4 for lighten red color options.
  • .bg-red .bg-darken-* For darken red text color, this two classes needed. Here *: 1,2,3,4 for darken red color options.
  • .bg-red .bg-accent-* For accent red text color, this two classes needed. Here *: 1,2,3,4 for accent red color options.
مثال کلاس ها قطعه
Fusce dapibus، telus ac cursus commodo. .bg-red
Markup
<p class="bg-red bg-dark">Your Text.</p>
Nullam id dolor id nibh اولتریسیس. .purple
Markup
<p class="bg-purple bg-dark">Your Text.</p>
Duis mollis، est non commodo luctus، nisi erat. .bg-cyan
Markup
<p class="bg-cyan bg-dark">Your Text.</p>
Maecenas sed diam eget risus varius blandit sit. .bg-blue
Markup
<p class="bg-blue bg-dark">Your Text.</p>
Fusce dapibus، telus ac cursus commodo. .bg-teal
Markup
<p class="bg-teal bg-dark">Your Text.</p>
Donec ullamcorper nulla non metus. .blue-grey
Markup
<p class="blue-grey bg-dark">Your Text.</p>
گزینه های رنگ نوار نوار
گزینه های طرح بندی
پس زمینه منوی نوار کناری
تصویر پس زمینه نوار کناری
background image
background image
background image
background image
تم های بیشتر
Layout Builder را امتحان کنید