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

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

بوت استرپ ساخته شده تا طراحان سایت کارشان راحت تر شود. اگر میخواهید سایت ریسپانسیو شود کافیست 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 هم آموزش بوت استرپ را  بطور کامل قرار داده است و سایت وب ۲۴ هم بزودی آموزش بوت استرپ فارسی را برای شما عزیزان آماده خواهد کرد.

برای ترغیب خوانندگان گرامی به یادگیری بوت استرپ در این قسمت از مقاله چند مثال از کاربردهای بوت استرپ را ذکر خواهیم کرد. قبل هر کاری سند 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>john@example.com</td>

      </tr>

      <tr>

        <td>Mary</td>

        <td>Moe</td>

        <td>mary@example.com</td>

      </tr>

      <tr>

        <td>July</td>

        <td>Dooley</td>

        <td>july@example.com</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>

 

دیدگاه‌تان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *