با سلام خدمت همه دوستان عزیز
امیدوارم حال تون عالی و لب تون خندون باشه.
ممنون از اینکه مقالات من رو پیگیری می‌کنید و امیدوارم تا به اینجای کار مطالبی که ارائه کردم و مواردی که ازشون صحبت شد, براتون مفید و مورد توجه تون قرار گرفته باشه. اگر هم این اولین مقاله ای هست که از من می خونید، از شما دعوت میکنم که بعد از اتمام این مقاله پروفایل ویرگول من رو چک کنید و از سایر مقالات و مطالبی که برای شما دوستان آماده کردم و تدارک دیدم نیز بازدید کنید و نظرات, پیشنهادات و سوالات ارزشمند خودتون رو در پایان هر کدوم از اون ها مطرح کنید و با من بقیه خوانندگان عزیز به اشتراک شون بذارید. ?
در این مقاله می خوام درباره یک موضوع جذاب و متفاوت با مقاله های قبلی باهاتون صحبت کنم.
پس کمربند هاتون! رو محکم ببندید و آماده باشید تا با هم دیگه وارد جهان گسترده و شگفت انگیز برنامه نویسی بشیم و یکی از فریمورک های محبوب CSS رو بررسی و درباره‌اش با هم دیگه گپ بزنیم.
قطعاً تا به اینجای کار متوجه شدید (و اصلا از عنوان مقاله هم کاملاً مشخص بود!) که می خوام درباره فریمورک بوت استرپ باهاتون حرف بزنم.
قراره تاریخچه و معایب و مزایای اون رو بررسی کنم و در کنار هم یه نگاه اجمالی به این فریم ورک که هر روز هم داره بر محبوبیت ش اضافه میشه داشته باشیم.
از اون جایی که در طول این مقاله از تعدادی اصطلاحات و کلمه هایی استفاده میشه که شاید برخی از دوستان و خوانندگان عزیز این مقاله آشنایی چندانی با اون ها نداشته باشن، مناسب می دونم که در ابتدای کار تعدادی از آن ها را که حیاتی و پر استفاده تر هستن، به صورت خلاصه، ساده و مختصر توضیحی درباره شون بدم.
پس بدون اینکه بیشتر صحبت و خسته تون کنم, میرم سر اصل مطلب و شروع به توضیح دادن مفاهیم و تعاریف میکنم و در ادامه میریم که مقاله این سری رو کنار هم شروع کنیم.
آن طور که ویکی پدیا ی فارسی برایمان توضیح داده است و بر اساس آن:
“Cascading style sheets یا به اختصار سی اس اس، یک شیوه نامه است که از آن برای توصیف نمایش یک سند (که به یکی از زبان‌های نشانه گذاری مثل اچ تی ام ال نوشته شده است) استفاده می شود.
سی اس اس یکی از فناوری های بنیادین (در کنار اچ تی ام ال و جاوا اسکریپت) در (World Wide Web) یا وب جهان گستر است.
سی اس اس روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه ها) برای صفحه های وب است.”
در یک کلام، به وسیله سی اس اس می‌توانیم پوسته و ظاهر هر صفحه وب را طراحی، شخصی سازی و به قولی آن را تزیین و سفارشی کنیم!
فریم ورک به معنی چهار چوب است و در برنامه نویسی هم در واقع یک چهار چوب نرم افزاری است که توسط یک یا چند توسعه‌دهنده طراحی و کد های آن نوشته شده و شامل قواعد و دستورالعمل هایی خاص و از پیش تعیین شده است که بعد از انتشار آن، سایر برنامه نویسان و توسعه دهندگان با اضافه کردن فایل یا فایل های آن به پروژه های خودو سپس فراخوانی، از آن استفاده و توابع, کلاس‌ها و دستور های موجود در آن باعث آسان‌تر شدن کدنویسی و صرفه جویی فراوان در زمان و هزینه‌ها و همچنین کاهش محسوس حجم و تعداد کد ها شده و در نتیجه باعث افزایش سرعت برنامه و پروژه و همینطور آسان شدن کار توسعه شده و علاوه بر آن سبب افزایش امنیت می شود. همانطور که از معنی این کلمه بر می‌آید، فریم ورک، به برنامه نویس این امکان را می‌دهد که در یک چهار چوب مشخص و معین و به صورت منظم کد نویسی کند و همچنین از چند باره نویسی بخش‌های مختلف پروژه و کد ها نیز جلوگیری می‌کند و کار مدیریت پروژه و نگهداری کد ها را هم هر چه آسان‌تر می کند.
(اگر تعاریفی که در بالا ذکر شدند برای شما خلاصه و کوتاه بود و می خواهید درباره این موارد عمیق تر و تخصصی تر بدانید و اطلاعات بیشتری کسب کنید، پیشنهاد می کنم که از مقالات اختصاصی قبلی ایی که درباره همین موضوعات در وبلاگ سایت موجود است دیدن فرماید، آن ها را مطالعه کنید و از توضیحات جامع و کامل و مفصل تر آن ها استفاده کنید و بهره ببرید.)
کلمه (Bootstrap) بوت استرپ از نظر لغوی، جدا از مفاهیم برنامه نویسی و طراحی وب، به معنای "خود راه انداز" است و بوت استرپینگ به معنی راه اندازی فعالیت و کاری به صورت مستقل و بدون استفاده از منابع و کمک های خارجی است. همچنین این عبارت در دنیای کامپیوتر کوتاه تر و مختصر شده و به صورت Booting به کار می رود که به معنی و نشان دهنده فرآیند راه اندازی سیستم و شروع به کار آن و لود و پردازش شدن اطلاعات اولیه درون پردازنده است.
جدای از این موارد همانطور که می دانید کلمه Boot در انگلیسی به معنی پوتین یا چکمه است. حال در این بین بعضی از پوتین ها زبانه کوچکی در انتهای خود دارند که در زمان پوشیدن برای بهتر قرار گرفتن پوتین در پا از آن استفاده می شود که به این زبانه و زائده بوت استرپ گفته می شود و با این نام شناخته می شود! و می توان گفت که شاید این نام از آن جا آماده است و کاربرد و حوزه استفاده آن در طول زمان دچار تغییر و دگرگونی شده است.
بوت استرپ فریم ورک و در واقع مجموعه ای است برای ایجاد و شخصی سازی قالب و ظاهر صفحات و نرم افزار های تحت وب که به صورت متن باز و رایگان عرضه شده و در دسترس است و شامل دستورات سی اس اس ی و اچ تی ام ال ی و کلاس ها و توابع جاوا اسکریپت و جی کوئری می شود و از آن همانطور که در قبل ذکر کردم برای ساخت و نمایش دکمه ها, تب ها, چک باکس ها، فرم ها و مرتب سازی و ستون بندی صفحات وب استفاده می شود.
بوت استرپ در سال 2011 و توسط مارک اتو و جاکوب تورنتون که از طراح و توسعه دهنده ها و کارمندان توییتر بودند و برای ایجاد یک چارچوب ظاهری مشخص و واحد در ابزار های توییتر نوشته و عرضه شد. البته پیش از آن هم نمونه ها و پروژه های مشابهی با همین رویکرد ساخته شده بودند که هر کدام به دلایلی مورد استقبال قرار نگرفته و فراموش شدند اما بوت استرپ توانست خیلی زود به یکی از محبوب ترین فریم ورک های طراحی سایت و پروژه های متن باز دنیا تبدیل شود. خصوصا با تغییرات و امکاناتی که در طی این سال ها و در نسخه های مختلف ایجاد و اضافه شد توانست به خوبی جای خود را در میان سایر فریم ورک ها و رقیبان دیگر باز کند و جایگاه و محبوبیت خود را حفظ و حتی افزایش دهد. در واقع بوت استرپ برای این ساخته و عرضه شد تا خلا میان طراحی ظاهری و کد نویسی را کم تر کند و همچنین زمان راه اندازی و شروع به کار را تا حد زیادی کاهش دهد و خروجی را مطابق با استاندارد های روز دنیا نمایش و ارائه دهد. همچنین بوت استرپ در داخل کد های خود از پیش پردازنده های محبوبی چون sass و less استفاده کرده است که نهایتا سرعت و سهولت بیشتری را هنگام کار با آن به ارمغان می آورد.
بوت استرپ صفحه را به 12 ستون تقسیم می کند و المان های صفحه در این ساختار قرار داده می شوند. برای استفاده از آن کافی است که کار با سیستم گرید بندی آن را یاد بگیرید که اتفاقا اصلا هم بیچیده و پر زحمت نیست!
این فریم ورک در اولین نسخه خود حتی از مرورگر های قدیمی نیز پشتیبانی می کرد. در نسخه دوم این فریم ورک خاصیت (Responsive) یا واکنش گرا به آن اضافه شد. خاصیت واکنش گرایی به این معنی است که سایت یا وب اپلیکیشن شما المان ها و بخش های مختلف را با توجه به ابعاد نمایشگر و نوع دستگاهی که کاربر از آن استفاده می کند تنظیم و بهینه می کند به گونه ای که بهترین تجربه کاربری و امکان تعامل برای کاربر به وجود آید و در این صورت علاوه بر مانیتور, نسخه دسکتاپ و در کامپیوتر, کاربر هنگام مشاهده سایت و صفحات وب در موبایل و تبلت و سایر دستگاه های دیگر نیز مشکلی نخواهد داشت.
در نسخه 2 بوت استرپ، اندازه ستون هایی که درباره آن ها صحبت شد، بر حسب پیکسل بود و این مورد در نهایت در نسخه 3 به درصد تغییر پیدا کرد تا تجربه بهتری را برای کاربر ها به همراه آورد.
در نسخه 4 تغییرات مهمی ایجاد شد و دیگر از ستون بندی با درصد خبری نبود و از خاصیت Flexbox برای چیدمان و تقسیم بندی صفحه استفاده می شد.
خاصیت فلکس باکس این امکان را می دهد که ستون های فریم ورک آزادی عمل بیشتری در صفحه داشته باشند و به وسیله چنین امکاناتی طراحان توانستند قالبهای زیباتر و با جلوه های بصری بیشتر و کاملا واکنش گرایی را بسازند.
در نسخه 5 این فریم ورک که در حال حاضر در نسخه غیر پایدار و همچنان در حال توسعه و رفع باگ است دو مورد از تغییرات عمده ای که رخ داده است حذف استفاده از (jQuery) جی کوئری و عدم پشتیبانی از ورژن های 10 و 11 مرورگر اینترنت اکسپلورر است.
همچنین لیست تعدادی از تغییرات دیگر بوت استرپ 5 از این قرار است :
· استفاده از Vanilla Javascript
· فونت سایز های واکنش گرا
· بهینه سازی navigation
· کتابخانه svg سفارشی
· آپدیت کلاس های css
· ارتقا به Hugo
· نسخه ESM
· عدم پشتیبانی از نود جی اس 8
· تغییر در DevDependencies
مزایا
در اینجا به تعدادی از مزایای این فریم ورک محبوب CSS اشاره می کنم که البته قطعا موراد بیشتر و جزئی تری نیز وجود دارد که هم با شروع به کار و امتحان این فریم ورک خودتان آن ها را متوجه خواهید شد و لمس می کنید و هم اینکه ذکر تمامی نکات و بررسی و توضیح جز به جز موارد از حوصله و هدف این مقاله خارج است. در نتیجه در این جا صرفا به بیان تعدادی از مزیت های استفاده از بوت استرپ به صورت تیتر وار بسنده می کنم.
· پشتیبانی اکثر مرورگر ها از این فریم ورک که باعث می شود به هنگام مشاهده صفحات وب در داخل مرورگر های مختلف کاربر با مشکلی در ظاهر و نمایش سایت مواجه نشود.
· سهولت در یادگیری و شروع به کار با آن که با یک دانش و آشنایی مقدماتی می توان از آن استفاده کرد و پیچیدگی خاصی ندارد.
· به دلیل استفاده از طراحی رسپانسیو و واکنش گرا سایت ها در صفحه نمایش هایی با ابعاد مختلف به درستی نمایش داده می شوند و به تجربه کاربری صدمه ای وارد نمی شود.
· رایگان است و شامل امکانات و ابزار های متنوع و کاربردی است.
· مستندات، جامعه کاربری و پشتیبانی قوی دارد که باعث می شود بتوانید مشکلات احتمالی که در هنگام پروژه با آن مواجه می شوید را به سرعت حل و رفع کنید.
· امکان طراحی و ایجاد جلوه های بصری و رابط های کاربری مدرن و اعمال سبک های طراحی به روز را دارد.
· بوت استرپ یک پروژه متن باز است و در گیت هاب میزبانی می شود و شما آزادی کاملی حتی برای تغییر و آزمایش و سفارشی و شخصی سازی آن را دارد.
و برای استفاده از آن درگیر مسائل خرید و صدور مجوز و موارد این چنینی نمی شوید.
راستش را بخواهید مزایا و حسن های بوت استرپ آن قدر زیاد هستند که به شخصه می توانم از اندک معایب و مواردی که از آن ها راضی نبوده ام چشم پوشی کنم و سخنی به میان نیاورم.
می توانم اینطور بگویم که همین اندک مواردی که از معایب بوت استرپ به حساب می آمدند نیز در طی این سالیان و نسخه های اصلی و آپدیت های هر کدام تا حد زیادی برطرف و رفع شده اند و در حال حاضر مورد خاص و قابل توجهی را که بخواهم در این جا ذکر کنم به ذهنم نمی رسد.
اما از شما دوستان و خوانندگان عزیز این مقاله دعوت می کنم که اگر تجربه کار با این فریم ورک را دارید و حین استفاده از آن با معایب و مواردی مواجه شدید که شما را اذیت یا دچار چالش کردند و باعث شدند که نتوانید پروژه و طراحی و روند کار را آن طور که می خواستید و در ذهن داشتید جلو ببرید و برای شما مانع و مشکل ایجاد کردند، حتما آن ها را ذکر و با من و سایر خوانندگان در میان بگذارید.
همچنین اگر حین استفاده از بوت استرپ با چالش هایی مواجه شدید که توانستید راه حل آن ها را پیدا کنید و بر آن ها غلبه کنید، لطفا آن ها را نیز در قسمت نظرات بیان و ذکر کنید تا سایر دوستان و علاقمندان دیگر دوباره دگیر و دچار چنین مشکلاتی مشابهی نشوند.
شروع به کار
در این قسمت می خواهم صرفا یک راهنمای شروع به کار خلاصه، سریع و ساده را ذکر کنم تا دوستانی که هیچ ایده ای از چگونگی استفاده از این ابزار را ندارند هم بتوانند این فریم ورک را تجربه کنند و طعم استفاده از آن را بچشند.
بهترین و سر راست ترین راه استفاده از بوت استرپ, مراجعه به سایت رسمی خود آن به نشانی https://getbootstrap.com باشد.
در همان صفحه اصلی و بالای سایت می توانید گزینه ی دانلود را مشاهده و بر روی آن کلیک کنید.
در صفحه جدیدی که باز می شود می توانید دو نوع متفاوت از آخرین نسخه بوت استرپ را مشاهده و دانلود کنید که یکی از آن ها نسخه کامپایل، کم حجم و آماده برای استفاده بوت استرپ و نسخه دیگر سورس فایل های آن است که بسته به نیاز خود می توانید یکی از دو مورد را انتخاب و دانلود و سپس داخل پروژه خود آن را اضافه و آدرس دهی کنید.
علاوه بر این، دو روش دیگر نیز برای استفاده از بوت استرپ و اضافه کردن آن به پروژه تان در دسترس است که یکی از آن ها استفاده از CDN بوت استرپ و ورژن کش شده آن به جای دانلود کردن دستی آن است و روش دیگر نصب آن از طریق پکیج منیجر های مختلف می باشد که طریقه نصب برای هر کدام و دستورات لازم برای نصب در هر محیط را در همان صفحه و برای هر پکیج منیجر به صورت جدا و کاملا واضح، مشخص و توضیح داده شده است.
در این مقاله سعی کردم نگاهی اجمالی به یکی از محبوب و معروف ترین فریم ورک های CSS یی حال حاضر داشته باشم. در ابتدا بوت استرپ را برای عزیزانی که آشنایی کافی با آن نداشتند معرفی کردم و سپس به بررسی تغییرات و ویژگی های آن در طی مدتی که از عرضه آن می گذرد پرداختم و همچنین تعدادی از امکانات و مزایا و معایب (که البته در این قسمت موردی را ذکر نکردم!) را بیان کردم و در آخر نیز یک راهنمای شروع به کار سریع و خلاصه برای آن ارائه دادم که البته برای استفاده از آن علاوه بر آشنایی با دستورات و کلاس های تعریف شده خود بوت استرپ نیاز به دانش اچ تی ام ال و سی اس اس نیز دارید.
در آخر جا دارد بابت وقتی که برای مطالعه این مقاله گذاشتید سپاس گذاری کنم و امیدوارم که مطلب مفیدی را برای شما ارائه و آماده کرده باشم، بتوانید از آن استفاده کنید و برایتان کاربردی و مورد توجه بوده باشد.
از شما می خواهم که لطفا تجارب, نظرات و حتی سوال های خود را درباره بوت استرپ و این مقاله را بیان کنید همچنین اگر جواب سوالات دیگر کاربران را می دانید لطفا آن ها را راهنمایی کنید و اگر این مقاله را دوست داشتید و آن را مفید دیدید لطفا برای دوستان, همکاران و افرادی که فکر می کنید برای آن ها نیز مفید خواهد بود و از مطالب آن استفاده می کنند، بفرستید و لینک آن را به اشتراک بگذارید تا دیگران نیز بتوانند آن را بخوانند.
روز و روزگار تون خوش و بی غم
مراقب خودتون و عزیزان تون باشید
pooyast– تابستان 1399
