شروع کار با بوت استرپ ۴

**Main Page Tutorial**
Main Page Tutorial
موارد آموزشی
۱	خانه
۲	شروع
۳	ظرف‌ها
۴	شبکه‌بندی پایه
۵	تایپوگرافی
۶	رنگ‌ها
۷	جدول‌ها
۸	تصاویر
۹	جامبوترون
۱۰	هشدارها
۱۱	کلیدها
۱۲	گروه‌های کلید
۱۳	نشان‌ها (Badges)
۱۴	نوارهای پیشرفت
۱۵	Spinnerها
۱۶	صفحه‌بندی
۱۷	گروه‌های لیست
۱۸	کارت‌ها
۱۹	منوهای کرکره‌ای
۲۰	Collapse
۲۱	Navها
۲۲	Navbar
۲۳	فرم‌ها
۲۴	ورودی‌ها
۲۵	گروه‌های ورودی
۲۶	فرم‌های سفارشی
۲۷	Carousel
۲۸	Modal
۲۹	راهنمای ابزار
۳۰	Popover
۳۱	Toast
۳۲	Scrollspy
۳۳	امکانات
۳۴	Flex
۳۵	آیکن‌ها
۳۶	Media Objects
۳۷	فیلترها
شبکه‌بندی
Theme
مرجع

بوت استرپ چیست؟

بوت استرپ یک چارچوب (framework) فرانت-اند (front-end) برای توسعهٔ سریع‌تر و آسان‌تر وب است^[۱]

بوت استرپ شامل الگوهای طراحی مبتنی بر HTML و CSS برای تایپوگرافی، فرم‌ها، دکمه‌ها، جداول، جهت‌یابی، ماژول‌ها، گردانه‌های تصویر و بسیاری از اجزاء دیگر و همچنین افزونه‌های اختیاری جاوا اسکریپت است

علاوه بر این بوت استرپ توانایی ایجاد طرح‌های واکنش‌گرا (responsive) را به سادگی ارائه می‌دهد

طراحی وب واکنش گرا چیست؟

طراحی وب واکنش گرا به معنی طراحی وب‌سایت‌هایی است که بطور خودکار خود را تطبیق می‌دهند تا در همه دستگاه‌ها، از گوشی‌های موبایل کوچک تا رایانه‌های رومیزی بزرگ، خوب بنظر برسند.

مثال بوت استرپ ۴

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
</div>

مشاهدهٔ نتیجه

مثال بوت استرپ ۴

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>

مشاهدهٔ نتیجه

بوت استرپ ۳ در مقابل بوت استرپ ۴

بوت استرپ ۴ جدیدترین نسخه بوت استرپ است؛ با مؤلفه‌های جدید، صفحات سریعتر و واکنش‌گرایی (responsive) بیشتر.

بوت استرپ ۴ آخرین نسخهٔ پایدار همهٔ مرورگرها و پلت فرم‌ها را پشتیبانی می‌کند. با این حال Internet Explorer 9 و قدیمی‌تر پشتیبانی نمی‌شوند.

اگر نیازمند پشتیبانی IE8-9 هستید، از بوت استرپ ۳ استفاده کنید. آن پایدارترین نسخهٔ بوت استرپ است و همچنان برای تعمیر مشکلات (Bugfix) و تغییرات مستندسازی توسط تیم پشتیبانی می‌شود. با این حال ویژگی‌های جدید به آن اضافه نخواهد شد.

پشتیبانی از Dropped icon: بوت استرپ ۴ از گلیف آیکون‌های BS3 پشتیبانی نمی‌کند. در عوض می‌توان از Font-Awesome یا سایر کتابخانه‌های آیکون استفاده کرد.

بوت استرپ چیست؟

مزایای بوت استرپ:

آسانی استفاده: هر کسی با دانش پایه در مورد HTML و CSS می‌تواند از بوت استرپ استفاده کند

ویژگیهای واکنش گرا: CSS در بوت استرپ واکنش گراست به طوری که با (اندازه صفحه نمایش) موبایل‌ها، تبلت‌پ‌ها و رایانه‌های رومیزی سازگار می‌شود

