معرفی بوت استرپ 5 BootStrap 5

Bootstrap یک فریمورک (framework) متن باز (open-source) برای طراحی سایت است که ابتدا توسط توییتر (Twitter) ایجاد شد. این فریمورک ابزارها و قالب‌های طراحی HTML، CSS و JavaScript را در اختیار توسعه‌دهندگان قرار می‌دهد تا فرایند طراحی و توسعه وب را سریع‌تر و آسان‌تر کند.

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

Bootstrap بر پایه HTML، CSS و JavaScript استوار است و سازگاری بالایی با مرورگرها دارد. این فریمورک بهبود پاسخگویی (responsiveness) صفحات وب را فراهم می‌کند، به طوری که صفحات بر روی انواع دستگاه‌ها و اندازه‌های صفحه نمایش به خوبی نمایش داده می‌شوند.

از مزایای Bootstrap می‌توان به موارد زیر اشاره کرد:

– سرعت توسعه بالا: با استفاده از قالب‌ها و ابزارهای طراحی آماده، زمان لازم برای توسعه صفحات وب به شدت کاهش می‌یابد.
– طراحی ریسپانسیو: Bootstrap قابلیت پاسخگویی به اندازه صفحه نمایش را دارد و صفحات وب را بر روی دستگاه‌های مختلف به خوبی نمایش می‌دهد.
– پشتیبانی مرورگر: Bootstrap سازگاری بالایی با مرورگرها دارد و در بیشتر مرورگرهای معروف به خوبی کار می‌کند.
– امکانات طراحی: این فریمورک دارای ابزارها و قالب‌های طراحی متنوعی است که امکانات زیادی را برای طراحی صفحات وب فراهم می‌کند.

در زیر یک نمونه کد HTML ساده با استفاده از Bootstrap 5 را آورده‌ام:

در این کد، از فایل‌های CSS و JavaScript Bootstrap با استفاده از CDN (شبکه توزیع محتوا) فراخوانی شده‌اند. با استفاده از کلاس‌های Bootstrap، یک عنوان (`<h1>`)، یک پاراگراف (`<p>`) و یک دکمه (`<button>`) ایجاد شده است.

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Example</title>
  
</head>
<body data-rsssl=1>
  <div class="container">
    <h1>Hello, Bootstrap!</h1>
    <p>This is an example of Bootstrap 5.</p>
    <button class="btn btn-primary">Click me</button>
  </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/d41d8cd98f00b204e9800998ecf8427e.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>

این کد یک صفحه ساده را نشان می‌دهد که عنوان “Hello, Bootstrap!” را دارد، همچنین یک پاراگراف و یک دکمه نیز درون یک کانتینر (`<div class=”container”>`) قرار گرفته‌اند. دکمه با استفاده از کلاس‌های `btn` و `btn-primary` از طریق Bootstrap طراحی شده است.

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

مقالات مرتبط:

کانتینرها در بوت استرپ 5 – Bootstrap 5 Containers – قسمت 2
گریدها در بوت استرپ 5 – Bootstrap5 Grids – قسمت 3
تکست/تایپوگرافی در بوت استرپ 5 – Bootstrap5 Text/Typography – قسمت 4
همه قسمت های آموزش بوت استرپ 5
تمامی قسمت های آموزش طراحی سایت

چگونه می توانم شبکه Bootstrap را در پروژه خود استفاده کنم؟

برای استفاده از شبکه Bootstrap در پروژه خود، مراحل زیر را می‌توانید دنبال کنید:

اضافه کردن فایل‌های Bootstrap به پروژه: برای شروع، شما نیاز دارید فایل‌های Bootstrap را به پروژه خود اضافه کنید. می‌توانید فایل‌های Bootstrap را از وبسایت رسمی Bootstrap (https://getbootstrap.com) دانلود کنید. فایل‌های Bootstrap شامل فایل‌های CSS و JavaScript است که برای استایل‌دهی و افزودن قابلیت‌های تعاملی استفاده می‌شوند. شما می‌توانید این فایل‌ها را به صورت مستقیم در پروژه خود استفاده کنید یا از CDN (شبکه توزیع محتوا) مانند CDN Bootstrap استفاده کنید.
استفاده از کلاس‌های شبکه: یکی از اصلی‌ترین قابلیت‌های Bootstrap شبکه است. شما می‌توانید از کلاس‌های شبکه Bootstrap برای ساختن ستون‌ها و ردیف‌ها در صفحه استفاده کنید. به عنوان مثال، با استفاده از کلاس “container” می‌توانید یک محیط استاندارد برای محتوای خود ایجاد کنید و با استفاده از کلاس “row” می‌توانید یک ردیف ایجاد کنید. سپس با استفاده از کلاس‌های ستون مانند “col-6” می‌توانید ستون‌های مورد نیاز خود را ایجاد کنید.
اضافه کردن المان‌های وب: حالا که ساختار شبکه را ایجاد کرده‌اید، می‌توانید المان‌های وب مختلف را داخل ستون‌ها قرار دهید. می‌توانید از المان‌های استاندارد HTML مانند متن، تصویر، فرم‌ها و … استفاده کنید و آنها را در ستون‌ها قرار دهید. با استفاده از کلاس‌های Bootstrap، می‌توانید المان‌های وب را به طور دقیق در صفحه قرار داده و ظاهر و طراحی آنها را تغییر دهید.
استفاده از ویژگی‌های ریسپانسیو: شبکه Bootstrap امکان طراحی ریسپانسیو را نیز برای شما فراهم می‌کند. شما می‌توانید با استفاده از کلاس‌های مختلفی که برای اندازه‌های مختلف صفحه نمایش تعریف شده‌اند، ستون‌ها و المان‌های وب را به طور خاص در اندازه‌های مختلف تنظیم کنید. این به شما امکان می‌دهد صفحه خود را بر روی تلفن همراه، تبلت ودسکتاپ به خوبی نمایش دهید.
سفارشی‌سازی و استایل‌دهی: Bootstrap امکانات متعددی برای سفارشی‌سازی و استایل‌دهی به عناصر وب فراهم می‌کند. شما می‌توانید از کلاس‌های طراحی شده توسط Bootstrap استفاده کنید یا استایل‌های خودتان را با استفاده از CSS اعمال کنید. همچنین، شما می‌توانید از مولفه‌ها و قالب‌های آماده Bootstrap استفاده کنید تا ظاهر و عملکرد صفحه‌های خود را بهبود بخشید.
افزودن قابلیت‌های تعاملی: Bootstrap همچنین ابزارها و قابلیت‌های تعاملی زیادی را ارائه می‌دهد که می‌توانید به پروژه خود اضافه کنید. برای مثال، شما می‌توانید استفاده از کامپوننت‌های جاوااسکریپت مانند اسلایدر، تقویم، منوهای کشویی و غیره را به پروژه خود اضافه کنید تا تعامل کاربر را بهبود بخشید.

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