معرفی گریدز Grids در بوت استرپ 5 Bootstrap5

شبکه Bootstrap یک سیستم طراحی وب است که توسط توسعه دهندگان وب برای طراحی سایت ریسپانسیو و قابل تنظیم استفاده می شود. Bootstrap شامل مجموعه ای از کلاس ها، استایل ها و قالب های HTML است که به شما کمک می کند یک طراحی وب سریع و قابل توسعه راه اندازی کنید.

یکی از اجزای اصلی Bootstrap شبکه (Grid) است. شبکه Bootstrap از سیستم فلکسیبل و قابل تنظیمی تشکیل شده است که به شما امکان می دهد محتوا را در صفحه به طور مرتب و سازماندهی شده قرار دهید. با استفاده از شبکه Bootstrap، می توانید ستون ها و ردیف های مختلفی را برای قرار دادن المان های وب مانند متن، تصاویر، فرم ها و غیره در صفحه ایجاد کنید.

شبکه Bootstrap بر پایه سیستم شبکه 12 ستونی استوار است. شما می توانید ستون ها را به صورت ترکیبی برای ایجاد طرح های مختلف استفاده کنید. همچنین، با استفاده از کلاس های مختلفی که Bootstrap فراهم می کند، می توانید المان ها را در موقعیت های مختلف قرار دهید و آنها را به طور دقیق در صفحه تنظیم کنید.

با استفاده از شبکه Bootstrap، می توانید طرح های ریسپانسیو برای مختلف اندازه های صفحه نمایش ایجاد کنید. این به شما امکان می دهد صفحه خود را بر روی تلفن همراه، تبلت و دسکتاپ به خوبی نمایش دهید.

یک نمونه کد Bootstrap Grids با توضیحات

در زیر یک نمونه کد برای استفاده از شبکه Bootstrap با استفاده از سیستم Grid آمده است. این کد یک صفحه ساده با سه ستون ایجاد می‌کند. هر ستون به ترتیب از موبایل (sm) تا دسکتاپ (lg) اندازه مشخص شده دارد.

				
					<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Grid Example</title>
  
  
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-4 col-md-6 col-lg-3">
        <h2>ستون اول</h2>
        <p>محتوای ستون اول</p>
      </div>
      <div class="col-sm-4 col-md-6 col-lg-6">
        <h2>ستون دوم</h2>
        <p>محتوای ستون دوم</p>
      </div>
      <div class="col-sm-4 col-md-12 col-lg-3">
        <h2>ستون سوم</h2>
        <p>محتوای ستون سوم</p>
      </div>
    </div>
  </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/6fcd4be5ba096fd4e573c541def94962.js?ver=db7bb"></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>

در این مثال، سه ستون ایجاد شده است. ستون اول در اندازه‌های مختلف صفحه توزیع می‌شود. به طور مشابه، ستون دوم در اندازه‌های مختلف تنظیم می‌شود و ستون سوم تنها در اندازه‌های موبایل و تبلت تمام عرض صفحه را پوشش می‌دهد.

توضیحات کلاس‌ها:

container: ایجاد یک محیط استاندارد برای محتوای صفحه.
row: ایجاد یک ردیف برای قرار دادن ستون‌ها درون آن.
col-sm-4 col-md-6 col-lg-3: تعیین اندازه ستون بر اساس اندازه صفحه نمایش. در این حالت، ستون اول در موبایل 4/12، در تبلت 6/12 و در دسکتاپ 3/12 از عرض صفحه را پوشش می‌دهد. به طور مشابه، ستون دوم در موبایل 4/12، در تبلت 6/12 و در دسکتاپ 6/12 از عرض صفحه را پوشش می‌دهد. ستون سوم نیز در موبایل 4/12، در تبلت 12/12 و در دسکتاپ 3/12 از عرض صفحه را پوشش می‌دهد.

شما می‌توانید اندازه‌ها و ترکیب‌های مختلف را بر اساس نیاز خود تغییر داده و المان‌های وب مورد نظر خود را درون ستون‌ها قرار دهید. همچنین، با استفاده از کلاس‌ها و ویتوضیحات بیشتر در مورد کد ارائه شده:

