بوت استرپ چیست - آشنایی کامل با Bootstrap

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

به اولین قسمت از سری آموزشی Bootstrap 4 خوش آمدید! در این دوره قصد آشنایی با این فریم ورک محبوب را داریم.

بوت استرپ چیست ؟ Bootstrap در واقع مشهور ترین و محبوب ترین فریم ورک (در قسمت front-end یا ظاهر سایت) HTML و CSS و جاوا اسکریپت برای ساخت وب سایت های واکنش گرا و mobile friendly (سازگار با تلفن های همراه) است. این فریم ورک دارای انواع قابلیت ها آماده شده برای فرم ها، دکمه ها، گالری ها، جدول ها و ... است که کار طراحی را برای شما بسیار آسان تر می کند و از طرفی خبر خوب این است که این فریم ورک کاملا رایگان است.

یک مثال از یک صفحه ی وب ساخته شده با این فریم ورک را ببینید:

<!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.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/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>

مشاهده ی خروجی در JSBin

همانطور که می بینید این صفحه ی وب کاملا واکنش گراست و می تواند خودش را با گوشی های همراه وفق دهد. سعی کرده ایم در این دوره ی آموزشی انواع و اقسام مثال های مختلف را برایتان بیاوریم تا به صورت عملی و کامل با فریم ورک bootstrap آشنا شوید.

تفاوت Bootstrap 3 و Bootstrap 4

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

پیشنهاد ما به شما این است که اگر دوست دارید از Bootstrap 3 استفاده کنید (به دلیل پشتیبانی از آیکون ها و...) این کار را انجام دهید اما نه به خاطر پشتیبانی از مرورگرهایی مثل IE8 و IE9. شما به عنوان توسعه دهنده وظیفه دارید که مراقب کاربرانتان باشید و از آنها محافظت کنید. IE8 و IE9 اصلا مرورگر نیستند چه برسد به اینکه بخواهند امن باشند! در حقیقت نباید در سایت خود برای IE8 و قبل تر نیز پشتیبانی ایجاد کنید تا چند صدم درصد کاربرانی که ممکن است هنوز از آن ها استفاده کنند آن ها را کنار بگذارند. این تفکر پشتیبانی از IE8 و IE9 بسیار تفکر اشتباهی است و مکررا از سوی توسعه دهندگان گوگل و متخصصان این زمینه توصیه شده است که سعی نکنید برای تکنولوژی های بسیار بسیار قدیمی پشتیبانی ایجاد کنید. به طور مثال آقای کریس جکسون، رئیس بخش امنیت مایکروسافت، از کاربران می‌خواهد که تنها در مواردی که هیچ چاره‌ای نیست از IE استفاده کنند. او بر این عقیده است که نقش اینترنت اکسپلورر به مرور زمان تغییر کرده و دیگر نمی‌توان آن را یک مرورگر دانست (بلکه تنها ابزاری برای همخوانی با برخی وبسایت‌های قدیمی است) و افراد عادی و توسعه دهندگان نباید از آن استفاده کنند.

قالب کلی bootstrap

مثال زیر را برای شما آماده کرده ایم تا با قالب کلی و شکل کلی bootstrap آشنا شوید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Website 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.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
  .fakeimg {
    height: 200px;
    background: #aaa;
  }
  </style>
</head>
<body>

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

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>    
    </ul>
  </div>  
</nav>

<div class="container" style="margin-top:30px">
  <div class="row">
    <div class="col-sm-4">
      <h2>About Me</h2>
      <h5>Photo of me:</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
      <h3>Some Links</h3>
      <p>Lorem ipsum dolor sit ame.</p>
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <hr class="d-sm-none">
    </div>
    <div class="col-sm-8">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
      <br>
      <h2>TITLE HEADING</h2>
      <h5>Title description, Sep 2, 2017</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
  </div>
</div>

<div class="jumbotron text-center" style="margin-bottom:0">
  <p>Footer</p>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

اگر کدها را نمیفهمید جای نگرانی نیست، این مثال تنها برای نمایش ظاهر زیبای bootstrap است!

چرا از bootstrap استفاده کنیم؟

دلایل اصلی استفاده از bootstrap موارد زیر هستند:

استفاده و یادگیری ساده: برای کار با bootstrap تنها به دانش عمومی در زمینه ی HTML و CSS نیاز دارید.
قابلیت های واکنش گرا (responsive): قابلیت های واکنش گرای bootstrap باعث می شوند طراحی با آن برای گوشی های همراه و تبلت ها نیز مناسب باشد و محتوا را در بهترین شکل ممکن نمایش دهد.
روش Mobile-first: بحث Mobile-first یعنی طراحی (از منظر کدها) اول برای گوشی های همراه انجام شود و سپس برای کامپیوترها. گوگل این روش را ترجیح می دهد.
پشتیبانی از مرورگرهای مختلف: Bootstrap 4 با تمام مرورگرهای مدرن و امروزی سازگاری دارد (کروم، فایرفاکس، Edge و IE10 به بالا، سافاری، اپرا).

برای استفاده از Bootstrap می توان به دو روش عمل کرد:

اضافه کردن Bootstrap به سند خود از طریق یک CND
دانلود کردن Bootstrap از طریق سایت رسمی getbootstrap.com

خب دوستان عزیز در این قسمت به این پرداختیم که بوت استرپ چیست و چرا از آن استفاده می کنیم؟ در قسمت بعدی کار با Bootstrap را شروع خواهیم کرد بنابراین با ما همراه باشید.

دیدگاه‌های شما (4 دیدگاه)

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

elmira

27 مهر 1399

سلام. ما چند تا تگ معنایی مثل header و Article و aside و footer در html داریم، میخوام بدونم کلاً کدوم یکی از این تگها در بوتسترپ 4 وجود داره؟

سید علیرضا محمد مرادی

09 مرداد 1399

سلام عزیز بوتسترپ یک کتابخانه است نه یک فریمورک.

محمدجواد

04 تیر 1399

CDN رو نوشتین CND !! 0_0

علی

01 آذر 1398

سلام در بوت استرپ ۴ چطور صفحه را راست چین کنیم در بوت استرپ ۳ یه لینکی داشت به کدهامون اضافه می کردیم راست چین می شد الان در بوت استرپ ۴ اون کد قبلی راست چین جواب نمیده باید چطور صفحه را راست چین کنیم؟

امیر زوارمی

04 آذر 1398

سلام دوست عزیز، برای موارد جزئی تر باید کد ها رو دستی تغییر بدید (مثلا با تعیین direction در کد های CSS و غیره اما برای کل پروژه بهتره از سرویس ها و کتابخانه هایی مثل لینک های زیر استفاده کنید: https://www.npmjs.com/package/bootstrap-v4-rtl https://bootstrap.rtlcss.com/

آشنایی با Bootstrap 4

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

تفاوت Bootstrap 3 و Bootstrap 4

قالب کلی bootstrap

چرا از bootstrap استفاده کنیم؟