بوت استرپ (Bootstrap)

بوت استرپ با شروع کار خودش باعث شد که بسیاری از UI کاران و طراحان سایت از استاندارد های بوت استرپ برای CSS و جاوا اسکریپت استفاده کنند. اجازه دهید قبل از اینکه از ویژگی های بوت استرپ بیشتر سخن بگوییم به این سوال که بوت استرپ چیست پاسخ دهیم.

تعریف بوت استرپ

در سایت W3schools بوت استرپ اینگونه تعریف شده است:

بوت استرپ یک فریم ورک HTML,CSS و جاوا اسکریپ کاربرپسند است و توسط توسعه دهندگان سایت های ریسپانسیو استفاده می گردد.

 اگر به سایت خود بوت استرپ برویم تعریف بوت استرپ اینگونه بیان شده است:

بوت استرپ؛ برای ساخت سایت های ریسپانسیو و سایت های بهینه شده برای موبایل است و یکی از پرکاربرد ترین کتابخانه های کامپوننت برای طراحان ظاهر سایت است.

بوت استرپ ابزاری متن باز برای توسعه HTML وCC و جاوا اسکریپت است و توسعه دهندگان وب میتوانند از این ابزار براحتی با استفاده و توسعه متغییر های موجود در نسخهSass و استفاده از سیستم شبکه بندی بوت استرپ برای طراحی ریسپانسیو و دستورات پیش ساخته جی کوئری سایت های خود را ایجاد و توسعه دهند.

اگر بخواهیم به زبان خودمان بگوییم بوت استرپ چیست باید بگوییم:

بوت استرپ ساخته شده تا طراحان سایت کارشان راحت تر شود. اگر میخواهید سایت ریسپانسیو شود کافیست CSS بوت استرپ را روی سرور خود کپی کنید و بعد هم به رفرنس بوت استرپ سری بزنید و کلاس ها و کدهایی که برای ریسپانسیو شدن سایت باید به HTML خود اضافه کنید را یاد بگیرید. این کدها اغلب ساده هستند و براحتی میتوان آنها را یاد گرفت.

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

بوت استرپ کار طراحی ظاهر سایت را برای ما بسیار ساده کرده است

همانطور که میدانید بسیاری کامپوننت های دیگر در سراسر وب وجود دارند که کار طراحی سایت را تسهیل می کنند. از معرف ترین جایگزین های بوت استرپ W3 است که در سایت W3schools ارائه شده است و مانند بوت استرپ نسخه CSS و جاوا اسکریپت دارد و مثال های بسیاری برای نحوه کار با این کامپوننت در سایت رسمی W3schools وجود دارد.سایتW3schools ادعا می کند که کامپوننت آنها ساده تر از بوت استرپ است . امتحان صحت و ثقم این موضوع را بخودتان واگذار میکنم ولی قبل از تصمیم گیری مطمئن شوید تمام امکانات هر دو را مقایسه کرده اید.  

آموزش استفاده از بوت استرپ

برای استفاده از بوت استرپ ابتدا باید از طریق سایت getbootstrap.com آخرین نسخه این نرم افزار را دانلود کنید و در هاست خود آپلود نمایید . سایت رسمی بوت استرپ اعلام کرده است که کتابخانه های جی کوئری و Popper را برای استفاده در کنار بوت استرپ پیشنهاد میدهد. بعد از دانلود این فایل ها و بارگذاری آنها روی سرور باید آنها را در صفحه خود فراخوانی کنیم. استاندارد طراحی وب به ما میگوید که کد های جاوا اسکریپت را درست قبل از تگ بسته Body قرار دهیم این به دلیل آن است که اگر کد های جاوا به هر دلیلی دچار مشکل شود و یا بکندی اجرا شوند بر بارگذاری کل سایت ما تاثیر نگذارند. بنابراین درست قبل از تگ بسته Body این کد ها را  اضافه کنید.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

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

نکته : بوت استرپ با HTML5 همآهنگ شده است و اگر Doctype مربوط به HTML5 را در صفحه خود نداشته باشید ممکن است اجرای برخی کدها با مشکل مواجه شوند.

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

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

یادگیری بوت استرپ

برای یادگیری نحوه بکارگیری بوت استرپ میتوانید رفرنس بوت استرپ در سایت رسمی این شرکت getbootstrap.com را مطالعه کنید . در ضمن سایت w3schools هم آموزش بوت استرپ را  بطور کامل قرار داده است و سایت وب 24 هم بزودی آموزش بوت استرپ فارسی را برای شما عزیزان آماده خواهد کرد. برای ترغیب خوانندگان گرامی به یادگیری بوت استرپ در این قسمت از مقاله چند مثال از کاربردهای بوت استرپ را ذکر خواهیم کرد. قبل هر کاری سند HTML خود را با نسخه HTML5 ایجاد کنید. سپس با توجه به اینکه بوت استرپ برای ارائه سایت برروی موبایل بهینه شده است . برای استفاده بهینه از بوت استرپ کد زیر را به بخش Head سایت خود اضافه کنید.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

همانطور که قبلا گفته ایم فایل های جاوا اسکریپت لازم را هم دانلود و در سرور بارگذاری کرده و کد مربوطه را که چند خط بالاتر توضیح دادیم به فایل HTML خود بیافزایید.