container: این کلاس برای ایجاد یک محیط استاندارد برای محتوای صفحه استفاده می‌شود. محتوا درون این کانتینر قرار می‌گیرد و در اطراف آن یک حاشیه (margin) ایجاد می‌شود.
row: این کلاس برای ایجاد یک ردیف استفاده می‌شود. ستون‌ها باید درون ردیف قرار گیرند. همچنین، ردیف به عنوان یک محفظه افقی برای ستون‌ها عمل می‌کند.
col-sm-4, col-md-6, col-lg-3: این کلاس‌ها برای تعیین اندازه ستون‌ها بر اساس اندازه صفحه نمایش استفاده می‌شوند. در مثال بالا، ستون اول در اندازه‌های مختلف صفحه به ترتیب 1/3، 1/2 و 1/4 از عرض صفحه را پوشش می‌دهد. همچنین، ستون دوم در اندازه‌های مختلف به ترتیب 1/3، 1/2 و 2/3 از عرض صفحه را پوشش می‌دهد. ستون سوم نیز در اندازه‌های مختلف به ترتیب 1/3، 1/2 و 1/4 از عرض صفحه را پوشش می‌دهد.
col-sm-4: در اندازه‌های موبایل و تبلت، ستون اول 1/3 از عرض صفحه را پوشش می‌دهد (4/12).
col-md-6: در اندازه‌های متوسط و بزرگتر، ستون اول 1/2 از عرض صفحه را پوشش می‌دهد (6/12).
col-lg-3: در اندازه‌های بزرگتر از دسکتاپ، ستون اول 1/4 از عرض صفحه را پوشش می‌دهد (3/12).

از کلاس‌های col-* بیشتر همچنین می‌توانید استفاده کنید تا استایل‌های مختلفی برای ستون‌ها اعمال کنید. به عنوان مثال، از col-6 برای ستونی که نیمی از عرض صفحه را پوشش می‌دهد و از col-12 برای ستونی که تمام عرض صفحه را پوشش می‌دهد می‌توانید استفاده کنید.

همچنین، در کد ارائه شده، فایل‌های فشرده‌شده CSS و JavaScript بوت استراپ را به طور جداگانه به صفحه اضافه کنید. این فایل‌ها باید در مسیر path/to/bootstrap.min.css و path/to/bootstrap.min.js قرار داشته باشند.

سوالات متداول در مورد Grids در بوت Bootstrap5

:

۱. Grids چیست؟

Grids در Bootstrap 5 یک سیستم شبکه است که به شما امکان می‌دهد صفحه را به ستون‌های قابل تغییر تقسیم کنید. این ستون‌ها برای قرار دادن محتوا و طراحی ریسپانسیو بسیار مفید هستند.

۲. چگونه از Grids در Bootstrap 5 استفاده کنم؟

برای استفاده از Grids در Bootstrap 5، شما باید از کلاس‌های .container، .row و .col استفاده کنید. شروع یک سطر جدید با استفاده از کلاس .row و تقسیم آن به ستون‌ها با استفاده از کلاس .col انجام می‌شود.

مثال:

<div class="container">
<div class="row">
<div class="col">ستون 1</div>
<div class="col">ستون 2</div>
</div>
</div>

۳. چگونه می‌توانم ستون‌های مختلف را با اندازه‌های مختلف در Bootstrap 5 ایجاد کنم؟

شما می‌توانید از کلاس‌های .col-{breakpoint}-{number} در Bootstrap 5 استفاده کنید تا ستون‌های مختلف با اندازه‌های مختلف ایجاد کنید. {breakpoint} می‌تواند sm، md، lg، xl یا xxl باشد و {number} بین 1 تا 12 است.

مثال:

<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3">ستون 1</div>
<div class="col-sm-6 col-md-8 col-lg-9">ستون 2</div>
</div>
</div>

در این مثال، ستون 1 در اندازه‌های sm به بعد به اندازه 6 ستون، ستون 2 در اندازه‌های sm به بعد به اندازه 6 ستون و در اندازه‌های md به بعد به اندازه 8 ستون و در اندازه‌های lg به بعد به اندازه 9 ستون را اشغال می‌کند.

اشتراک گذاری این مطلب در: