Kaptain Kitty
دسته ها :Html و Css
انتشار :۹ مرداد ۱۳۹۳
بازدید :4399 بار

فریم ورک بوت استرپ یک مجموعه ی رایگان از ابزارهای ایجاد کامپوننت برای وب سایت و وب اپلیکیشن می باشد. بوت استرپ حاوی تمپلیت های طراحی بر پایه ی HTML و CSS برای تایپوگرافی، فرم ها، دکمه ها، navigation و دیگر کامپوننت های UI و همچنین اکستنشن های جاوا اسکریپت است. در ژوئن سال ۲۰۱۴، فریم ورک بوت استرپ پروژه ی شماره ۱ در GitHub بود که بیش از ۶۹۰۰۰ ستاره و بیش از ۲۵۰۰۰ شاخه داشت. هم اکنون کاربرانی مانند MSNBC و NASA از آن استفاده می کنند.

تاریخچه ی فریم ورک Bootstrap:

بوت استرپ (Bootstrap) توسط مارک اوتو و ژاکوب تورنتون و به عنوان فریم ورکی برای انسجام و سازگاری برای ابزار های داخلی توییتر ایجاد شد. قبل از ظهور بوت استرپ، کتابخانه های متعددی برای ایجاد UI مورد استفاده قرار می گرفتند که منجر به ایجاد ناسازگاری و زحمت فراوان مربوط برای نگهداری می شدند. بر طبق گفته ی خالق توییتر بوت استرپ، مارک اوتو:

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

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

در آگوست سال ۲۰۱۱، توییتر بوت استرپ را به صورت open source منتشر ساخت. در فوریه سال ۲۰۱۲، بوت استرپ پر ستاره ترین پروژه ی GitHub بود و این جایگاه را تا  ژوئن سال ۲۰۱۴ حفظ کرده است.

ویژگی ها:

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

از نسخه ی ۲٫۰ به بعد، بوت استرپ از طراحی وب responsive یا پاسخگو نیز پشتیبانی می کند. به این معنی که آرایش صفحات وب با در نظر گرفتن ویژگی های صفحه نمایش مورد استفاده (دسکتاپ، تبلت، گوشی موبایل)، به صورت داینامیک منطبق می شود.

با شروع نسخه ی ۳٫۰، بوت استرپ فلسفه ی طراحی موبایل را برگزید که تاکید آن بر طراحی responsive به صورت پیش فرض بود. بوت استرپ به صورت open source بوده و بر روی GitHub موجود می باشد. برنامه نویسان می توانند در این پروژه شرکت کرده و تغییرات مورد نظر خود را بر روی این پلتفرم اعمال کنند.

اخیرا، اعضای انجمن bootstrap توانسته اند، مستندات آن را به زبان های مختلفی از جمله چینی، اسپانیایی و روسی ترجمه کنند.

ساختار و کاربرد:

توییتر bootstrap به صورت ماژولی بوده و شامل یک سری از شیوه نامه (stylesheet) های LESS می باشد که کامپوننت های مختلف toolkit را اجرا می کند. شیوه نامه ای که bootstrap.less نام دارد شامل شیوه نامه های کامپوننت ها می باشد. برنامه نویسان می توانند از خود فایل Bootstrap استفاده کنند و از این طریق بتوانند کامپوننت های مورد نظر خود را برای استفاده در پروژه ی خود انتخاب کنند.

انطباق ها از طریق یک شیوه نامه ی تنظیماتی مرکزی، برای حوزه ی محدودی امکان پذیر می باشد. تغییرات عمیق نیز از طریق LESS امکان پذیر می باشد. استفاده از زبان شیوه نامه ی LESS، امکان استفاده از متغیرها، توابع و اپراتورها، سلکتورهای تودرتو و mixin ها را می دهد.

از زمان انتشار نسخه ی ۲٫۰ ، تنظیمات بوت استرپ دارای یک گزینه ی مخصوص “Customize” در مستندات خود شد. علاوه بر این، برنامه نویس می تواند کامپوننت ها و انطباقات دلخواه خود، و در صورت نیاز مقادیر گزینه های متعدد را بر اساس نیاز خود برای یک فرم انتخاب کند. بسته ای که پس از آن ایجاد شود نیز شامل شیوه نامه ی از پیش ساخته شده ی CSS می باشد.

سیستم Grid و طراحی پاسخگو نیز با آرایشی با عرض ۱۱۷۰ پیکسل، استاندارد شناخته می شود. علاوه بر این، برنامه نویس می تواند از آرایشی با عرض متغیر استفاده کند. در هر دو مورد، toolkit دارای چهار روش متفاوت برای استفاده از رزولوشن های مختلف و انواع دستگاه ها شامل گوشی های موبایل، تبلت ها و کامپیوترهای شخصی با روزولوشن های بالا و پایین است. هر یک از روش ها می تواند با عرض ستون ها انطباق یابد.

شیوه نامه ی CSS:

Bootstrap مجموعه ای از شیوه نامه ها را ارائه می دهد که تعاریف اولیه ی style را برای تمام کامپوننت های کلیدی HTML ایجاد می کنند. این شیوه نامه ها ظاهری یک پارچه و مدرن را برای فرمت بندی متون، جداول و المان های فرمف در اختیار ما قرار می دهد.

کامپوننت هایی با قابلیت استفاده مجدد:

علاوه بر المان های معمولی HTML، بوت استرپ حاوی المان های پر کاربرد دیگری از المان های UI نیز می باشد. این المان ها شامل دکمه هایی با ویژگی های پیشرفته (مثل دکمه های گروهی یا دکمه هایی با گزینه ی drop-down، ایجاد و گردش در لیست ها، tab های افقی و عمودی، صفحه بندی و غیره)، برچسب، قابلیت های پیشرفته ی تایپوگرافی، thumbnail، پیغام های هشدار و نوار پیشرفت یا progress bar می باشد.