نکته: بوت استرپ دو نسخه از فایل های خود ارائه میدهد: نسخه ای برای کسانی که فقط قصد استفاده از بوت استرپ را دارند و نسخه ای برای توسعه دهندگان و کسانی که میخواهند کد های بوت استرپ را ویرایش کنند. نسخه قابل ویرایش بوت استرپ با Sass نوشته شده است . برای کار با Sass میتوانید از Ruby یا استفاده کنید. خود Sass با زبان Ruby نوشته شده است ولی این موضوع باعث نمیشود که Libsass که با زبان C و C++ نوشته شده است مشکلی با ایجاد کد های Sass و یا کمپایل کردن آنها داشته باشد.

اگر بخواهیم بطور خلاصهSass را تعریف کنیم باید بگوییم که:Sass به شما امکان میدهد که با اصول و قواعد برنامه نویسی مانند تعریف متغییر یک فایلCss ایجاد کنید و در انتها آن را مانند هر فایلCss معمولی ذخیره کنید. سایت رسمیSass به آدرس http://sass-lang.com در تعریف زبان برنامه نویسیSass نوشته است : با پیچیده تر شدن کدهایCss استفاده از این کد ها دیگر برایمان جذاب نبود ، بنابراین دست به کار شدیم و زبانی ایجاد کردیم که دوباره کد نویسیCss را برای ما جذاب کند . و حقیقتا هم همینطور است کافیست در یک خط کد متغییرهای رنگ و غیره را تعریف کرده و بعد در سراسر فایلCss به آن کد رنگ دسترسی دارید و نیازی به کپی کردن مجدد خود کد رنگ نیستید. این روش کد نویسی برایCss باعث شده که توسعه کامپوننت هایی مانند بوت استرپ بسیار ساده شود زیرا شما بجای اینکه کل یک فایل پیچیدهCSS را بدنبال کد مد نظر بالا و پایین کنید کافیست متغییر را در ابتدای فایل ویرایش کنید و تمام کلاس ها وID هایی که از آن متغییر استفاده می کنند ویرایش می شوند.

فرض کنید شما فایل بوت  استرپ را در سایت خود استفاده می کنید و میخواهید که کمی پدینگ به سمت راست مطالب سایت خود را اضافه کنید کافیست متغییر پدینگ تگ های مد نظر در ابتدای کد را یافته و آن را ویرایش کنید . به این ترتیب دیگر لازم نیست که پدینگ را به تمام کلاس ها اعمال کنید کافیست متغییر را برای آنها تعریف کنید. آموزشSass خود نیاز به چندین مقاله پی در پی دارد . امیدوارم توضیحات ما کلیات این زبان را برای شما روشن کرده باشد.

صد صفحه کتاب به اندازه یک مثال نمیتواند مطلبی را توضیح دهد.

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

اگر بخواهیم یک جدول داشته باشیم که با خطوط افقی سطرهای آن از هم جدا هستند کافیست که از کلاس table استفاده کنیم و بقیه کارها را بوت استرپ انجام میدهد. مثال این کد را مشاهده کنید.

<table class="table">

    <thead>

      <tr>

        <th>Firstname</th>

        <th>Lastname</th>

        <th>Email</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>John</td>

        <td>Doe</td>

        <td>[e-mail]</td>

      </tr>

      <tr>

        <td>Mary</td>

        <td>Moe</td>

        <td>[e-mail]</td>

      </tr>

      <tr>

        <td>July</td>

        <td>Dooley</td>

        <td>[e-mail]</td>

      </tr>

    </tbody>

  </table>

آیا بنظرتان این جدول کمی کسل کننده نیست ؟ اگر هست کافیست که کلاس آن را به table-hover تغییر دهید تا این بار با هاور شدن موس روی آن استایل هر سطر تغییر کند.

مثال دوم : کد زیر را در فایل HTML خود قرار دهید.

<!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/3.3.7/css/bootstrap.min.css">

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

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

</head>

<body>

<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>   

</body>

</html>

توضیح کد :

در ابتدا ما فایل های CSS و Js مورد نیاز برای کار با بوت استرپ را فراخوانی کرده ایم. سپس در اولین خط بعد از تگ شروع Body یک تگ Div ایجاد کرده ایم که دارای یک کلاس به نام container-fluid است . این کلاس باعث میشود که محتوای این تگ Div کل عرض صفحه را اشغال کند.

کد بعدی یک هدینک ساده است و بعد از آن ما محتوای خود را در دو ستون قرار داده ایم برای اینکار دو تگ Div با کلاس col-sm-6 ایجاد کرده ایم . این کلاس به این صورت کار میکند: سیستم Grid بوت استرپ عرض صفحه را به 12 قسمت تقسیم میکند و ما میتوانیم تعیین کنیم هر کدام از تگ های ما چند ستون از این 12 ستون را اشغال می کنند ، به این ترتیب دو تگ که هر کدام 6 ستون را اشغال می کنند عرضی برابر خواهند داشت . قسمت sm در این کلاس مشخص می کند که این کد برای مونیتور های با عرض 567 پیکسل و بزرگتر بهینه شده است.

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

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