آموزش عملی Bootstrap 4 با ساخت صفحه اصلی یک وب سایت

آموزش عملی Bootstrap 4 با ساخت صفحه اصلی یک وب سایت

 

امروزه بوت استرپ محبوب ترین چارچوب جلویی (رابط کاربری) HTML / CSS است. بوت استرپ دارای ویژگی های زیادی است و به شما کمک می کند با سرعت و سهولت بیشتری یک وب سایت واکنش گرا (responsive) ایجاد کنید.

آیا به آشنایی با بوت استرپ  و آموزش گام به گام طراحی یک وب سایت با آن نیاز دارید؟ این مقاله آموزشی مکان مناسبی برای شروع است.

در قسمت اول مقاله ، می خواهم نقاط قوت و مزایای اصلی بوت استرپ را به شما نشان دهم.

در قسمت دوم ، به شما یاد می دهم که چگونه از پایه ، یک صفحه اصلی سایت را با بوت استرپ بسازید.

من سعی می کنم همه چیز را گام به گام توصیف کنم ، بنابراین این آموزش حتی برای مبتدیان بوت استرپ نیز قابل استفاده است.

پس از پایان آموزش ، یک صفحه زیبا و کاربردی با بخشهای مختلف - خدمات ، نقل قول مورد علاقه ، نمونه کارها و موارد دیگر - خواهید داشت. نتیجه نهایی کار را در اینجا ببینید. پرسش هایتان در مورد این آموزش را نیز می توانید از طریق ایمیل help4usr@gmail.com به من (مهندس محمدرضا امانی) ارسال کنید.

 

 

فهرست مطالب

 

• بوت استرپ چیست؟
• مزایای اصلی بوت استرپ
• نحوه استفاده از Bootstrap را بیاموزید و اولین وب سایت Bootstrap خود را بسازید
  1. طراحی یک سند HTML ساده با بوت استرپ
  2. ناوبری - افزودن Navbar
  3. افزودن یک بخش Hero به بالای صفحه
  4. افزودن بخش خدمات
  5. افزودن بخش نمونه کارها
  6. افزودن بخش نقل قول مورد علاقه
  7. افزودن پاورقی

• جمع بندی مقاله

 

 

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

 

• Bootstrap یک چارچوب جلویی (Front-end) مدرن برای سرعت بخشیدن و کمک به شما در زمینه توسعه وب سایت است. (چارچوب Front-end به این معنی است که می تواند به شما در زمینه چیدمان و طراحی وب سایت کمک کند ، اما نمی تواند کارهای پس زمینه ای (back-end) مانند ارسال ایمیل ، نظارت بر سبد خرید مشتری یا دسترسی به پایگاه داده را انجام دهد.)

 

• این فریم ورک اساساً از مجموعه دو فایل تشکیل شده است - Bootstrap.js و Bootstrap.css. اگر آنها را در صفحه HTML یا وب سایت خود قرار دهید ، به شما امکان می دهد از مولفه ها و ویژگی های آن استفاده کنید.

 

 

مزایای اصلی بوت استرپ

 

• شبکه واکنش گرا (Responsive grid) - به سرعت صفحه وب خود را با استفاده از شبکه Bootstrap طرح بندی کنید - به سرعت ستون ها و ردیف ها را ایجاد کنید. آیا به 4 مورد پشت سر هم روی دسک تاپ ، 3 مورد در رایانه لوحی و فقط 1 مورد در تلفن همراه نیاز دارید؟ با کمک بوت استرپ ، مشکلی نیست!
• انتخاب گسترده ای از اجزای HTML از پیش ساخته شده. بوت استرپ همراه با طیف گسترده ای از اجزای سازنده است که حتی بیشتر از شبکه واکنش گرا ، پیشرفت شما را تسریع می کند. برای ذکر چند موردی که می توانید در هر نوع پروژه ای استفاده کنید:
  • دکمه ها (با انواع رنگ - دکمه اولیه ، دکمه ثانویه  ، انواع پیراخط یا خطوط اطراف دکمه و موارد دیگر)
  • navbar یا نوار ناوبری - آیا تا به حال فکر کرده اید که چگونه یک ناوبری واکنش گرا و خوب از پایه ایجاد کنید ، چگونه ناوبری افقی را در دستگاه های بزرگتر مانند لپ تاپ ها و رایانه ها نمایش دهید و در تلفن های همراه آن را به عنوان یک ناوبری کشویی نمایش دهید که پس از کلیک روی نماد منو  ظاهر می شود؟ خوب ، من مطمئناً قبل از شروع استفاده از Botstrap این کار را کرده ام ولی ساخت عناصر ناوبری سفارشی و انعطاف پذیر با بوت استرپ واقعاً آسان تر است.
  • کارت ها
  • کشویی ها
  • ورودی ها و دکمه ها
  • صفحه بندی
  • اسلاید ها
  • راهنماها و هشدارها
  • و خیلی بیشتر…
