ابزارهای متن

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

تراز متن

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

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

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

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

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

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

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

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

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

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

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

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

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

 .text-right 
                              
                                <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 
                              
                                <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 
                              
                                <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 
                              
                                <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 
                              
                                <div class="col-2 text-truncate">Praeterea iter est quasdam</div>

سطح درون خطی

 .d-inline-block text-truncate 
                              
                                <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 
                              
                                <p class="text-lowercase">Lowercased text.</p>

متن بزرگ.

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

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

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

گزینه متن

اندازه فونت

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 .font-small-1 
                              
                                <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 
                              
                                <p class="text-bold-300">Font weight 300.</p>

وزن فونت 400

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

وزن فونت 600

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

وزن قلم 700

 .text-bold-700 
                              
                                <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.

 
                              
                                <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. 

                              
                                <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. 

                              
                                <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. 

                              
                                <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

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

این خط از متن به عنوان چاپ ظریف در نظر گرفته شده است.

 
                              
                                <p><small>This line of text is meant to be treated as fine print.</small></p>

این خط به صورت متن پررنگ ارائه می شود.

 
                              
                                <p><strong>This line rendered as bold text.</strong></p>

This line rendered as italicized text.

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

نمونهabbreviation 

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

نمونهHTML title.

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

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

                              
                                <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. 
                              
                                <p> For indicating sample output from a program use the  <samp>  tag. </p>
Inline code snippet 
                              
                                <p> Wrap inline snippets of code with <code> tag. </p>

رنگ های متنی

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

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

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

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

Nullam id dolor id nibh ultrices vehicula ut id elit.

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

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

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

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

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

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

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

Donec ullamcorper nulla non metus auctor fringilla.

 .text-danger 
                              
                                <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 
                              
                                <p class="red">Your Text.</p>

Nullam id dolor id nibh ultrices vehicula ut id elit.

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

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

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

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

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

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

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

Donec ullamcorper nulla non metus auctor fringilla.

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

پس زمینه متنی

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

مثال کلاس ها قطعه
Nullam id dolor id nibh ultrices vehicula ut id elit. .bg-primary 
                              
                                <p class="bg-primary">Your Text.</p>
Duis mollis، est non commodo luctus، nisi erat porttitor ligula. .bg-success 
                              
                                <p class="bg-success">Your Text.</p>
Maecenas sed diam eget risus varius blandit sit amet non magna. .bg-info 
                              
                                <p class="bg-info">Your Text.</p>
Fusce dapibus، telus ac cursus commodo، tortor mauris nibh. .bg-warning 
                              
                                <p class="bg-warning">Your Text.</p>
Donec ullamcorper nulla non metus auctor fringilla. .bg-danger 
                              
                                <p class="bg-danger">Your Text.</p>
Fusce dapibus، telus ac cursus commodo، tortor mauris nibh. .bg-dark 
                              
                                <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 
                              
                                <p class="bg-red bg-dark">Your Text.</p>
Nullam id dolor id nibh اولتریسیس. .purple 
                              
                                <p class="bg-purple bg-dark">Your Text.</p>
Duis mollis، est non commodo luctus، nisi erat. .bg-cyan 
                              
                                <p class="bg-cyan bg-dark">Your Text.</p>
Maecenas sed diam eget risus varius blandit sit. .bg-blue 
                              
                                <p class="bg-blue bg-dark">Your Text.</p>
Fusce dapibus، telus ac cursus commodo. .bg-teal 
                              
                                <p class="bg-teal bg-dark">Your Text.</p>
Donec ullamcorper nulla non metus. .blue-grey 
                              
                                <p class="blue-grey bg-dark">Your Text.</p>
گزینه های رنگ نوار نوار
گزینه های طرح بندی
پس زمینه منوی نوار کناری
تصویر پس زمینه نوار کناری
background image
background image
background image
background image
تم های بیشتر
Layout Builder را امتحان کنید