ورود به Bootstrap 5
- پچھلے پنچایات بس5 تعلیم
- آئندہ پنچایات بس5 کنٹینر
بوت اسپات چیست؟
- بوت اسپات یک قالب پیشرفته‌ی وب است که برای توسعه سریع‌تر و آسان‌تر وب استفاده می‌شود
- بوت اسپات شامل قالب‌های طراحی بر اساس HTML و CSS است که برای ترتیب‌دهی، فرم‌ها، دکمه‌ها، جدول‌ها، ناوبری، مدال‌ها، اسلایدرهای تصویری و غیره استفاده می‌شود
- بوت اسپات پلاگین‌های جاوااسکریپت متنوعی ارائه می‌دهد
- بوت اسپات به شما امکان می‌دهد تا به راحتی طراحی‌های ر��پذیر ایجاد کنید
طراحی وب��پذیر چیست؟
طراحی وب��پذیر برای ایجاد وب‌سایت‌هایی است که به طور خودکار تنظیم می‌شوند تا تجربه استفاده از همه دستگاه‌ها، از تلفن‌های همراه تا رایانه‌های رومیزی بزرگ، بهبود یابد.
بوت اسپات 5 مثال
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>میری پہلی بوتسٹر پیج</h1>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>ستون 1: بهار</h3>
<p>در روز‌های خوب به سمت ساحل رود ساعی می‌روم، مناظر بی‌پایان یک لحظه جدید است.</p>
<p>به راحتی چهره باد شرقی را می‌شناسم، همیشه قرمز و بنفش است و همیشه بهار است.</p>
</div>
<div class="col-sm-4">
<h3>ستون 2: شعری از اوایل تابستان</h3>
<p>رنگ‌های قرمز و بنفش به خاک تبدیل شده‌اند، در صدای قورباغه‌ها فصل تابستان جدید است.</p>
<p>در جاده‌ای که در دو سمتش آفتابگردان و کتان کشت شده است، نمی‌توانم به پایان برسم، اولین بار فهمیدم که من یک مردم عادی در دوره صلح هستم.</p>
</div>
<div class="col-sm-4">
<h3>ستون 3: سفر به کوه</h3>
<p>از بالا به مسیر صخره‌ای سرد در کوه می‌روم، کسی در جایی که ابرها می‌رویند خانه دارد.</p>
<p>صندلی در درختان چنار در شب توقف کردم، برگ‌های سرمزن از گل‌های فوریه قرمزتر است.</p>
</div>
</div>
</div>
نسخه Bootstrap
Bootstrap 5 (2021 منتشر شده) جدیدترین نسخه Bootstrap است (2013 منتشر شده)；با استفاده از اجزا جدید، جدول‌های استایل سریع‌تر، پاسخگویی سریع‌تر ارائه می‌دهد.
Bootstrap 5 از نسخه‌های پایدار جدیدترین تمامی مرورگرها و پلتفرم‌های اصلی پشتیبانی می‌کند. اما از نسخه‌های Internet Explorer 11 و قدیمی‌تر پشتیبانی نمی‌کند.
تفاوت اصلی بین Bootstrap 5 و Bootstrap 3 & 4 این است که Bootstrap 5 به جای jQuery به Vanilla JavaScript تغییر کرده است.
نکات:گروه آن همچنان از تعمیرات خطا و تغییرات مستندات کلیدی Bootstrap 3 و Bootstrap 4 پشتیبانی می‌کند، بنابراین استفاده از آنها کاملاً امن است. اما هیچ ویژگی جدیدی به آنها اضافه نخواهد شد.
چرا باید از Bootstrap استفاده کنید؟
مزایای Bootstrap:
- آسان بودن:هر کسی که به HTML و CSS اصولی دارد می‌تواند فوراً از Bootstrap استفاده کند
- خصوصیات پاسخگویی:CSS پاسخگویی Bootstrap می‌تواند برای موبایل، تبلت و دسکتاپ تنظیم شود
- روش‌های اولویت دار移动优先:در Bootstrap، سبک‌های اولویت دار移动优先是其核心框架的一部分
- سازگاری مرورگر:Bootstrap 5 با تمامی مرورگرهای مدرن سازگار است (Chrome، Firefox، Edge، Safari و Opera).
توجه:اگر نیاز به پشتیبانی از IE11 و نسخه‌های قبلی دارید، باید از BS4 یا BS3 استفاده کنید.
از کجا Bootstrap 5 را دریافت کنید؟
دو طریق موجود است تا بتوانید Bootstrap 5 را در وب‌سایت خود استفاده کنید.
آپ:
- شامل باستیل 5 از CDN
- باستیل 5 را از getbootstrap.com دانلود کنید
باستیل 5 CDN
اگر نمی‌خواهید خودتان دانلود و میزبانی کنید، می‌توانید از CDN (شبکه تحویل محتوا) برای ارجاع به آن استفاده کنید.
CodeW3C.com از CDN برای CSS و JavaScript باستیل پشتیبانی می‌کند:
MaxCDN:
<!-- CSS جدیدترین نسخه و فشرده شده --> <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet"> <!-- JavaScript جدیدترین نسخه --> <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
یکی از مزایای استفاده از CDN باستیل 5:
بسیاری از کاربران در بازدید از یک سایت دیگر از jsDelivr برای دانلود باستیل 5 استفاده کرده‌اند. بنابراین، وقتی به وب‌سایت شما می‌آیند، از حافظه پنهان بارگذاری می‌شود که باعث کاهش زمان بارگذاری می‌شود. علاوه بر این، بیشتر CDNها اطمینان حاصل می‌کنند که یک بار که کاربر از سرور نزدیک به خود درخواست کند، آن فایل از نزدیک‌ترین سرور ارائه می‌شود که باعث کاهش زمان بارگذاری می‌شود.
JavaScript؟
باستیل 5 از JavaScript برای اجزای مختلف (مانند مدال، ابزارهای توضیحی، پنجره‌های پاپ‌آپ و غیره) استفاده می‌کند. اما اگر فقط بخش CSS باستیل را استفاده می‌کنید، نیازی به آنها نیست.
دانلود باستیل 5
اگر می‌خواهید خودتان از طریق دانلود و میزبانی باستیل 5 استفاده کنید، لطفاً به https://getbootstrap.com/، سپس بر اساس توضیحات موجود عمل کنید.
با استفاده از باستیل 5 اولین صفحه خود را ایجاد کنید
1. اضافه کردن HTML5 Document Type
باستیل 5 از عناصر و ویژگی‌های HTML5 استفاده می‌کند که نیازمند HTML5 doctype هستند.
لطفاً همیشه HTML5 doctype را در ابتدای صفحه شامل کنید، به علاوه ویژگی lang و عنوان صحیح و مجموعه کاراکتر.
<!DOCTYPE html>
<html lang="en">
<head>
<title>مثال باستیل 5</title>
<meta charset="utf-8">
</head>
</html>
2. اولویت موبایل در باستیل 5
هدف طراحی باستیل 5، سازگاری با دستگاه‌های موبایل است. سبک‌های اولویت موبایل بخشی از چارچوب هسته‌ای هستند.
برای اطمینان از رندرینگ صحیح و بزرگنمایی لمسی، لطفاً در <head> عناصر زیر را به داخل این عناصر اضافه کنید <meta> نام‌گذاری:
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width طول صفحه را تنظیم می‌کند تا با width-screen دستگاه (که ممکن است از دستگاه به دستگاه متفاوت باشد) مطابقت داشته باشد.
initial-scale=1 مقیاس اولیه‌ای که مرورگر در بارگذاری اولیه صفحه تنظیم می‌کند.
3. قالب‌بندی
باستیل 5 نیازمند یک عناصر برای بسته‌بندی محتوای سایتی است.
دو کنٹینر کلاس چننا ہیں:
.containerکلاس ایک جوابی مستقل چوڑائی کا کنٹینر فراہم کرتی ہے.container-fluidکلاس ایک پورا پیمانے کا کنٹینر فراہم کرتی ہے، جو ویب سائٹ کی پورا پیمانے کی چوڑائی پر چلتی ہے
دو بوتسٹر 5 پیج
کنٹینر مثال
یہ مثال، ابتدائی بوتسٹر 5 پیج (جوابی مستقل چوڑائی کا کنٹینر) کا کد دکھاتا ہے:
<!DOCTYPE html> <html lang="en"> <head> <title>بوتسٹر مثال</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet"> <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script> </head> <body> <div class="container"> <h1>میری پہلی بوتسٹر پیج</h1> <p>یہ حصہ .container کلاس میں ہے。</p> <p>.container کلاس ایک جوابی پیمانے کا مستقل چوڑائی کا کنٹینر فراہم کرتی ہے。</p> </div> </body> </html>
کنٹینر فلائیڈ مثال
یہ مثال، ابتدائی بوتسٹر 5 پیج (پورا پیمانے کا کنٹینر) کا کد دکھاتا ہے:
<!DOCTYPE html> <html lang="en"> <head> <title>بوتسٹر مثال</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet"> <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script> </head> <body> <div class="container-fluid"> <h1>میری پہلی بوتسٹر پیج</h1> <p>یہ حصہ .container-fluid کلاس میں ہے。</p> <p>.container-fluid کلاس ایک پورا پیمانے کا کنٹینر فراہم کرتی ہے، جو ویب سائٹ کی پورا پیمانے کی چوڑائی پر چلتی ہے。</p> </div> </body> </html>
- پچھلے پنچایات بس5 تعلیم
- آئندہ پنچایات بس5 کنٹینر
