آموزش Bootstrap

سلام با بخش اول آموزش Bootstrap 4 ( از دوره آموزش طراحی سایت ) در خدمت شما هستیم

بوت استرپ Bootstrap یک چهارچوب کاری رایگان طراحی سمت کاربر یا فرانت اند (front end) است که به منظور طراحی سریع تر و ساده تر برنامه ها و وب سایت های اینترنتی ایجاد شده است.

• بوت استرپ (Bootstrap) شامل تمپلیت های آماده مبتنی بر HTML و CSS برای کار با فرم ها (Forms)، دکمه ها (Buttons)، جدول ها (Tables)، نوار پیمایش مسیر (Navigation)، تصاویر (Images)، کادرهای محاوره ای (Models)، اسلایدها، کار با متن (Typography) و ابزارهای بسیار دیگری است. چهارچوب کاری Bootstrap حاوی افزونه (plug-in) های آماده بسیاری مبتنی بر جاوا اسکریپت، جهت پویا نمایی سایت ها نیز می باشد.
• آموزش طراحی سایت
• چهارچوب کاری بوت استرپ (Bootstrap)، به سادگی امکان طراحی وب واکنش گرا و انعطاف پذیر (Responsive Design) جهت نمایش وب سایت ها در انواع و سایزهای مختلف نمایشگر را فراهم کرده است.

راهنمایی : طراحی وب واکنش گرا (Responsive Web Design) چیست؟

طراحی وب واکنش گرا یا Responsive Design به روش طراحی سایت ای گفته می شود که در آن صفحات وب، به صورت اتوماتیک و هوشمند، اندازه و نحوه چیدمان اجزای خود را بر حسب ابعاد دستگاه نمایش دهنده صفحه، از موبایل های کوچک گرفته تا مانیتورهای بزرگ، تنظیم کرده تا بهترین حالت نمایش را داشته باشند.

یک مثال ساده طراحی وب سایت با Bootstrap 4:

در کد مثال عملی زیر، یک صفحه وب معمولی را با استفاده از چهارچوب کاری Bootstrap 4 ، طراحی کرده ایم.
این صفحه دارای یک هدر و سه ستون متنی است که به صورت اتوماتیک و برحسب اندازه صفحه نمایش دهنده سایت، چیدمان و عرض اجزای آن تنظیم می شود .

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

مثال 1:

<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>

مقایسه Bootstrap 4 با Bootstrap 3:

بوت استرپ Bootstrap 4 (بوت استرپ) ورژن جدیدتر بوت استرپ است که با کامپوننت های جدید، Stylesheet سریع تر و قابلیت واکنش گرا بودن بیشتر و بهتر.

بوت استرپ Bootstrap 4 از تمامی پلتفرم ها و آخرین نسخه های مرورگرهای اصلی، پشتیبانی می کند ولی از مرورگرهای 9IE و پایین تر، پشتیبانی نمی کند.

راهنمایی 1 :

اگر می خواهید Bootstrap را در مرورگرهای IE8و IE9 به کار ببرید، بایستی از Bootstrap ورژن 3، استفاده کنید. ورژن 3 ، پایدارترین نسخه Bootstrap است و همچنان توسط سیستم Bootstrap، جهت برطرف کردن باگ های خطرناک و ارائه مستندات آموزشی، پشتیبانی می شود.

آموزش طراحی سایت

راهنمایی 2 - عدم پشتیبانی از برخی از آیکون ها :

بوت استرپ Bootstrap 4 از آیکون های BS3 Glyphicons، پشتیبانی نمی کند. در Bootstrap 4 از Font Awesome و سایر کتابخانه های آماده آیکون، استفاده نمایید.

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

مزایای استفاده از Bootstrap عبارتند از :

• راحتی در استفاده : هر کاربری حتی با دانش کمی از HTML و CSS می تواند به راحتی شروع به استفاده از Bootstrap 4 نماید.
• قابلیت واکنش گرایی بیشتر: در نسخه Bootstrap 4، قابلیت طراحی وب واکنش گرا یا Responsive Design به وسیله CSS بهتر شده و برای انواع موبایل ها، تبلت ها و کامپیوترهای رومیزی تنظیم گشته است.
• راهکار طراحی اولیه جهت موبایل (Mobile First Design): در نسخه جدید بوت استرپ 4، استایل های طراحی جهت موبایل (دستگاه با صفحات کوچک)، به عنوان هسته اصلی چهارچوب کاری Bootstrap 4 تعریف شده است.
• سازگار بودن با انواع مرورگر : بوت استرپ 4 با تمامی مرورگرهای اصلی از جمله کروم، فایرفاکس، IE10، Edge، سافاری و اپرا کاملا سازگار است.

بوت استرپ Bootstrap 4 را از کجا دریافت کنیم؟

دو راه اصلی جهت استفاده از Bootstrap 4 بر روی وب سایت ها وجود دارد :

• خواندن آنلاین فایل های Bootstrap 4 از طریق یک توزیع کننده آنلاین وب یا CDN.
• دانلود فایل های Bootstrap 4 از سایت getbootstrap.com و اضافه کردن آن ها در هاست سایت مورد نظر.
• آموزش طراحی سایت

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

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

<!-- Latest compiled and minified CSS -->

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

<!-- jQuery library -->

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

<!-- Popper JS -->

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

<!-- Latest compiled JavaScript -->

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

راهنمایی : مزیت استفاده از CDN Bootstrap چیست؟

بسیاری از کاربران، پیش از ورود به سایت شما، هنگام مشاهده سایت های دیگر، Bootstrap 4 را از MaxCDN دانلود کرده و به نوعی در حافظه موقت مرورگرشان قرار دارد. در نتیجه، در هنگام مشاهده سایت شما، فایل های Bootstrap از حافظه Cache مرورگر لود شده و سرعت بارگذاری صفحه شما، بسیار بالاتر می رود.
از طرف دیگر، بیشتر CDN ها، هنگامی که کاربری فایل هایی را از آن ها درخواست می کند، سعی می کنند تا از طریق نزدیک ترین سرور، فایل ها را برای کاربر ارسال کرده و خود این نیز به سرعت بارگذاری صفحات کمک خواهد کرد.

راهنمایی 2 : چرا بایستی jQuery یا Propper را همراه Bootstrap اضافه کنیم؟

بوت استرپ Bootstrap 4 از کتابخانه های آماده jQuery یا Propper برای اجرای افزونه یا کامپوننت های جاوا اسکریپتی مثل کادرهای محاوره ای (Models)، پیام ها tooltip، منوهای پاپ آپ و ... استفاده می کند، بنابراین بایستی این فایل ها هم اضافه شوند.
اما اگر فقط از بخش CSS Bootstrap استفاده می کنید، نیازی به اضافه کردن لینک jQuery یا Propper وجود ندارد.

آموزش طراحی وب

آموزش دانلود فایل های Bootstrap 4:

اگر می خواهید فایل های Bootstrap 4 را دانلود کرده و در هاست سایت خود قرار دهید، می توانید به آدرس getbootstrap.com رفته و مراحل لازم را انجام دهید.

آموزش طراحی اولین صفحه وب با Bootstrap 4:

مرحله 1 - اضافه کردن تگ اصلی HTML 5 Doctype:

بوت استرپ Bootstrap 4 از تگ های HTML و خواص CSS استفاده می کند، که لازم است تگ اصلی HTML5 یا doctype به صفحات وب اضافه شود.
همواره همانند کد زیر، تگ HTML 5 doctype را در ابتدای صفحات اضافه کرده و خواص lang(زبان) و سیستم کدینگ (charset) مناسب را تعیین نمایید :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

</head>

</html>

مرحله 2 - Bootstrap 4 پیش فرض نمایش در موبایل است (Mobile First Design) :

بوت استرپ Bootstrap 4 به گونه ای طراحی شده است تا بهترین نمایش را در درجه اول درون صفحات موبایل ها داشته باشد و فایل های stylesheet مخصوص صفحه نمایش های کوچک، هسته اصلی چهارچوب کاری Bootstrap است. برای اطمینان از نمایش صحیح و zoom صحیح و لمسی، تگ <meta> زیر را درون بخش <head> صفحه قرار دهید :

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

در کد فوق، خاصیت width=device-width باعث می شود همواره عرض صفحه معادل عرض صفحه نمایش دهنده آن باشد که البته در دستگاه های مختلف، متفاوت خواهد بود.
همچنین خاصیت initial-scale=1، تعیین می کند زوم اولیه جهت نمایش صفحه 1 یا 100 درصد بوده که به معنای عدم زوم اولیه است.

مرحله 3 - تعیین عنصر دربرگیرنده اصلی محتویات صفحه (Containers):
بوت استرپ 4 برای دربرگرفتن کلیه اجرای صفحه به یک عنصر مادر یا Container نیاز دارد. در چهارچوب Bootstrap 4 دو نوع Container تعریف شده که می توانید از هر کدام استفاده نمایید :

• کلاس container. : یک عنصر دربرگیرنده با قابلیت طراحی واکنش گرا ایجاد می کند که عرض آن معمولا کمی کمتر از عرض کل صفحه نمایش است.
• کلاس container-fluid. : یک دربرگیرنده با عرض کامل (full width container) ایجاد می کند که تمامی عرض صفحه نمایش را در بر می گیرد.

در شکل کد مثال عملی زیر، هر دو نوع container Bootstrap را نشان داده ایم:

آموزش دو مثال عملی طراحی صفحه در Bootstrap 4:

مثال1: در کد مثال عملی زیر، یک صفحه ساده با Bootstrap 4 ایجاد کرده ایم که از عنصر دربرگیرنده با کلاس container. استفاده می کند. همانطور که در خروجی مشاهده می کنید، عرض صفحه کمی کمتر از عرض صفحه نمایش است و همواره حاشیه ثابت دارد.

مثال 2

<p>Bootstrap 4 Example</p>

<div class="container">

<h1>My First Bootstrap Page</h1>

<p>This is some text.</p>

</div>

مثال2: در کد مثال زیر، کد قبل را بازنویسی کرده و این بار از یک عنصر دربرگیرنده با کلاس container-fluid استفاده کرده ایم. همانطور که در خروجی مشاهده می کنید، محتویات کل عرض صفحه را گرفته در هر اندازه ای حالت تمام صفحه دارند :

مثال 3:

<div class="container-fluid">

<h1>My First Bootstrap Page</h1>

<p>This is some text.</p>

</div>

با ادامه بخش دوم آموزش Bootstrap 4 همراه ما باشید