بررسی بوت استرپ | Bootstrap

توسط حمیدرضا عباسی

در این مقاله از سری مقاله های سئو و طراحی سایت گروه وب شهر به بررسی بوت استرپ | Bootstrap خواهیم پرداخت.

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

Bootstrap چیست؟

بوت استرپ یک فریم ورک است که در طراحی سایت رسپانسیو استفاده می شود. ساختار اصلی فریم ورک بوت استرپ به صورت سیستم گرید می باشد.

بوت استرپ Bootstrap یا توئیتر بوت استرپ Twitter Bootstrap یکی از فریم ورک هایی است که برای تولید صفحات وب (طراحی وب سایت یا تولید وب اپلیکیشن) بکار میرود . این فریم ورک متن ، باز دارای مجموعه رایگانی از ابزار شامل CSS ، HTML و توابع Javascript میباشد که به طراحی ، انعطاف پذیری بیشتری میبخشد و با هدف تولید و نمایش فرمها ، دکمه ها ، منوها ، ستونها ، اسلایدرها ، تبها و خیلی از المانهای مورد نیاز صفحه بکار میرود .

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

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

معنی لغوی Bootstrap

بوت در زبان انگلیسی به معنی پوتین است بوت استرپ هم در معنی این است که در بعضی از پوتین ها زبانه ای برای کشیدن پاشنه قرار دارد به این زبانه بوت استرپ می گویند که کار پوشیدن پوتین را راحت می کند و احتمالا هم به همین دلیل از این اصطلاح برای ابزار بوت استرپ استفاده کرده اند چرا که طراحی سایت را تا ۸۰ درصد راحتر و سریع تر می کند.

معنی اصطلاحی Bootstrap

بوت استرپ به معنی خود راه انداز است در واقع Bootstraping به معنی راه اندازی فرآیند به صورت مستقل و بدون استفاده از منابع دیگر است.و اگر دقت کنید معنی Booting (راه اندازی سیستم و وارد سازی اطلاعات اولیه نرم افزار در رم کامپیوتر) نیز از این اصطلاح برداشته شده است.

کلمه Boot در زبان انگلیسی به معنی پوتین یا چکمه می باشد، برخی از پوتین ها زبانه کوچکی در انتهای خود دارند که هنگام پوشیدن پوتین برای قرارگرفتن بهتر پا در آن استفاده میشود (چیزی شبیه به پاشنه کش) این زبانه با نام Bootstrap شناخته میشود.

تاریخچه Bootstrap

جدای از بحث مربوط به طراحی وب و موارد مربوط به آن، عبارت Bootstrap به تنهایی به معنی “خود راه انداز” بوده و کلمه Bootstraping به معنی راه اندازی یک فرآیند بصورت مستقل و بدون استفاده از منابع خارجی می باشد. این عبارت در علم کامپیوتر کمی کوتاهتر شده و با عنوان Booting بکار میرود، که نشان دهنده فرآیند راه اندازی سیستم و واردسازی اطلاعات اولیه نرم افزار در حافظه کامپیوتر می باشد.

بوت استریپ توسط Jacob Thornton و Mark Otto که از برترین کارمندان توئیتر هستند طراحی شد و این طرح برای ایجاد سازگاری بین ابزارهای مختلف موجد در سایت توئتیر پیاده سازی شده است.قبل از ایجاد بوت استرپ توئیتر از کتابخانه ها و ابزارهای زیادی استفاده کرده بود ولی به دلیل هزینه بالای نگهداری و همچنین ناسازگاری با برخی از ابزارها ، راه کار را در استفاده از بوت استرپ دید.و بوت استرپ به دلیل استقبال زیاد در بین کاربران در سال ۲۰۱۱ به صورت open source در اختیار عموم قرار گرفت.

**** بوت استرپ گام بلندی است که به طراحان کمک میکند تا قالبهای زیبا و Responsive (واکنش گرا) تولید کنند .

چگونگی کار با بوت استرپ :

برای شروع به کار کافی است تا بوت استرپ را از سایتهای سایت اصلی و یا سایت فارسی آن دانلود نموده و استفاده نمایید .

مزایای Bootstrap