• سازگاری بین مرورگرها -  Bootstrap 4 از همه مرورگرهای وب مدرن دسک تاپ و موبایل و همچنین مرورگرهای قدیمی تر مانند IE 11 پشتیبانی می کند.
• استفاده آسان - برای شروع فقط به یک دانش اولیه HTML و CSS نیاز دارید.
• توسعه فعال - بوت استرپ در حال توسعه فعال است ، به این معنی که ویژگی های جدید ، رفع اشکال و بهبودها به طور مکرر منتشر می شوند.
• انعطاف پذیری
• جامعه بزرگ - یک اکوسیستم کامل در اطراف Bootstrap شکل گرفته است. شما انتخاب های زیادی از مضامین ، الگوها ، قطعه ها و پلاگین های سفارشی JavaScript دارید که مخصوص کاربران Bootstrap ساخته شده اند. همچنین آموزش های زیادی برای کمک به شما در شروع به کار با بوت استرپ وجود دارد.

 

 

نحوه استفاده از Bootstrap را بیاموزید و اولین وب سایت Bootstrap خود را بسازید

 

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

ما یک صفحه واکنش گرای اولیه (اما کاربردی) ایجاد خواهیم کرد که می تواند به یک نقطه شروع خوب برای ارائه نمونه کارها ، وب سایت شرکت یا صفحه اصلی سایت شما تبدیل شود.

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

نتیجه کار را می توانید در زیر ببینید:

 

طراحی صفحه را شروع می کنیم:

 

 

طراحی یک سند HTML ساده با بوت استرپ

 

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

 

یک صفحه خالی بوت استرپ به این شکل است:

<!DOCTYPE html>
  <html>
  
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Amani</title>
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="robots" content="all,follow">
      <!-- Bootstrap CSS-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
      <!--  استایل سفارش برای تغییرات مورد نیاز شما  -->
      <link rel="stylesheet" href="css/custom.css">
      <!--   ترفندهای لازم برای مرورگر های قدیمی اینترنت اکسپلورر -->
      <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
  </head>
  
  <body>
  
      <h1>Hello world. I'm in Bootstrap!</h1>
  
      <!--  فایل های جاوا اسکریپت  -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
  </body>
  
  </html>

 

نتیجه:

توضیحات کوتاهی در مورد کد بالا:

 

• در این کد اساسی ترین و همچنین ضروری ترین برچسب های HTML وجود دارد: doctype ، html ، head ، body.
• head مکانی است که ما می توانیم پیوندی به شیوه نامه بوت استرپ (bootstrap.min.css) و همچنین شیوه نامه سفارشی خود (css/custom.css) قرار دهیم.
• head همچنین حاوی یک برچسب مهم برای رفتار واکنش گرای صفحه است - تگ meta ی دارای ویژگی "name="viewport
• همچنین باید جاوا اسکریپت بوت استرپ را نیز در آن بگنجانیم. پیش از این ، لازم بود وابستگی PopperJS آن را نیز جداگانه وارد کنید. اکنون ، یک روش خوب وجود دارد که می توانید با استفاده از فایل مخلوط شده bootstrap.bundle.min.js ، همه موارد را یکجا در آن بگنجانید. این فایل از قبل حاوی نسخه های کم حجم شده PopperJS و Bootstrap است ، بنابراین ما فقط باید این فایل را به صفحه اضافه کنیم.

 

 

ناوبری - افزودن Navbar

 

بوت استرپ شامل یک مولفه ناوبری بسیار مفید به نام Navbar است.

 

ویژگی ها و مزایای اصلی آن عبارتند از:

 

• به طور خودکار در نماهای دید کوچکتر (معمولاً تلفن همراه و رایانه لوحی) تغییر شکل می دهد و کوچکتر می شود. این رفتار فقط با افزودن یا حذف یک کلاس HTML ساده کنترل می شود. همچنین ، یک دکمه از پیش ساخته شده به طور خودکار ظاهر می شود تا Navbar را در حالت جمع شده در دستگاه های کوچکتر باز کند.
• می تواند شامل عناصر مختلفی باشد - پیوندهای ناوبری ، فرم جستجو ، لوگوی برند یا متن. همه چیز از قبل به درستی تراز شده و نیازی نیست که حتی درباره آن فکر کنید.
• Bootstrap با دو طرح navbar از پیش ساخته شده ارائه می شود - یکی با پس زمینه روشن و پیوندهای تیره و دیگری با پیوندهای ناوبری روشن در پس زمینه تیره. (گرچه مجبور نیستید از این طرح ها استفاده کنید و می توانید آن را کاملاً مطابق میل خود تنظیم کنید).

 

در اینجا کد مربوط به نوار ناوبری را می بینید:

<!-- navbar-->
  <nav class="navbar navbar-light navbar-expand-lg fixed-top shadow-sm bg-white"><a href="index.html" class="navbar-brand">Mohamadreza Amani</a>
    <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button>
    <div id="navbarSupportedContent" class="collapse navbar-collapse">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item"><a href="#" class="nav-link">About Us</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Features</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Testimonials</a></li>
      </ul>
      <div class="navbar-text ml-lg-3">
        <a href="#" class="btn btn-primary text-white shadow">Sign Up</a>
      </div>
    </div>
  </nav>

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

با اینکه از هیچ استایل سفارشی استفاده نکردیم اما از برخی از کلاس های بوت استرپ استفاده کرده ایم که ممکن است در نگاه اول کمی پیچیده به نظر برسد اما نترسید - اینطور نیست.

 

برای سادگی ، توضیحات آن را به چند قطعه کوچکتر تقسیم می کنم.

 

آیتم اصلی نوار ناوبری:

در ابتدا ، من Navbar را از عنصر معمولی nav در html5 با اضافه کردن کلاس navbar به آن ایجاد می کنم. این کلاس اصلی navbar در بوت استرپ است.

 

همچنین چند کلاس اصلاح کننده به آن اضافه می کنم:

 

• navbar-light - این کلاس اصلاح کننده ، طراحی از پیش ساخته شده ای با رنگ های روشن را برای نوار ناوبری فعال می کند - اساساً ، این کلاس ، پیوندها و حالت های مختلف آنها (مثلاً حالت های active, hover, focus) را رنگ آمیزی می کند.
• navbar-expand-lg - کلاس مهمی که کنترل می کند در کدام Viewport ها (منظور از viewport اندازه صفحه است که در دستگاه های مختلف متفاوت است) Navbar کوچک می شود و از کدام Viewport ها گسترش یابد (به عنوان مثال ، در حالت گسترش یافته ، آیکون منوی همبرگری و منوی Navbar کوچک شده وجود ندارد). در این حالت ، کلاس navbar-expand-lg به معنی گسترش نوار در viewport های lg و بزرگتر است.
• fixed-top - این کلاس نوار ناوبری را به بالای صفحه متصل می کند. اگر آن را وارد نکنید ، نوار ناوبری با صفحه پیمایش (scroll) می شود.
• و در آخر ، چند کلاس به اصطلاح سودمند که عملکردی را کنترل نمی کنند اما فقط برای اهداف ظاهری طراحی اضافه می شوند - shadow-sm (سایه کوچک اضافه می کند) و bg-white (زمینه سفید اضافه می کند)

 

لوگوی Navbar:

شما معمولاً لوگو یا برند خود را در نوار ناوبری دارید. برای اطمینان از فاصله و قالب بندی مناسب ، کلاس navbar-brand را به آن اضافه کنید.

 

دکمه تغییر حالت نوار ناوبری (Navbar toggler):

این دکمه ای است که منوی navbar را در حالت جمع شده (collapse) در صفحه های کوچک مثلاً موبایل تغییر می دهد. بر اساس کلاس *-navbar-expand ، این دکمه به طور خودکار درصفحه های بزرگ ، پنهان می شود.

 

 

افزودن یک بخش Hero به بالای صفحه

 

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

هدف بخش hero معرفی سریع محتوای صفحه وب به بازدید کننده ، اطمینان بازدید کننده از قرار گرفتن در مکان مناسب و ماندن او در سایت شما است.

 

ما برای اولین بار با شبکه (grid) بوت استرپ در کد بخش Hero روبرو خواهیم شد. پس قبل از هر چیز دیگری ، ابتدا ببینیم grid چگونه کار می کند.

 

 

شبکه grid در بوت استرپ

 

سیستم شبکه بندی (grid) بوت استرپ از ترکیب محفظه (container) ها ، ردیف ها و ستون ها برای چیدمان و ترازبندی محتوا استفاده می کند. با flexbox ساخته شده و کاملاً واکنش گرا است.

