بایگانی برچسب: s

Twitter Bootstrap

ارسال شده در توسط
۲

قسمت اول: Twitter Bootstrap چیست؟

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

Bootstrap محبوب ترین پروژه در GitHub است که توسط NASA و MSNBC و دیگر سایتهای مطرح استفاده شده است.

(صفحه دانلود Bootstrap در سایت GitHub)

تاریخچه Bootstrap

Bootstrap از دل یکی از پروژه های Twitter، که برای توسعه آنالیز داخلی و ابزارهای مدیریت بود، بیرون آمد.

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

در آگوست سال 2011 تویتر اولین نسخه Bootstrap را به صورت منبع – باز منتشر کرد.

قابلیت ها

Bootstrap پشتیبانی نسبتا ناقصی از HTML 5 و CSS 3  دارد، اما با تمامی مرورگرهای عمده سازگار است.

از نسخه 2.0، Bootstrap از طراحی پاسخگو (Responsive design) نیز پشتیبانی میکند. این بدان معنی است که طراحی گرافیکی صفحات وب به طور داینامیک با خصوصیات دستگاه مورد استفاده (کامپیوتر، تبلت و موبایل) تطبیق پیدا میکنند.

ساختار و عملکرد

Bootstrap ماژولار بوده و اساسا شامل مجموعه ای از شیوه نامه های  LESS (یک پیش پردازنده CSS برای توسعه آسانتر و سریعر در وب) است که اجزاء گوناگون این بسته ابزار را پیاده سازی میکند. یک شیوه نامه به نام bootstrap.less  شیوه نامه های  اجزاء را در خود جا داده است. توسعه دهندگان میتوانند فایل Bootstrap را با انتخاب اجزایی که برای پروژه خود نیاز دارند بسازند.

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

استفاده از زبان شیوه نامه LESS اجازه استفاده از متغیرها، توابع و عملگرها، انتخاب گر های تو در تو، و نیز mixins را میدهد.

Bootstrap با در نظر گرفتن مرورگرهای امروزی طراحی شده است. در نتیجه با آخرین نسخه های مرورگرهای Chrome, Firefox, Opera, Safari  و Internet Explorer  بدون مشکل کار میکند.

شروع کار با Bootstrap

به دو روش میتوانید Bootstrap را در صفحه HTML  خودتان اضافه نمایید:

میتوانید به سادگی کد زیر را در قسمت HEAD فایل HTML  خود اضافه نمایید:

<link rel="stylesheet" href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css">

از آنجایی که Bootstrap از LESS   پشتیبانی مینماید میتوانید فایل css  و LESS  ، js   را مثل کد زیر به صفحه اضافه نمایید:

<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>

سیستم GRID

 با استفاده از Bootstrap میتوانید سیستم GRID  را در صفحه پیاده نمایید. Bootstrap به طور پیشفرض از GRID  با 12 ستون و عرض 940  پیکسل استفاده میکند و انواع دیگر GRID  را نیز پشتیبانی میکند.

Layouts

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

Typography

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

دیگر قابلیتهای Bootstrap

جداول، فرمها، ناوبری و صفحه بندی (Navigation & Pagination)، پیغامهای خطا و هشدار، پنجره های مُدال، باکسهای Tooltip از دیگر مواردی هستند که با استفاده از Bootstrap به راحتی قابل پیاده سازی هستند.

به زودی: در قسمت دوم با چند مثال عملا با نحوه کار و استفاده از Bootstrap آشنا میشویم.

بروز رسانی: این مطلب در ویکی پدیای فارسی قرار داده شد.