Bootstrap یک کتابخانه CSS و جاوااسکریپت محبوب برای طراحی سایت است که برای ساخت رابط کاربری زیبا و واکنش‌گرا استفاده میشود. یکی از اجزای مهم Bootstrap، ماژول Text/Typography است که به شما امکان میدهد متن‌های خود را به سادگی طراحی کنید و به آنها استایل‌های مختلفی اعمال کنید.
ماژول Text/Typography در Bootstrap شامل یک مجموعه از کلاسها و استایل‌ها است که به شما امکان میدهد متن‌ها را به صورت مناسب و به دلخواه طراحی کنید. این ماژول برای تغییر فونت، اندازه، رنگ، توزیع و فاصله‌بین متون استفاده میشود و شما را قادر می‌سازد ظاهر متن‌های خود را به سادگی کنترل کنید.
برخی از کلاسها و استایل‌های اصلی ماژول Text/Typography در Bootstrap عبارتند از:
- `display`: این کلاسها برای تعیین نوع نمایش متن استفاده میشوند، مانند `display-1` تا `display-4` که اندازه متون را از بزرگ به کوچک میکنند.
- `lead`: این کلاس برای تعیین یک متن برجسته و قابل توجه برای جلب توجه استفاده میشود.
- `text-*`: استایل‌های مربوط به رنگ متن را تعیین میکنند. `text-primary`، `text-secondary` و `text-danger` از جمله مقادیر معمول است.
- `font-weight-*`: با استفاده از این کلاسها میتوانید وزن فونت متن را تعیین کنید، مانند `font-weight-bold` برای متن‌های پررنگ.
- `text-*-*`: این کلاسها برای تعیین توزیع و فاصله‌بین متن‌ها استفاده میشوند، مانند `text-left`، `text-center` و `text-right` برای تعیین چینش متن در چپ، مرکز و راست.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Typography Example</title>
</head>
<body>
<div class="container">
<h1 class="display-4">عنوان اصلی</h1>
<p class="lead">این یک متن برجسته است.</p>
<p class="text-primary">این یک متن با رنگ اصلی است.</p>
<p class="font-weight-bold">این یک متن با وزن پررنگ است.</p>
<p class="text-right">این یک متن در سمت راست است.</p>
</div>
<script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="http://mahditavakoli.com/wp-content/litespeed/js/e4f4b13ae8bd51ddc981a26b9069277e.js?ver=2360e"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>
در این نمونه کد، از کلاسها و استایل‌های Bootstrap Text/Typography برای استایل دادن به متن‌ها استفاده شده است. به عنوان مثال:
کلاس display-4 برای تعیین اندازه عنوان اصلی استفاده شده است.
کلاس lead برای تعیین یک متن برجسته استفاده شده است.
کلاس text-primary برای تعیین رنگ متن استفاده شده است.
کلاس font-weight-bold برای تعیین وزن پررنگ برای متن استفاده شده است.
کلاس text-right برای تعیین چینش متن در سمت راست استفاده شده است.
با اجرای این کد، میتوانید استایل‌های Bootstrap Text/Typography را در متن‌های خود مشاهده کنید. حتماً به خطوط <link> و <script> در کد توجه کنید که به فایل‌های استایل و جاوااسکریپت Bootstrap اشاره دارند و باید مطمئن شوید که این فایل‌ها در پروژه شما قابل دسترسی باشند.
چگونه می‌توانم استایل‌های دیگری را به متن‌ها اضافه کنم؟
برای اضافه کردن استایل‌های دیگر به متن‌ها با استفاده از Bootstrap Text/Typography، میتوانید از کلاسها و استایل‌های تعریف شده در Bootstrap استفاده کنید یا به صورت سفارشی کلاسها و استایل‌های خود را اضافه کنید. در ادامه چند روش برای اضافه کردن استایل به متن‌ها را بررسی می‌کنیم:
استفاده از کلاسها و استایل‌های موجود: Bootstrap Text/Typography شامل مجموعه‌ای از کلاسها و استایل‌های آماده است که میتوانید به متن‌ها اعمال کنید. برای استفاده از آنها، به عنوان مثال، میتوانید از کلاسهای text-uppercase برای تبدیل متن به حروف بزرگ، text-lowercase برای تبدیل متن به حروف کوچک یا text-italic برای تعیین استایل متن کج استفاده کنید. به عنوان مثال:
<p class="text-uppercase">این یک متن با حروف بزرگ است.</p>
<p class="text-lowercase">این یک متن با حروف کوچک است.</p>
<p class="text-italic">این یک متن کج است.</p>
- استفاده از کلاسهای سفارشی: شما میتوانید کلاسهای سفارشی خود را برای استایل دادن به متن‌ها اضافه کنید. برای این کار، میتوانید به المان مورد نظر کلاس دلخواه خود را اضافه کنید و سپس در فایل CSS خود استایل مورد نظر را تعریف کنید. به عنوان مثال:
<p class="custom-text">این یک متن با استایل سفارشی است.</p>
و در فایل CSS خود:
.custom-text {
color: red;
font-size: 20px;
/* سایر استایل‌های مورد نظر خود را اضافه کنید */
}
در این مثال، کلاس custom-text را به المان <p> اضافه کرده‌ایم و سپس در فایل CSS، استایل‌های مورد نظر خود را برای این کلاس تعریف کرده‌ایم.
با استفاده از این روش‌ها، شما قادر خواهید بود استایل‌های دیگر را به متن‌ها اضافه کنید و ظاهر متن‌های خود را به دلخواه تغییر دهید.
سوالات متداول:
سوال 2: چگونه متن را در Bootstrap 5 به صورت عمودی مرتب کنیم؟
پاسخ: برای مرتب کردن متن به صورت عمودی در Bootstrap 5، میتوانید از کلاسهای text-wrap و text-nowrap استفاده کنید. کلاس text-wrap باعث میشود متن به صورت عمودی درون المان متن قرار بگیرد و در صورت نیاز به خطشکنی، خطوط جدید ایجاد میشوند. اما کلاس text-nowrap باعث میشود متن به صورت عمودی درون المان قرار بگیرد و هیچ خط جدیدی ایجاد نشود.
سوال 3: چگونه اندازه متن را در Bootstrap 5 تغییر دهیم؟
پاسخ: برای تغییر اندازه متن در Bootstrap 5، میتوانید از کلاسهای fs-1 تا fs-6 استفاده کنید. این کلاسها اندازه متن را از fs-1 که کوچکترین اندازه است، تا fs-6 که بزرگترین اندازه است، تعیین میکنند. همچنین، میتوانید از کلاس fw-bold برای تنظیم متن به صورت پررنگ استفاده کنید.
سوال 4: چگونه رنگ متن را در Bootstrap 5 تغییر دهیم؟
پاسخ: برای تغییر رنگ متن در Bootstrap 5، میتوانید از کلاسهای رنگهای مختلف استفاده کنید. به عنوان مثال، برای تغییر رنگ متن به رنگ قرمز، از کلاس text-danger استفاده کنید. برای تغییر به رنگ سبز، از کلاس text-success استفاده کنید و برای رنگ آبی از کلاس text-primary استفاده کنید. همچنین، میتوانید از کلاسهای text-light و text-dark برای تغییر متن به رنگ روشن و تاریک استفاده کنید.
