رنگ های محتوا

یک مفهوم را توسط رنگ با استفاده از کلاس های کاربردی به کاربر ارائه کنید. این کلاس ها همچنین قابل اعمال به لینک ها هستند و هنگام hover بر روی لینک تیره تر خواهند شد.

نمونه کلاس‌ها snippet

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با

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

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ

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

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده

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

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده

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

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با

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

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت

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

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

  • .{colorName} .lighten-* برای روشن تر کردن رنگ متن، این دو کلاس نیاز است. در اینجا *: 1،2،3،4 برای تعیین میزان اثر بخشی کلاس می باشد.
  • .{colorName} .darken-* برای تیره تر کردن رنگ متن، این دو کلاس نیاز است. در اینجا *: 1،2،3،4 برای تعیین میزان اثر بخشی کلاس می باشد.
  • .{colorName} .accent-* برای accent کردن رنگ متن، این دو کلاس نیاز است. در اینجا *: 1،2،3،4 برای تعیین میزان اثر بخشی کلاس می باشد.

تراز متن

به سادگی تراز متن را با استفاده از کلاس های تراز دهی متن تغییر دهید.

نمونه کلاس‌ها snippet

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم

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

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم

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

برای تراز های راست، چپ و وسط، کلاس های واکنش گرا نیز اماده هستند که از breakpoint های عرضی مشابه سیستم توری استفاده می کنند.

نمونه کلاس‌ها snippet

متن تراز راست در همه اندازه های viewport.

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

متن تراز وسط در همه اندازه های viewport.

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

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

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

متن تراز راست در viewport های با اندازه SM یا بالاتر.

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

متن تراز وسط در viewport های با اندازه SM یا بالاتر.

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

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

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

تبدیل متن (مخصوص عبارات انگلیسی)

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

دقت کنید که چگونه text-capitalize تنها حرف اول را در هر کلمه تغییر میدهد. در حالی که بقیه حروف را بدون تغییر رها می کند.

نمونه کلاس‌ها snippet

Lowercased text.

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

Uppercased text.

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

CapiTaliZed text.

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

گزینه های متن

اندازه فونت

قالب مدیریت Frest کلاس های انواع اندازه های بزرگ و کوچک را برای تغییر اندازه فونت ارائه می دهد.

نمونه کلاس‌ها snippet
اندازه بزرگ lg متن. .font-large-3
                              
                                <p class="font-large-3" >Large lg text size.</p>
                            
اندازه بزرگ lg متن. .font-large-2
                              
                                <p class="font-large-2" >Large lg text size.</p>
                            
اندازه بزرگ lg متن. .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>
                            
اندازه بزرگ sm متن. .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>
                            
وزن فونت

قالب مدیریتی Frest کلاس وزن فونت .text-bold-{weight}را ارائه می دهد که مقدار {weight} می تواند یکی از مقادیر 300, 400, 500, 700 باشد.

نمونه کلاس‌ها snippet

وزن فونت 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>
                            

وزن فونت 500

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

وزن فونت 700

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

استایل دهی به المان های HTML5 درون خطی متداول.

کلاس های .mark و .small همچنین برای اعمال استایل مشابه المان های <mark> و <small> آماده هستند تا نیازی به تغییر در پیاده سازی semantic برای به دست آوردن استایل های مشابه این المان ها نباشد.

هرچند در بالا نشان داده نشده اند، اما میتوانید از <b> و <i> در HTML5 نیز استفاده کنید. <b> برای برجسته کردن کلمات و عبارات بدون اعمال هرگونه اهمیت اضافی است در حالی که <i> معمولا برای نقل قول، عبارات تخصصی و ... به کار می رود.

نمونه snippet

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

                              
                                <p>You can use the mark tag to <mark>highlight</mark> text.</p>
                            

این خط متن به صورت یک متن حذف شده در نظر گرفته می شود.

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

این خط متن به صورت یک متن نامعتبر در نظر گرفته می شود.

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

این خط متن به صورت یک متن اضافه شده به سند در نظر گرفته می شود.

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

این خط متن به صورت زیر خط دار نمایش داده می شود.

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

این خط متن به صورت یک متن Fine print در نظر گرفته می شود.

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

این خط متن به صورت کج نمایش داده می شود.

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

نمونه abbreviation

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

نمونه عنوان HTML.

                              
                                <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 + K

                              
                                <p> Use the <kbd>  to indicate input that is typically entered via keyboard.</p>
                            
این خط متن به صورت یک نمونه خروجی از یک برنامه کامپیوتری در نظر گرفته می شود.
                              
                                <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>
                            

سفارشی سازی قالب

سفارشی سازی کنید و به صورت زنده مشاهده کنید.
طرح قالب

رنگ های فهرست

جمع کردن فهرست

رنگ های نوار بالایی
نکته : این گزینه تنها در حالت نوار ثابت و در هنگام اسکرول صفحه نمایش داده خواهد شد.
نوع نوار بالایی

نوع فوتر

سایه کارت

مخفی سازی دکمه اسکرول به بالا
ارتباط با ما
امروز

لورم ایپسوم متن ساختگی

7:45 ق.ظ

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم

7:50 ق.ظ

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ

8:01 ق.ظ