کامپوننت های جاوا اسکریپت:

Bootstrap دارای کامپوننت های متعدد جاوا اسکریپتی می باشد که در قالب پلاگین های jQuery می باشند. این کامپوننت ها، المان های دیگری از رابط کاربری مانند dialog box و tooltip را ایجاد می کنند. آنها همچنین کارایی برخی از المان های موجود رابط را نیز توسعه می دهند که برای مثال شامل عمل auto-complete برای فیلد های ورودی می باشد. در نسخه ی ۲٫۰، پلاگین های جاوا اسکریپت شامل این موارد پشتیبانی می شود: Model، Dropdown، Scrollspy، Tab، Tooltip، Popover، Alert، Button، Collapse، Carousel و Typehead.

پیاده سازی  فریم ورک بوت استرپ با استفاده از Dojo Toolkit نیز امکان پذیر است که Dojo Bootstrap نامیده می شود و پورتی برای پلاگین های Twitter Bootstrap می باشد و ۱۰۰ درصد از کدهای Dojo استفاده می کند و از AMD (مخفف Asynchronous Module Definition) یا تعریف غیر هم زمان ماژول نیز پشتیبانی می کند.

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

کاربرد:

برای استفاده از بوت استرپ در یک صفحه ی HTML، برنامه نویس شیوه نامه ی CSS بوت استرپ را دانلود کرده و لینکی را در فایل HTML قرار می دهد. (برنامه نویس می تواند فایل CSS را از شیوه نامه های دانلود شده ی LESS و SASS ، با استفاده از یک کامپایلر مخصوص، کامپایل کند).

اگر برنامه نویس بخواهد از کامپوننت های جاوا اسکریپت استفاده کند، باید آنها را همراه با کتابخانه ی jQuery در سند HTML ارجاع دهد.

مثال زیر نحوه ی انجام این کار را نشان می دهد. کد HTML یک فرم ساده برای جستجو و یک لیست از نتایج را به صورت جدول نشان می دهد. این صفحه شامل المان های HTML5 و اطلاعات CSS بر طبق مستندات بوت استرپ می باشد. شکل زیر نمایی از این سند را در Mozilla Firefox 10 نشان می دهد.

<!DOCTYPE html>

<html>

<head>

<title>Example of Twitter Bootstrap</title>

<!-- Include the bootstrap stylesheets -->

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

<div>

<h1>Search</h1>

<label>Example for a simple search form.</label>

<!-- Search form with input field and button -->

<form>

<input type="text">

<button type="submit">Search</button>

</form>

<h2>Results</h2>

<!-- Table with alternating cell background color and outer frame -->

<table>

<thead>

<tr>

<th>#</th>

<th>Title</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>Lorem ipsum dolor ...</td>

</tr>

<tr>

<td>2</td>

<td>Ut enim ad minim veniam, ...</td>

</tr>

<tr>

<td>3</td>

<td>Duis aute irure dolor ...</td>

</tr>

</tbody>

</table>

</div>

<!-- JavaScript placed at the end of the document so the pages load faster -->

<!-- Optional: Include the jQuery library -->

<script src="//code.jquery.com/jquery-1.7.2.min.js"></script>

<!-- Optional: Incorporate the Bootstrap JavaScript plugins -->

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

</body>

</html>

ایجاد یک Grid با آرایش ساده:

<div class="row">
       <div class="col-md-4">hi</div>
       <div class="col-md-4">...</div>
       <div class="col-md-4">...</div>
    </div>

برچسب‌ها, , , , , ,

مطالب مرتبط

بهتر از من می دانید که دنیای برنامه نویسی هر روز با تغییرات جدی روبه رو است. هر روز که صفحات اینترنتی را باز می کنید می بینید که فریم ورک جدیدی وارد بازار شده که تا دیروز حتی اسمش را هم نشنیده بودید. با کمی تحقیق می بینید که اتفاقا بسیار کارامد هم هست. […]

نمی دانم برای شما هم پیش آمده است که روی پروژه ای مشغول کدنویسی باشید که در آن از افکت های سنگین ۳ بعدی و انیمیشنی بخواهید استفاده کنید یا خیر؟! اما من در چند وقت گذشته در یک پروژه ی وب اپلیکیشن مشغول کد نویسی بودم که هدفش انیمیشن سازی آنلاین در وب است. یک برنامه شبیه […]

یکی از بهترین و فوق العاده ترین پلاگین های جاوااسکرپیتی، پلاگینی است با عنوان ai2html، که کوتاه شده ی عبارت Adobe Illustrator to html می باشد. به طور خلاصه: می توانید فایل گرافیکی ساخته شده توسط نرم افزار Adobe Illustrator را به کدهای html تبدیل کنید. و این یکی از هیجان انگیزترین کارهای ممکن در وب است. […]

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

  1. موسوی می‌گه:

    مدیر سایت iritlearn.com
    با تشکر

  2. وحید الوندی می‌گه:

    من برای اولین بار یک فریم ورک ساده css با نام رکسانا توسعه دادم که بر پایه scss است شما با معرفی این فریم ورک بنده را در توسعه و پیشرفت اولین فریم ورک ایرانی کمک کنید

    لینک توضیحات
    http://goo.gl/mO9jzJ

    1. Summit می‌گه:

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

نظراتتان را برایمان بنویسید

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

مطالب ما تو این شبکه های اجتماعی هم پخش میشه