• طراحی ریسپانسیو: بوت استرپ دارای ابزاری است که به طراحی واکنش گرا یا ریسپانسیو برای دستگاه های مختلف کمک می کند.بوت استرپ داری کلاس های متعددی است که در حال حاظر به چها نوع صفحه نمایش با ابعاد مختلف راهکارهایی را ارائه می کند.
• اکثر مرورگرها از این فریم ورک پشتیبانی میکنند و در نمایش صفحات وب در این مرورگرها مشکلی مشاهده نمیشود .
• استفاده آسان از بوت استرپ: با آشنایی مقدماتی از HTML و CSS می توان از بوت استرپ به راحتی استفاده کرد.
• از بوت استرپ ورژن ۲ به بعد امکانات طراحی ریسپانسیو به فریم ورک اضافه شده است . لذا با این امکان مشکلی در نمایش صفحه وب در دستگاههای مختلف پیش نمی آید .
• حالت Mobile first : در طراحی بوت استرپ از رویکرد موبایل در اولویت استفاده می شود .یعنی در طراحی سایت قبل از اینکه به کامپوتر فکر کنیم ابتدا سایت را برای موبایل طراحی کنیم.
• به لحاظ دارا بودن کتابخانه و ابزار آماده و رایگان ، سرعت تولید بالاست .
• بوت استرپ متن باز است لذا براحتی میتوان تغییرات مورد نیاز را اعمال کرد .
• وجود داشتن منبع عظیمی از مستندات کافی و تیم پشتیبان قوی در اینترنت .
• هماهنگی تیم پروژه در تولید .

معایب Bootstrap

پروژه Bootstrap با هدفی مشخص و ایده ای ستودنی راه اندازی شده است و در این مسیر سومین نسخه خود را تجربه میکند. طراحان زیادی از استانداردهای آن بهره میبرند و افراد زیادی استفاده از Bootstrap در طراحی سایت را یک مزیت مهم میدانند ولی مشکل اصلی زمانی ایجاد میشود که شما وابستگی زیادی به طراحی اولیه آن داشته باشید.

امروز شاهد سایت های زیادی هستیم که همگی ظاهر نسبتا یکسانی داشته و به راحتی میتوان ردپای Bootstrap را در آن دید. بعنوان مثال رنگ مشکلی هدر سایت، حاشیه های ۱ پیکسلی خاکستری و دکمه های آبی و قرمز با ظاهری مشخص نشان دهنده بکارگیری Bootstrap در یک سایت هستند، در حالیکه با کمی تغییر میتوان ظاهری جدید و متفاوت به هریک از این بخش ها داده و رنگ بندی های دلخواه خود را در آنها ایجاد نمود.

اگر روند استفاده از Bootstrap به همین شکل ادامه پیدا کند ممکن است در آینده تشخیص سایت های اینترنی از یکدیگر کمی دشوار شده و همگی دارای ظاهری یکسان و تکراری گردند. این مسئله به معنی مخالفت ما با این سیستم و امکانات آن نیست بلکه منظور آن است که بیایید تا این امکانات را در راستای بهبود فضای اینترنت بکار گرفته و خلاقیت خود را فراموش نکنیم.

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

Bootstrap در طراحی سایت

بوت استرپ مجموعه ای از ابزارهای کاربردی و مورد نیاز برای طراحی سایت و وب اپلیکیشن و همچنین شامل قالب های طراحی HTML مبتنی بر CSS است.از این قالب ها می توان به عنوان متن ها ، فرم ها ، عکس ها ، منو ها و …. در طراحی سایت استفاده کرد.به طوری که بوت استرپ می خواهد از طراحی های پیش فرض در طراحی سایت بیشتر استفاده کنیم. و فضای بین کد نویسی و طراحی را کم کند.که این در نهایت به کاهش زمان راه اندازی پروژه می شود.

بوت استرپ دارای افزونه های جاوا اسکریپت است که به راحتی می توان از آن ها استفاده کرد بدین صورت که با edit کردن آن می توان به طراحی سایت خود جلوه های زیبایی داد.بوت استریپ رایگان است و در دسترس همه قرار دارد.در ضمن بهتر است قبل از استفاده از بوت استریپ به زبانهای HTML و CSS وهمچنین JavaScript آشنا یی داشته باشید.

نمونه ای از المان های پیش فرض Bootstrap

در اگوست سال ۲۰۱۱، توییتر Bootstrap را بصورت متن باز و رایگان در اختیار دیگران قرارداد و در فوریه ۲۰۱۲ به محبوب ترین پروژه در سایت Github تبدیل شده بود.

معرفی امکانات Bootstrap

این چارچوب یا Framework با تمامی مرورگرهای استاندارد همخوانی داشته و حتی در نسخه های قدیمی تر مانند اینترنت اکسپلورر ۸ نیز ظاهر زیبای خود را حفظ میکند. از نسخه دوم Bootstrap به بعد طراحی واکنشگرا یا رسپانسیو نیز در آن لحاظ شد که موجب نمایش مناسب صفحه در تلفن های هوشمند و تبلت ها میگردد. برای آشنایی بهتر با طراحی واکنشگرا میتوانید به مقاله ای با عنوان طراحی Responsive چیست مراجعه نمایید.
Bootstrap متن باز بوده و در سایت Github برای دانلود رایگان قرارگرفته است. امکان همکاری در این پروژه و شخصی سازی امکانات و ظاهر آن فراهم شده است و تاکنون مستندات مربوط به آن به چندین زبان دنیا ترجمه شده است.