در شبکه bootstrap هر سطر ۱۲ واحد است. این بدان معناست که وقتی یک سطر (یک تگ با کلاس row) را در یک طرح بوت استرپ قرار می دهید ، می توانید آن را حداکثر به 12 ستون تقسیم کنید. همچنین ، یک ستون می تواند بیش از یک واحد را اشغال کند ، بنابراین تگی با کلاس col-6 به این معنی است که این تگ یک ستون با ۶ واحد است ، یعنی نصف عرض ردیف را اشغال می کند (6/12).

 

یک ویژگی قدرتمند این است که می توانید با استفاده از پیشوندهای دستگاه در نام کلاس ها ، رفتار متفاوتی را بر اساس عرض دستگاه ایجاد کنید. پیشوندها و نام کلاس ها را در جدول زیر مشاهده کنید.

هر کلاس پیشوندی ستون ، برای اندازه ای که در نام آن است و اندازه های بزرگتر از آن معتبر است. به عنوان مثال ، کلاس col-md-6 برای دستگاه های متوسط (md در نام کلاس مخفف medium است) ، بزرگ (lg) و بسیار بزرگ (xl) معتبر است.

می توانید کلاس ها را با هم ترکیب کنید تا چیدمان بیشتر واکنش گرا باشد. با یک مثال بیشتر توضیح می دهم:

 

اگر از "class="col-12  col-md-6  col-xl-4 استفاده کنید به این معنی است که:

• col-12: این بلوک در 12 ستون در دستگاههای خیلی کوچک (xs) و همچنین در دستگاههای کوچک (sm) قرار دارد. (از آنجا که ما از *-col-sm استفاده نمی کنیم ، بنابراین *-col برای نقطه شکست کوچک نیز معتبر است)
• col-md-6: در 6 ستون شبکه در دستگاه های متوسط (md) و بزرگ (lg) گسترش می یابد. (باز هم ، ما رفتار را با هیچ کلاس *-col-lg اعلام نمی کنیم ، بنابراین اعلامیه متوسط در دستگاه های بزرگ نیز معتبر است)
• col-xl-4: و در آخر ، در 4 ستون در دستگاه های فوق العاده بزرگ (xl) قرار می گیرد.

 

Viewport	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
پیشوند نام کلاس ستون	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-

 

 

بخش hero

 

پس از مقدمه ای درباره شبکه بندی بوت استرپ (grid) ، وقت آن است که به بخش hero خود برگردیم. اکنون ، که می دانید شبکه بندی بوت استرپ چگونه کار می کند ،  طراحی آن آسان خواهد بود.

 

نتیجه کد این قسمت را می توانید در تصویر زیر مشاهده کنید.

ما این کد را در زیر نوار ناوبری قرار می دهیم:

<!-- Hero Section-->
  <section class="bg-light">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 order-2 order-lg-1">
          <h1>Amani template</h1>
          <p class=”lead”>Proident eu nisi commodo enim deserunt enim duis sunt nostrud anim. Sunt do sit enim veniam nostrud culpa adipisicing do ullamco occaecat et. </p>
          <p><a href=”#” class=”btn btn-primary shadow mr-2”>Discover More</a><a href=”#” class=”btn btn-outline-primary”>Some another action</a></p>
        </div>
        <div class=”col-lg-6 order-1 order-lg-2”><img src=”img/macbook.png” alt=”…” class=”img-fluid”></div>
      </div>
    </div>
  </section>

برای سادگی دوباره توضیحات آن را به چند قسمت تقسیم می کنم.

 

• من از تگ section استفاده می کنم ، فقط برای اینکه کل عنصر را داخل یک ظرف قرار بدهم و بعداً به آن padding عمودی (فضای خالی در بالا و پایین) در custom.css بدهم. من یک کلاس کاربردی دیگر از مجموعه کلاس های Bootstrap اضافه می کنم ، این بار bg-light برای دادن پس زمینه خاکستری بسیار روشن به این عنصر.
• سپس ، محتوا را درون یک تگ با کلاس container قرار می دهم. container ها ابزاری برای در مرکز قرار دادن با اضافه کردن فضای خالی در دو سمت مطالب سایت شما هستند. این به این معنی است که در دستگاه های بزرگ و بسیار بزرگ ، container عرض محتوای سایت را حداکثر تا 1140 پیکسل (در دستگاه های بسیار بزرگ) محدود می کند.
• سرانجام ، من محتوا را با قرار دادن در دو تگ <"div class = "col-lg-6> به دو ستون (که هرکدام شامل 6 واحد ستون "پایه" است) در دستگاه های lg  و بزرگتر تقسیم کرده ام. (lg دستگاه هایی با اندازه صفحه برابر یا بزرگتر از ۹۹۲ پیکسل است.)
• در نمای کوچک ، چون من برای دستگاه های کوچک (sm) ، بسیار کوچک (xs) و متوسط (md) ​​چیزی تعریف نکرده ام ، عرض 12 ستون "پایه" (به عبارت دیگر عرض کامل) می شود. این همان چیزی است که می توان به شکل صریح با تگ <"div class="col-12 col-lg-6> تعریف کرد.

اگر نگاهی به محتوای ستون ها بیندازیم ، چند کلاس مهم دیگر از Bootstrap را در آنجا پیدا خواهیم کرد:

 

دکمه ها:

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

 

پاراگراف مقدماتی:

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

 

تصاویر واکنش گرا:

کلاس مهم دیگر img-fluide است. این کلاس باعث واکنش گرایی تصویر می شود.

 

اگر در صفحه خود عکسی با عرض 1200 پیکسل داشته باشید ، این تصویر در ظرف کوچک تر مثلاً در دستگاه های کوچکی که فقط دارای عرض 300 پیکسل هست ، سرریز می شود.

اما اگر از کلاس img-fluid استفاده کنید ، حداکثر عرض تصویر به عرض viewport دستگاه تنظیم می شود. بنابراین ، هرگز کاربر شما به دلیل اندازه تصویر نیازی به پیمایش (scroll) افقی ندارد. من همیشه از این کلاس در تمام تصاویر داخل محتوای صفحه ها استفاده می کنم.

 

 

اضافه کردن بخش خدمات

 

در مرحله بعدی ، می خواهیم یک بخش خدمات ایجاد کنیم. دوباره باید از شبکه (grid) بوت استرپ و برخی کلاسهای کمکی استفاده کنیم تا این بخش نیز زیبا شود.

 

نتیجه اینگونه خواهد بود:

و این کد مربوط به بخش خدمات ما خواهد بود.

<!-- Services-->
  <section>
    <div class="container">
      <h2>خدمات</h2>
      <p class="text-muted mb-5">افتخار ما سرعت و کیفیت در ارائه بهترین خدمات به مشتریان است.</p>
      <div class=”row”>
        <div class=”col-sm-6 col-lg-4 mb-3”>
          <svg class=”lnr text-primary services-icon”>
            <use xlink:href=”#lnr-magic-wand”></use>
          </svg>
          <h6>Ex cupidatat eu</h6>
          <p class=”text-muted”>Ex cupidatat eu  fficial consequat incididunt labore occaecat ut veniam labore et cillum id et.</p>
        </div>
        <div class=”col-sm-6 col-lg-4 mb-3”>
          <svg class=”lnr text-primary services-icon”>
            <use xlink:href=”#lnr-heart”></use>
          </svg>
          <h6>Tempor aute occaecat</h6>
          <p class=”text-muted”>Tempor aute occaecat pariatur esse aute amet.</p>
        </div>
        <div class=”col-sm-6 col-lg-4 mb-3”>
          <svg class=”lnr text-primary services-icon”>
            <use xlink:href=”#lnr-rocket”></use>
          </svg>
          <h6>Voluptate ex irure</h6>
          <p class=”text-muted”>Voluptate ex irure ipsum ipsum ullamco ipsum reprehenderit non ut mollit commodo.</p>
        </div>
        <div class=”col-sm-6 col-lg-4 mb-3”>
          <svg class=”lnr text-primary services-icon”>
            <use xlink:href=”#lnr-paperclip”></use>
          </svg>
          <h6>Tempor commodo</h6>
          <p class=”text-muted”>Tempor commodo nostrud ex Lorem occaecat duis occaecat minim.</p>
        </div>
        <div class=”col-sm-6 col-lg-4 mb-3”>
          <svg class=”lnr text-primary services-icon”>
            <use xlink:href=”#lnr-screen”></use>
          </svg>
          <h6>Et fugiat sint occaecat</h6>
          <p class=”text-muted”>Et fugiat sint occaecat voluptate incididunt anim nostrud ea cillum cillum consequat.</p>
        </div>
        <div class=”col-sm-6 col-lg-4 mb-3”>
          <svg class=”lnr text-primary services-icon”>
            <use xlink:href=”#lnr-inbox”></use>
          </svg>
          <h6>Et labore tempor et</h6>
          <p class=”text-muted”>Et labore tempor et adipisicing dolor.</p>
        </div>
      </div>
    </div>
  </section>

 

کلاس های بوت استرپ:

همانطور که می بینید ، دوباره شباهت هایی با کد قبلی ما وجود دارد.

ما دوباره از container، ردیف (row) و ستون (col) استفاده می کنیم. این بار کلاس های col-sm-6 و col-lg-4 را برای هر یک از موارد خدمات انتخاب کردم.

 

هدف از بکار گیری این ترکیب کلاس ها به صورت زیر است:

 

• 1 مورد از خدمات در هر ردیف در دستگاه های xs یعنی بسیار کوچک (بدون *-col به صورت پیش فرض به معنی col-12 ، یعنی عرض کامل است)
• 2 مورد از خدمات در هر ردیف در دستگاه های sm (کوچک) و md (متوسط) از طریق کلاس  col-sm-6
• و 3 مورد از خدمات در هر ردیف در دستگاه های lg (بزرگ) و xl (بسیار بزرگ) از طریق کلاس col-lg-4.

من برای حاشیه پایین (bottom margin) نیز از کلاس کمکی mb-3 استفاده کردم.

 

آخرین کلاس Bootstrap که ما در اینجا استفاده می کنیم text-muted است. این کلاس یک رنگ متن خاکستری را روی عنصر اعمال می کند.

 

 

آیکون ها:

از آنجا که Bootstrap 4 با هیچ آیکونی ارائه نمی شود، ما از یک مجموعه آیکون رایگان استفاده می کنیم - Linear icons.

برای شروع استفاده از آن ، باید یک اسکریپت از CDN آنها به پایین Html خود ، بعد از اسکریپت Bootstrap اضافه کنیم.

ما از انواع SVG استفاده خواهیم کرد. اطلاعات بیشتر درباره نحوه استفاده را در اینجا بیابید.

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
      <script src="https://cdn.linearicons.com/free/1.0.0/svgembedder.min.js"></script>
    </body>
  </html>

 

استایل دهی به آیکون ها:

برای استایل دهی صحیح آیکون ها ، باید این خطوط را به فایل custom.css خود اضافه کنیم.

.lnr {
    display: inline-block;
    fill: currentColor;
    width: 1em;
    height: 1em;
    vertical-align: -0.05em;
    stroke-width: 1;
  }
  
  .services-icon {
    margin-bottom: 20px;
    font-size: 30px;
  }

 

 

اضافه کردن بخش نمونه کارها

 

حالا که هرچه بیشتر با شبکه (grid) در بوت استرپ آشنا می شویم ، بیایید به بررسی برخی دیگر از ویژگی های Bootstrap نیز بپردازیم.

در اینجا، ما یک بخش نمونه کارها را با استفاده از یکی دیگر از مولفه های عالی بوت استرپ یعنی کارتها ایجاد خواهیم کرد. کارت ها روشی جالب و مدرن برای ارائه لیستی از موارد مشابه هستند. از کارت ها می توان برای نمایش پست های وبلاگ ، محصولات ، نمونه کارها و غیره استفاده کرد.

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

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

 

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

<!-- Portfolio-->
  <section class="bg-light">
    <div class="container">
      <div class="fa">
        <h2>نمونه کارها</h2>
        <p class="lead text-muted mb-5">رضایت مشتری افتخار ما است. در زیر نمونه کارهای ارائه شده به برخی از مشتریان ما
          را می بینید.</p>
      </div>
      <div class="row">
        <div class="col-md-4 mb-4">
          <div class="card shadow border-0 h-100"><a href="#"><img src="img/mockup0.jpg" alt=""
                class="card-img-top"></a>
            <div class="card-body">
              <h5> <a href="#" class="text-dark">Ex cupidatat eu</a></h5>
              <p class="text-muted card-text">Ex cupidatat eu officia consequat incididunt labore occaecat ut veniam
                labore et cillum id et.</p>
              <p class="card-text"><a href="#">ادامه مطلب</a></p>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-4">
          <div class="card shadow border-0 h-100"><a href="#"><img src="img/mockup1.jpg" alt=""
                class="card-img-top"></a>
            <div class="card-body">
              <h5> <a href="#" class="text-dark">Tempor aute occaecat</a></h5>
              <p class="text-muted card-text">Tempor aute occaecat pariatur esse aute amet.</p>
              <p class="card-text"><a href="#">ادامه مطلب</a></p>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-4">
          <div class="card shadow border-0 h-100"><a href="#"><img src="img/mockup2.jpg" alt=""
                class="card-img-top"></a>
            <div class="card-body">
              <h5> <a href="#" class="text-dark">Voluptate ex irure</a></h5>
              <p class="text-muted card-text">Voluptate ex irure ipsum ipsum ullamco ipsum reprehenderit non ut mollit
                commodo.</p>
              <p class="card-text"><a href="#">ادامه مطلب</a></p>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-4">
          <div class="card shadow border-0 h-100"><a href="#"><img src="img/mockup3.jpg" alt=""
                class="card-img-top"></a>
            <div class="card-body">
              <h5> <a href="#" class="text-dark">Tempor commodo</a></h5>
              <p class="text-muted card-text">Tempor commodo nostrud ex Lorem occaecat duis occaecat minim.</p>
              <p class="card-text"><a href="#">ادامه مطلب</a></p>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-4">
          <div class="card shadow border-0 h-100"><a href="#"><img src="img/mockup4.jpg" alt=""
                class="card-img-top"></a>
            <div class="card-body">
              <h5> <a href="#" class="text-dark">Et fugiat sint occaecat</a></h5>
              <p class="text-muted card-text">Et fugiat sint occaecat voluptate incididunt anim nostrud ea cillum cillum
                consequat.</p>
              <p class="card-text"><a href="#">ادامه مطلب</a></p>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-4">
          <div class="card shadow border-0 h-100"><a href="#"><img src="img/mockup5.jpg" alt=""
                class="card-img-top"></a>
            <div class="card-body">
              <h5> <a href="#" class="text-dark">Et labore tempor et</a></h5>
              <p class="text-muted card-text">Et labore tempor et adipisicing dolor.</p>
              <p class="card-text"><a href="#">ادامه مطلب</a></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

 

 

