از سال 2000 تا به امروز کار طراحی وب به شکل کاملا چشمگیری تغییر پیدا کرده است. در این دوران بود که پهنای باند افزایش پیدا کرد و تقاضا برای مولتی مدیا و اپلیکیشن و استفاده از تکنولوژی های تازه نظیر و فلش و ajaxافزایش یافت. به عبارت دیگر نگاه کاربران نسبت به وب تغییر کرد.
این مساله باعث شده تا چشم انداز طراحی وب تغییر کند، حتی سریعتر از آن چیزی که ما طراحان وب دوست داشته باشیم. مرورگرهای موبایل در سالهای اخیر از مرورگرهای دسکتاپ پیشی گرفته اند. توجه شما را به چند آمار جلب میکنم:
- در ایالات متحده استفاده از کامپیوتر شخصی در سال 2010 بیست درصد کاهش نسبت به سال 2008 داشت. دلیل آن افزایش استفاده از اسمارت فون و تبلت است.
- در نوامبر سال 2010 بازدیدکنندگان ایمیل از طریق وب سایت 6% کاهش یافت، اما بازدیدکنندگانی که از طریق دستگاه موبایل ایمیل های خودشان را چک میکردند 36% افزایش داشتند.
- ترافیک وب سایت موبایل در سال 2010 افزایش 600% داشته است.
البته نیاز به دادن این آمارها نیست. کافیست شما در خیابان و یا مترو به آدمهایی نگاه کنید که به موبایل های خود خیره شده اند و دارند از اینترنت استفاده میکنند.
امروزه حتی کنسول های بازی هم مرورگر دارند. این امر باعث شده است تا ما با حالتهای ورودی و مرورگرهای بیشتری مواجه شویم.
در چند سال اخیر، بویژه در سال گذشته من با درخواست های زیادی مواجهه شدم که میخواستند نسخه موبایل برای سایت خود داشته باشند. راه حل چه بود؟ آیا نسخه مخصوص آیفون مینوشتم؟ بعد چی؟ یک نسخه برای سامسونگ؟ در همین دوران بود که من مقاله ای از اثان مارکوت در زمینه طراحی واکنشگرا خواندم.
به اعتقاد وی ما میتوانیم لی اوت خودمان را قابل انعطاف بنویسیم. یعنی اندازه فیکس نداشته باشیم. همچنین میتوانیم عکس های خود را بصورتی استایل بدهیم که آنها هم قابل انعطاف باشند. به جز اینها در css3 ما چیزی بنام مدیا کوری داریم که میتوانیم بر اساس رزلوشن مانیتور استایل بنویسیم.
لازم به ذکر است که طراحی واکنشگرا مفهومی جدید است. وب سایت mashable سال 2013 را بعنوان سال طراحی واکنشگرایی نامیده است. زیرا از نظر این سایت بیشتر مردم علاقه دارند تا اخبار را از طریق وب سایت ها پیگیری کنند تا از طریق اپلیکیشن‌ها.
پس از آشنا شدم با مفهوم واکنش گرایی به این موضوع فکر میکردم که آیا فریم وورکی وجود دارد که برای موبایل نوشته شده باشد؟ جواب مثبت بود: فاندیشن، یو آی کیت، اسکلتون، گامبی و ... اما بوت استرپ از همه بهتر بود.
بوت استرپ مجموعه ای از ابزارها برای ایجاد وب سایت یا اپلیکیشن است. این فریم وورک شامل اچ تی ام ال و سی اس اس به همراه جاوا اسکریپ است. این فریم وورک توسط مارک اوتو و ژاکوب تورنتون در توییتر نوشته شد. هدف اصلی آن ایجاد ثبات در ابزارهای داخلی بود.
در سال 2011 توییتر بوت استرپ را بعنوان فریم ورک اوپن سورس در اختیار عموم قرار داد.
بوت استرپ با آخرین نسخه تمامی مرورگرها همخوانی دارد. اما زمانی که از مرورگرهای قدیمی تر مانند اینرنت اکسپلورر هشت استفاده میکنیم کمی تغییر میکند.
تا نسخه 2.0 از طراحی واکنشگرا پشتیبانی میکرد. این بدان معنا است که صفحات بصورت داینامیک مرتب میشوند و بدین صورت نوشته شده بودند: دسکتاپ، تبلت، موبایل.
در نسخه 3.0، بوت استرپ فلسفه طراحی موبایل فرست را اتخاذ کرد. یعنی دیفالت آن طراحی واکنشگرا است.
اخیرا بوت استرپ به زبانهایی نظیر چینی، اسپانیایی و روسی برگردانده شده است.
بوت استرپ شامل استایل‌شیت لس است. طراحان میتوانند با انتخاب کامپوننت های دلخواه خود فایل بوت استرپ را با پروژه خود سازگار کنند.
سیستم گرید بندی آن در 1170 پیکسل بسته شده است. تولکیت چهار نوع مختلف برای تغییر رزلوشن و نوع دستگاه داریم: موبایل، portray و landscape، تبلت و پی سی با رزلوشن بالا و پایین. هر یک از این انواع، عرض ستون ها را تنظیم میکند.
بوت استرپ یکسری استایل برای تعریف همه المانهای اچ تی ام ال دارد. این استایل ها باعث میشوند که تکست ها، جداول و المان های فرم، شکل واحد پیدا کنند.
علاوه بر المان های معمولی اچ تی ام ال، بوت استرپ شامل المانهای اینترفیسی مرسوم هم هست. این المان ها شامل دکمه ها با فیچرهای پیشرفته (مثلا گروهی از دکمه ها با آپشن دراپ داون، لیست نویگیشن، تب عمودی و افقی، نویگیشن، نویگیشن بریدکرامب، پیجینگ، ...)، لیبلها، توانایی تیپوگرافی، تامبنیل، پیغام هشدار و نوار پراگرس است.
بوت استرپ دارای چندین کامپوننت جاوا اسکریپتی بصورت پلاگین جی کوری است. این پلاگین ها یک اینترفیس اضافی مانند دیالوگ باکس، تولتیپ، و کاروسل است. این پلاگین ها عملکرد برخی المان های اینترفیس را افزایش میدهند مانند عملکرد اتوکامپلیت اینپوت ها. در نسخه 2.0 این پلاگینهای جاوا اسکریپت پشتیبانی میشد: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel and Typeahead.
گرید بندی
بوت استرپ دارای کلاس .container یا .container-fluid است که برای تراز مناسب سایت استفاده میشود. کلاس .row را باید فقط داخل این دو کلاس استفاده کنیم. زمانی از کلاس .row استفاده میکنیم که بخواهیم گروهی از ستونهای افقی داشته باشیم.
محتوا باید داخل ستون ها بیاید و تنها ستونها بلافاصله بعد از .row می آیند. ستون ها با استفاده از padding از هم جدا میشوند. این فاصله برای ستون اول و آخر توسط .row از بین میرود.
ستون های گرید با دوازده ستون موجود مشخص شده اند. مجموع اعداد ستونهایی که استفاده میکنید باید دوازده شود. اگر در یک row مجموع اعداد ستون ها بیش از دوازده شود، ستون آخر خط بعد خواهد افتاد.
کلاس های گرید هم اندازه یا بزرگتر از بریک پوینت نوشته شده است و توسط دستگاه های کوچکتر اورریاد میشود.
آیکن گلیف
گلیف آیکن فونتهای آیکنی هستند که میتوانید از آنها در پروژه خود استفاده کنید. گلیف آیکن مجانی نیست اما در بوت استرپ بصورت رایگان در اختیار عموم قرار داده شده است. این فونتها در فورمت eot، svg، ttf، و woff میباشند.
محمد صالح کاتبی بیست و هفتم ژوئن 2015