تک دیک

واژه نامه و مجله آموزشی کامپیوتر و فناوری

بوت استرپ Bootstrap

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

بوت استرپ (Bootstrap) یک کتابخانه منبع باز و رایگان برای طراحی وبسایت ها و وب اپلیکیشن هاست و شامل قالب‌های طراحی مبتنی بر HTML و CSS و هم‌چنین افزونه‌های اختیاری جاوا اسکریپت می‌باشد.

بوت‌استرپ از جمله ابزارهای توسعه وب سمت کاربر (Front-End Web Development) به شمار می‌رود (تنها چیزهایی که کاربر می‌بیند و با آن تعامل برقرار می‌کند از استایل‌ها گرفته تا اسکریپت‌هایی که سمت کلاینت اجرا می‌شوند) و با تمامی مرورگرهای وب امروزی (از جمله کروم، فایرفاکس، اینترنت اکسپلورر، اج و …) سازگار می‌باشد. امکان ایجاد صفحاتی با حداکثر 12 ستون، استفاده از استایل‌های زیبا و مدرن برای متون، هدینگ ها، جداول، تصاویر، اعلان‌ها و هشدارها، دکمه ها، امکان استفاده از Glyphicons (مجموعه‌ای از آیکن‌های پرکاربرد و تک رنگ) در طراحی بخش‌های مختلف صفحات وب (نظیر منوهانوارهای پیشرفت، فرم‌ها، گالری تصاویر و … از جمله قابلیت‌های Bootstrap به شمار می‌رود.

بوت استرپ Bootstrap
لوگوی بوت استرپ (سمت چپ) و طراحی واکنشگرای وب

در کد زیر نحوه لود کردن Bootstrap و ایجاد صفحه‌ای حاوی یک پیام هشدار با استفاده از این فریم ورک نمایش داده شده است. همانطور که مشاهده می‌کنید تنها کاری که لازم است برای تبدیل یک بلاک div به پیام هشدار انجام دهید اختصاص کلاسی با مقدار alert alert-danger به المان <div> موردنظر می‌باشد.

<!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.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="alert alert-danger">
            <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
        </div>
    </body>
</html>

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

بوت استرپ Bootstrap
نمونه هشدار خطر با کمک Bootstrap
مثالی از بوت استرپ Bootstrap
نمونه لیست قیمت طراحی شده با کمک Bootstrap

نسخه‌های مختلف بوت استرپ

Bootstrap در سال 2010 با نام Twitter Blueprint توسط مارک اتو (Mark Otto) و جاکوب تورنتون (Jacob Thornton) در توئیتر طراحی شد تا نوعی یکپارچگی در ابزارهای داخلی این شرکت ایجاد کند. اما خوشبختانه کار به همین جا محدود نشد و پروژه با همکاری تعداد معدودی از توسعه دهندگان دیگر در آگوست سال 2011 با نام Bootstrap روی GitHub منتشر شد.

نسخه دوم بوت استرپ نیز در ژانویه سال 2012 با پشتیبانی از طراحی واکنشگرا و طرح شبکه‌ی 12 ستونی در کنار تعدادی قابلیت دیگر منتشر شد. تولد دومین سال بوت استرپ مصادف شد با انتشار نسخه سوم آن که با تأکید بیشتر روی طراحی واکنشگرا و رویکرد موبایل – اول (Mobile First) تکمیل شد. نسخه چهارم این فریم ورک نیز با بهبودهایی روی استایل‌های چاپ، حرکت به سمت flexbox و … در ژانویه 2018 به صورت رسمی منتشر شد.

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

بوت استرپ امکان توسعه وب را به شکلی سریعتر و آسانتر فراهم می‌کند. به عبارت بهتر تقریبا هر فردی که آشنایی متوسطی با HTML و CSS داشته باشد می‌تواند از ویژگی‌های اصلی این فریم ورک استفاده کند. علاوه بر این، قابلیت طراحی واکنشگرا و ایجاد یکپارچگی در ظاهر و عملکرد سایت‌ها از جمله مزایای استفاده از Bootstrap به شمار می‌رود.

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

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

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