کارت های بوت استرپ

 

برای ایجاد یک کارت در بوت استرپ ، تمام کاری که شما باید انجام دهید این است که تگ <div class = "card"> </div> را ایجاد کنید و مقداری محتوا در آن قرار دهید. این به طور خودکار یک خط مرزی (border) در اطراف آن ایجاد می کند حتی برای زیبایی بیشتر گوشه های مستطیل کارت هم کمی خمیده ترسیم می شود.

 

برای نمونه کارها ، من از چند کلاس اصلاح کننده روی کارتها استفاده می کنم ، بعضی از آنها از قبل برای ما شناخته شده اند:

• کلاس shadow  - سایه اضافه می کند
• کلاس border-0 - وقتی در اطراف کارت سایه ای داریم و از کارت در زمینه متضاد استفاده می کنیم ، با استفاده از این کلاس کمکی ، خط مرزی خاکستری روشن را از پیرامون کارت حذف می کنیم.
• کلاس h-100 - ارتفاع کارت را 100٪  تگ والدش می کند. از آنجا که تمام ستون های Bootstrap در یک ردیف به طور پیش فرض دارای ارتفاع یکسانی هستند ، استفاده از h-100 روی یک کارت داخل ستون ، ارتفاع همه آنها را به همان اندازه می کند.

 

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

• تصویر کارت - برای قالب بندی صحیح تصویر در کارت ، تصویر به یک کلاس card-img-top نیاز دارد. این باعث می شود گوشه های بالایی تصویر به تبعیت از خمیدگی گوشه های بالایی کارت خمیده شود.
• بدنه کارت  - کلاس card-body باعث ایجاد کمی فضای خالی (padding) اطراف محتوای کارت می شود تا محتوا به گوشه های کارت نچسبد.
• متن کارت - کلاس card-text به هیچ وجه لازم نیست اما زمانی که تعداد دقیق پاراگراف درون کارت را نمی دانید ، می تواند مفید باشد. اگر این کلاس را به همه آنها اضافه کنید ، در پاراگراف آخر حاشیه پایین به طور خودکار روی 0 تنظیم می شود.

 

و در اینجا تصویری از نتیجه:

به نظر من این یک نمونه کار بسیار مناسب است ، بنابراین بیایید به بخش دیگری برویم.

 

 

افزودن بخش نقل قول مورد علاقه

 

Bootstrap برای عنصر blockquote نیز یک مولفه مخصوص دارد.

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

استفاده از آن بسیار آسان است - فقط یک کلاس blockquote را به یک عنصر blockquote اضافه کنید.

برای اینکه جلوه کمی جالب تری به آن بدهیم ، یک نماد را نیز به بالای نقل قول اضافه می کنم.

<!-- Quote-->
  <section>
    <div class="container">
      <blockquote class="blockquote text-center mb-0">
        <svg class="lnr text-muted quote-icon pull-left">
          <use xlink:href="#lnr-heart"> </use>
        </svg>
        <p class="mb-0">There is no place like 127.0.0.1</p>
        <footer class="blockquote-footer">Someone famous in
          <cite title="Source Title">Source Title</cite>
        </footer>
      </blockquote>
    </div>
  </section>

 

نتیجه در تصویر زیر دیده می شود:

 

 

اضافه کردن پاورقی

 

همانطور که می بینید کار با Bootstrap بسیار آسان است ، ما می توانیم به سادگی بخشهای بیشتری را به صفحه اضافه کنیم.

 

ما اکنون با آخرین بخش که پاورقی هست ، کار را تمام می کنیم.

 

کد این قسمت نیز بسیار ساده است. ما از ستون های شبکه ای Bootstrap استفاده می کنیم و پس زمینه و فاصله را با کلاس های کمکی دوباره تنظیم می کنیم.

 

توضیحات بیشتر را در ادامه پس از کد ببینید.

<!-- Footer-->
  <div class="py-5 bg-light">
    <div class="container">
      <div class="row">
        <div class="col-lg-4 mb-4 mb-lg-0">
          <h5>Mohamadreza Amani</h5>
          <ul class="contact-info list-unstyled">
            <li><a href="mailto:help4usr@gmail.com" class="text-dark">help4usr@gmail.com</a></li>
            <li><a href="tel:123456789" class="text-dark">+00 123 456 789</a></li>
          </ul>
          <p class="text-muted">Laborum aute enim consectetur eu laboris commodo.</p>
        </div>
        <div class="col-lg-4 col-md-6">
          <h5>Pages</h5>
          <ul class="links list-unstyled">
            <li> <a href="#" class="text-muted">Nisi in commodo</a></li>
            <li> <a href="#" class="text-muted">reprehenderit</a></li>
            <li> <a href="#" class="text-muted">Nostrud</a></li>
            <li> <a href="#" class="text-muted">Et eu eu</a></li>
          </ul>
        </div>
        <div class="col-lg-4 col-md-6">
          <h5>Favourites</h5>
          <ul class="links list-unstyled">
            <li> <a href="#" class="text-muted">Minim labore nulla</a></li>
            <li> <a href="#" class="text-muted">Nulla qui nisi</a></li>
            <li> <a href="#" class="text-muted">Iris Vor Arnim</a></li>
            <li> <a href="#" class="text-muted">Consectetur cupidatat</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="py-3 bg-dark text-white">
    <div class="container">
      <div class="row">
        <div class="col-md-7 text-center text-md-left">
          <p class="mb-md-0">&copy; 2018 Your company. All rights reserved. </p>
        </div>
        <div class="col-md-5 text-center text-md-right">
          <p class="mb-0">Template By <a href="mailto:help4usr@gmail.com" class="external text-white">Amani</a> </p>
        </div>
      </div>
    </div>
  </div>

 

کلاسهای کمکی جدید:

• کلاس های py-3  و py-5 - این دو کلاس padding عمودی (فضای خالی بالا و پایین تگ ها) را اضافه می کنند. py-3 برای padding عمودی 1rem است و py-5 برای padding عمودی 3rem است
• کلاس های mb-4  وmb-lg-0 - کلاسهای کمکی با پیشوند واکنش گرا. همانطور که از نام کلاس مشخص است ، mb-4 حاشیه پایین (bottom margin) را به عنصر اضافه می کند. (4 = 1.5rem) و ما از آن در ترکیب با کلاس mb-lg-0 برای دستیابی به رفتار واکنش گرا استفاده می کنیم. اضافه کردن کلاس mb-lg-0 به این عنصر باعث می شود که در viewport های با اندازه lg و بزرگتر، این عنصر حاشیه پایین خود را روی 0 تنظیم می کند.
• کلاس های text-center  و text-md-left - به طور مشابه ، این ترکیب کلاسها بلوک متن را در نمای کوچک در مرکز قرار می دهد اما با شروع از viewport با اندازه md ، متن به سمت چپ تراز می شود.

 

 

جمع بندی

 

اگر موفق شدید به اینجا برسید تبریک می گویم! این آخرین قسمت آموزش است.

امیدوارم با شیوه استفاده از بوت استرپ آشنا شده باشید. من سعی کردم تمام اصول لازم برای ساخت یک صفحه ساده با استفاده از بوت استرپ 4 را توضیح دهم و شما باید اکنون آماده باشید تا به تنهایی شروع به ساختن صفحات وب با بوت استرپ کنید. بنابراین ، نوبت شما است.

 

مردم اغلب از من می پرسند که چه چیزی باید بسازند؟ برای کسب مهارت بیشتری در بوت استرپ چه پروژه ای را باید شروع کنند؟

 

پاسخ من معمولاً این است:

از دوستان یا اعضای خانواده خود بپرسید که آیا هر یک از آنها به وب سایت احتیاج دارند. شرط می بندم شما بیش از یک نفر را پیدا خواهید کرد که از داشتن یک وب سایت زیبا با طراحی شما هیجان زده خواهد شد!

 

با آرزوی موفقیت در اکتشاف های آینده تان در طراحی وب!

مهندس محمدرضا امانی help4usr@gmail.com