رویکرد Mobile-first: در بوت استرپ ۳، styles (به فارسی: طرح‌های) Mobile-first از هسته چارچوب مجزا هستند. (در واقع در طراحی سایت با بوت استرپ، ظاهر آن در موبایل و تبلت اهمیت بیشتری نسبت به رایانه‌های رومیزی دارد)

سازگاری با مرورگر: بوت استرپ با همه مرورگرهای مدرن سازگاری دارد مانند: Safari ,Edge ,Internet Explorer ,Firefox ,Chrome و Opera

چرا از بوت استرپ استفاده کنیم؟

مزایای بوت استرپ:

آسانی استفاده: هرکسی با دانش پایه در مورد HTML و CSS می‌تواند از بوت استرپ استفاده کند

ویژگیهای واکنش گرا: CSS در بوت استرپ واکنشگراست به طوری که با (اندازه صفحه نمایش) موبایل‌ها، تبلت‌ها و رایانه‌های رومیزی سازگار می‌شود

رویکرد Mobile-first: در بوت استرپ ۳، styles (به فارسی: طرح‌های) Mobile-first از هسته چارچوب مجزا هستند. (در واقع در طراحی سایت با بوت استرپ، ظاهر آن در موبایل و تبلت اهمیت بیشتری نسبت به رایانه‌های رومیزی دارد)

سازگاری با مرورگر: بوت استرپ با همه مرورگرهای مدرن سازگاری دارد مانند: Safari ,Edge ,Internet Explorer ,Firefox ,Chrome و Opera

بوت استرپ ۴ را از کجا به دست آوریم؟

دو راه وجود دارد تا بتوانید کار با بوت استرپ را روی وب‌سایت خود شروع کنید.

شما می‌توانید:

بوت استرپ را از آدرس getbootstrap.com دانلود کنید
بوت استرپ را از طریق یک CDN استفاده کنید

CDN بوت استرپ ۴

اگر قصد دانلود و میزبانی بوت استرپ را ندارید، می‌توانید آن را از طریق یک CDN (شبکه تحویل محتوا) استفاده کنید.

MaxCDN پشتیبانی CDN را برای CSS و جاوااسکرپت بوت استرپ فراهم می‌کند. شما باید jQuery را نیز استفاده کنید:

MaxCDN

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

یک مزیت استفاده از CDN بوت استرپ:

بسیاری از کاربران تاکنون بوت استرپ را هنگام ملاقات سایت دیگر از MaxCDN دانلود کرده‌اند. بعنوان نتیجه، هنگامیکه افراد به سایت شما مراجعه می‌کنند، بوت استرپ از Cache بارگذاری می‌شود که منجر به زمان بارگذاری سریع‌تر می‌شود.

همچنین اکثر CDNها تضمین می‌کنند هنگامیکه کاربری یک فایل را از آنها درخواست می‌کند، آن فایل از نزدیکترین سرور به کاربر ارسال شود، که این مورد هم منجر به بارگذاری سریع‌تر می‌شود.

jQuery و Popper؟

بوت استرپ ۴ از jQuery و Popper.js برای مؤلفه‌های جاوا اسکریپت استفاده می‌کند (مانند modalها، popoverها، راهنمای ابزار (tooltip) و غیره). با این حال اگر فقط از قسمت CSS بوت استرپ استفاده می‌کنید، به آنها نیازی ندارید.

مؤلفه‌هایی را نشان می‌دهند که به jQuery نیاز دارند »

این موارد عبارتند از:

هشدارهای بسته شونده
کلیدها و چک باکس ها/radio buttonها برای حالت‌های قابل تغییر (toggling)
Carousel برای اسلایدها، کنترل‌ها و شاخص‌ها (Indicators)
Collapse برای محتوای قابل تغییر (toggling)
منوهای کرکره‌ای (همچنین برای قرار گرفتن در موقعت صحیح به Popper.js مناسب هم نیاز دارد)
Modalها (باز و بسته)
Navbar (برای منوهای پنهان شونده)
راهنمای ابزارها و popoverها (همچنین برای قرار گرفتن در موقعت صحیح به Popper.js مناسب هم نیاز دارد)
Scrollspy برای رفتار پیمایشی و بروزرسانی‌های مربوط به جهت‌یابی

دانلود بوت استرپ ۴

اگر می‌خواهید بوت استرپ را دانلود و خودتان میزبانی کنید، به آدرس getbootstrap.com رفته و دستورالعمل‌های ذکر شده در سایت را دنبال کنید.

ایجاد اولین صفحه وب با بوت استرپ ۴

۱. اضافه کردن doctype (به فارسی: نوع سند) HTML5

بوت استرپ ۴ از عناصر HTML و ویژگی‌های CSS استفاده می‌کند که نیازمند نوع سند HTML5 هستند.

همیشه HTML5 doctype را در ابتدای صفحه به همراه صفت lang و مجموعه کاراکتر صحیح ذکر (Include) کنید:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

۲. بوت استرپ ۴، Mobile-first است

بوت استرپ ۴ به‌منظور واکنش‌گرا بودن در دستگاه‌های موبایل طراحی شده‌است. طرح‌های Mobile-first بخشی از چارچوب مرکزی هستند.

برای اطمینان از تفسیر (Rendering) و بزرگنمایی لمسی مناسب، تگ <meta> ذکر شده در پایین را درون عنصر <head> اضافه کنید:

<meta name="viewport" content="width=device-width, initial-scale=1">

بخش width=device-width عرض صفحه را به گونه‌ای تنظیم می‌کند که متناسب با عرض صفحه نمایش دستگاه شود (که بسته به نوع دستگاه متفاوت خواهد بود).

قسمت initial-scale=1 میزان بزرگنمایی اولیه را تنظیم می‌کند هنگامیکه صفحه برای اولین بار بارگذاری می‌شود.

۳. ظرف ها (Containers)

بوت استرپ ۴ به یک عنصر ظرف (Containing Element) احتیاج دارد تا محتوای سایت را پوشش دهد.

دو کلاس کانتینر برای انتخاب وجود دارد:

کلاس .container یک ظرف واکنش گرا با طول ثابت را فراهم می‌کند
کلاس .container-fluid یک ظرف با عرض کامل فراهم می‌کند که عرض کل صفحه نمایش را می‌پوشاند

دو صفحه ساده بوت استرپ ۴

مثال زیر کد مربوط به یک صفحه ساده بوت استرپ را نشان می‌دهد (با ظرف واکنش گرایی با عرض ثابت):

مثال ظرف

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

مشاهدهٔ نتیجه

مثال زیر کد مربوط به یک صفحه ساده یوت استرپ ۴ را نشان می‌دهد (با ظرف دارای عرض کامل):

مثال Container Fluid

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

مشاهدهٔ نتیجه

صفحهٔ بعد »

« صفحهٔ قبل

منابع آموزشی

↑ w3schools.com: Bootstrap Get Started

[1] w3schools.com: Bootstrap Get Started

[۱]

شروع کار با بوت استرپ ۴

محتویات

بوت استرپ چیست؟

مثال بوت استرپ ۴

مثال بوت استرپ ۴

بوت استرپ ۳ در مقابل بوت استرپ ۴

بوت استرپ چیست؟

چرا از بوت استرپ استفاده کنیم؟

بوت استرپ ۴ را از کجا به دست آوریم؟

CDN بوت استرپ ۴

MaxCDN

دانلود بوت استرپ ۴

ایجاد اولین صفحه وب با بوت استرپ ۴

۱. اضافه کردن doctype (به فارسی: نوع سند) HTML5

۲. بوت استرپ ۴، Mobile-first است

۳. ظرف ها (Containers)

دو صفحه ساده بوت استرپ ۴

مثال ظرف

مثال Container Fluid

منابع آموزشی

منوی ناوبری

جستجو