Bootstrap یک فریمورک محبوب و قدرتمند برای توسعه وب است که توسط توییتر توسعه داده شده است. یکی از قابلیت‌های مهم Bootstrap، استفاده از سیستم Grid است که به شما امکان می‌دهد طرح‌بندی‌های ریسپانسیو را به راحتی ایجاد کنید. اما علاوه بر سیستم Grid، Bootstrap 5 از مفهوم Containers نیز پشتیبانی می‌کند که به شما امکان می‌دهد محتوای سایت را در یک فضای منحصر به فرد قرار دهید. در این مقاله، به طور کامل به آموزش Bootstrap 5 Containers می‌پردازیم.
بخش اول: مفهوم Containers در Bootstrap 5
در Bootstrap 5، یک Container یک عنصر HTML است که برای قرار دادن محتوای سایت درون آن استفاده می‌شود. یک Container یک فضای قابل تنظیم است که باعث محدود کردن عرض محتوا شده و ظاهری متعادل و زیبا را فراهم می‌کند. تفاوت اصلی بین یک Container و یک Row در Bootstrap 5 این است که Container باعث محدود کردن عرض محتوا می‌شود، در حالی که Row فقط برای تقسیم عمودی محتوا استفاده می‌شود.
بخش دوم: انواع Containers در Bootstrap 5
در Bootstrap 5، سه نوع Container وجود دارد: Container، Container-fluid و Container-xl.
1. Container: این نوع Container یک Container استاندارد است که عرض آن در وضعیت دسکتاپ به طور پیش فرض یک حداکثر عرض ثابت دارد و در وضعیت موبایل به صورت پراکنده نمایش داده می‌شود.
2. Container-fluid: این نوع Container عرض آن در تمام وضعیت‌ها به صورت 100٪ از عرض صفحه است. این به شما امکان می‌دهد تا محتوای سایت را در تمام عرض صفحه نمایش دهید.
3. Container-xl: این نوع Container از Container استاندارد با عرض بیشتری برخوردار است. در واقع، Container-xl برای صفحاتی که نیاز به یک فضای بزرگتر برای نمایش محتوا دارند مفید است.
بخش سوم: استفاده از Containers در Bootstrap 5
برای استفاده از Containers در Bootstrap 5، کافیست یک عنصر Div را ایجاد کنید و به آن کلاس مورد نظر را اختصاص دهید. برای استفاده از Container استاندارد، از کلاس “container” استفاده کنید. برای استفاده از Container-fluid، از کلاس “container-fluid” استفاده کنید و برای استفاده از Container-xl، از کلاس “container-xl”استفاده کنید. به عنوان مثال:
<div class="container">
</div>
<div class="container-fluid">
</div>
<div class="container-xl">
</div>
بخش چهارم: قابلیت‌های Containers در Bootstrap 5
Containers در Bootstrap 5 دارای قابلیت‌هایی است که به شما امکان می‌دهد ظاهر وبسایت خود را بهبود بخشید. برخی از این قابلیت‌ها عبارتند از:
- قابلیت تنظیم عرض صفحه وب در حالت دسکتاپ و موبایل.
- ایجاد حاشیه‌های خارجی برای جدا کردن محتوا از لبه‌های صفحه.
- امکان تنظیم پس‌زمینه و رنگ‌بندی Container براساس نیازهای طرح‌بندی.
- امکان استفاده از موارد دیگری مانند توکن‌ها (Tokens) و رویدادها (Events) در Containers.
یک نمونه کد بوت استرپ برای درک بهتر
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Containers Example</title>
</head>
<body data-rsssl=1>
<div class="container">
<h1>Welcome to my website</h1>
<p>This is an example of using Bootstrap 5 Containers.</p>
</div>
<div class="container-fluid">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam fringilla mauris lectus, eu cursus purus imperdiet a. Sed maximus eleifend diam, sed tincidunt lorem feugiat nec. Etiam eget turpis id turpis commodo scelerisque.</p>
</div>
<div class="container-xl">
<h3>Contact Us</h3>
<form>
<div class="mb-3">
<label for="name" class="form-label">Name:</label>
<input type="text" class="form-control" id="name">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email:</label>
<input type="email" class="form-control" id="email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</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="https://mahditavakoli.com/wp-content/litespeed/js/9b11e6d6a557ca6be859f32bf04d8202.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>
توضیحات:
- ابتدا فایل HTML را با تگ
<!DOCTYPE html>و<html>باز و بسته می‌کنیم. - در بخش
<head>، متاهای مورد نیاز برای تنظیمات صفحه و لینک به فایل استایل Bootstrap را قرار می‌دهیم. - در بخش
<body>، سه Container مختلف با استفاده از کلاس‌هایcontainer،container-fluidوcontainer-xlرا ایجاد می‌کنیم. - در هر Container، عناصر HTML نظیر عنوان (
<h1>,<h2>,<h3>) و پاراگراف (<p>) را قرار می‌دهیم. - در Container بزرگتر (
container-xl) یک فرم نیز اضافه می‌کنیم که شامل دو ورودی متنی (<input>) و یک دکمه (<button>) است. - در انتهای بدنه (
</body>)، لینک به فایل‌های اسکریپت Bootstrap را قرار می‌دهیم تا اسکریپت‌های مورد نیاز برای اجرای صحیح Bootstrap بارگیری شوند.
این کد، یک صفحه ساده HTML با استفاده از Bootstrap 5 Containers را نمایش می‌دهد. شما می‌توانید این کد را در یک فایل HTML قرار داده و در مرورگر خود باز کنید تا نتیجه را مشاهده کنید.
سوالات متداول:
سوال 2: چه نوع Containers در Bootstrap 5 وجود دارد؟
پاسخ 2: در Bootstrap 5، دو نوع Containers وجود دارد: Container و Container-fluid. Container از یک حداکثر عرض ثابت برای محتوا استفاده می‌کند و در طراحی واکنش‌پذیر کنترل بیشتری دارد. اما Container-fluid از عرض 100٪ صفحه استفاده می‌کند و در تمام اندازه‌ها به صورت واکنش‌پذیر نمایش داده می‌شود.
سوال 3: چگونه یک Container را در Bootstrap 5 ایجاد کنیم؟
پاسخ 3: برای ایجاد یک Container در Bootstrap 5، می‌توانید از تگ div با کلاس “container” استفاده کنید. به عنوان مثال:
<div class="container">
<!-- محتوای شما در اینجا قرار می‌گیرد -->
</div>سوال 4: چگونه یک Container-fluid را در Bootstrap 5 ایجاد کنیم؟
پاسخ 4: برای ایجاد یک Container-fluid در Bootstrap 5، می‌توانید از تگ div با کلاس “container-fluid” استفاده کنید. به عنوان مثال:
<div class="container-fluid">
<!-- محتوای شما در اینجا قرار می‌گیرد -->
</div>سوال 5: آیا می‌توانم Container و Container-fluid را در یک صفحه با هم ترکیب کنم؟
پاسخ 5: بله، شما می‌توانید Container و Container-fluid را در یک صفحه با هم ترکیب کنید. این امکان به شما اجازه می‌دهد تا بخش‌های مختلف صفحه خود را با استفاده از طرح‌بندی‌های مختلف مدیریت کنید و آن‌ها را به صورت واکنش‌پذیر نمایش دهید.
نتیجه‌گیری:
در این مقاله به طور کامل به آموزش Bootstrap 5 Containers پرداختیم. شما با مفهوم Containers آشنا شدید و نوع‌های مختلف Containers را فراگرفتید. همچنین با قابلیت‌ها و استفاده از Containers در Bootstrap 5 آشنا شدید. حالا شما می‌توانید از Containers برای طراحی ظاهری زیبا و منحصر به فرد برای وبسایت خود استفاده کنید.