رسپانسیو بوت استرپ (responsive bootstrap)

برای طراحی سایت رسپانسیو، روش های مختلفی دارد. شما می توانید به صورت دستی سایت خود را ایجاد و طراحی نمایید یا اگر عجله دارید و به دنبال ساخت سریع و راحت هستید، می توانید از فریم ورک های های معروف که بوت استرپ (bootstrap) بهترین آن ها می باشد را استفاده کنید.

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

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

Bootstrap به زبان ساده!

شاید هنوز هم با امکانات و توانایی های Bootstrap بخوبی آشنا نشده باشید و یا دقیقا متوجه کاربرد آن نشوید. در این بخش کمی ساده تر امکانات و توانایی های آن را بررسی خواهیم کرد.

بزرگترین مشکل طراحان وب و کدنویسان قدیمی، ایجاد ظاهری زیبا و مناسب است! بله دقیقا مشکل اساسی اینجاست. اصول کدنویسی و ایجاد زیربنا و ساختار مناسب برای یک سایت بسیار مهم و پیچیده است ولی نمایش صحیح خروجی کار و ایجاد یک فضای کاربرپسند نیز اهمیت بسیار بالایی خواهد داشت.

حتما بخوانید: ” ۱۵ اشتباهی که باعث خارج شدن کاربران از سایت شما می شود ”

Bootstrap قصد دارد که خلاء میان طراحی و کدنویسی را از میان برداشته و کدنویسان را ترغیب به استفاده از طراحی های پیش فرض و استاندارد نماید. به همین منظور دستورات CSS و توابع jQuery مورد نیاز را برای شما فراهم کرده است تا شما بتوانید با استفاده از دستورات پیش فرض و رعایت اصول متناسب با طراحی Bootstrap زمان راه اندازی یک پروژه را تا حد زیادی کاهش داده و خروجی آن را متناسب با استانداردهای روز دنیا پیش ببرید.

اگر طراحی سایت را به آشپزی تشبیه کنیم، دستورات php همانند مواد اولیه در پخت یک غذا بوده و وظیفه تامین مواد غذایی لازم را برعهده دارد، کدهای HTML همانند دستورالعمل پخت غذا است که خروجی مورد نظر شما را از مواد اولیه ایجاد میکند. دستورات CSS شباهت زیادی به نحوه کشیدن غذا در ظرف و نحوه ارائه آن در سفره دارد! خوشمزه ترین غذای دنیا نیز اگر در ظرف پلاستیکی و بصورت نامناسب سرو شود ممکن نیست که رضایت افراد را جلب کند ولی ارائه مناسب و زیبای یک غذای ساده میتواند اشتهای سخت گیرترین افراد را نیز برانگیزد.

Bootstrap به شما در نحوه ارائه غذا و بهبود نمایش صفحات وب بسیار کمک میکند، مهمتر از هرچیز دیگر سرعت بالای کار با آن است که زمان راه اندازی و اتمام یک پروژه را حتی تا ۸۰ درصد کاهش میدهد.

سه فایل در بوت استرپ می توانند قرار بگیرند:

• فایل Bootstrap.css( یک فریم ورک css)
• فایل Bootstrap.js ( یک فریم ورک جاوااسکریپت و جیکوئری)
• فایل Glyphicons ( فونت ها)

علاوه براین ما در بوت استرپ، نیازمند جی کوئری هستیم. جی کوئری از کتابخانه جاوا اسکریپت استفاده می کند. در واقع امروزه به جای استفاده از فایل های فلش از دستورات جیکوئری استفاده می کنند.

این مقاله را درباره jQuery حتما بخوانید!

چرا یک فریم ورک مهم است؟ آیا واقعا نیاز است که من از آن استفاده کنم؟

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

مقاله ” اصول اولیه طراحی سایت ” را به شما توصیه میکنم!

بعضی از مزیت های فریم ورک عبارتند از:

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

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

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

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

حمیدرضا عباسی

حمیدرضا عباسی هستم، کارشناس نرم افزار و دانشجوی کارشناسی ارشد تجارت الکترونیک، طراح و توسعه دهنده وب سایت و متخخص سئو، از سال ۹۰ به صورت حرفه ای شروع به فعالیت در زمینه طراحی وب سایت کردم و بسیار علاقه مند و مشتاق به استفاده از تکنولوژی های جدید و بروز در زمینه طراحی وب سایت و تجارت الکترونیک هستم.

مطالب پیشنهادی

تأثیر RSS در بهینه سازی (سئو) سایت و رتبه آن در گوگل

23 آبان 1396

کدام بهتر است بهینه سازی (سئو) یا تبلیغات کلیکی

9 آبان 1396

روش هایی جهت حفظ رتبه در موتورهای جستجو

25 مهر 1396