bootstrap چیست و چه کاربردی دارد؟

bootstrap چیست و چه کاربردی دارد؟ - وربال

varbal آموزش برنامه نویسی, آموزش بوت استرپ, برنامه نویسی تحت وب, طراحی وب سایت

بوت استرپ و کاربرد آن

bootstrap چیست و چه کاربردی دارد؟

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

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

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

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

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

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

طراحی سایت به روش Responsive Design چیست و چرا اهمیت دارد؟ بررسی تفاوت نسخه موبایل برای سایت و طراحی سایت responsive در کارایی سایت و رضایت کاربران
مراجعه نمایید.

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

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

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

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

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

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

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

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

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

بوت استرپ ۴ تحولی در ستون بندی صفحات
نسخه جدید بوت استرپ ۴ سال بعد از انتشار اولین نسخه آن معرفی شد. مهمترین تغییر در نسخه جدید را میتوان استفاده از Flex در ستون بندی ها دانست. در نسخه ۲ بوت استرپ سایز بندی ستون ها براساس پیکسل انجام میشد که در نسخه ۳ برای انعطاف پذیری بیشتر به درصد تغییر یافت. در نسل چهارم فریم ورک بوت استرپ
نیز ستون بندی ها براساس درصد انجام میشود با این تفاوت که شما دیگر محدود به درصد هایی خاص نیستید.

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

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

bootstrap چیست و چه کاربردی دارد؟

bootstrap چیست و چه کاربردی دارد؟

[تعداد: 1    میانگین: 5/5]

شاید دوست داشته باشید:

کار با متون و کلمات در html - وربال

کار با متون در html

کار با متون و کلمات در html


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


متن کامل در ادامه مطلب

آموزش نصب وردپرس روی cpanel - وربال

آموزش نصب وردپرس روی هاست cpanel

آموزش نصب وردپرس روی cpanel


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

پس از دریافت آخرین نگارش وردپرس، وارد سی پنل شوید. این وارد شدن می‌تواند به صورت مستقیم یا غیر مستقیم (از طریق FTP) باشد.


متن کامل در ادامه مطلب

معرفی زبان php - وربال

معرفی زبان php

معرفی زبان php و مزیت های آن در طراحی سایت


زبان PHP یک زبان اسکریپتی اوپن سورس است که برای طراحی برنامه های تحت وب سرور به کار می رود. سمت سرور بودن به این معناست که صفحات PHP ابتدا توسط سرور (که می تواند از نوع Apache یا IIS) باشد، پردازش شده و سپس خروجی به صورت کدهای HTML و جاوا اسکریپت برای مرورگر کاربر ارسال می شود. به عبارت دیگر وظیفه اجرای صفحات PHP به عهده سرور وب هاست سایت می باشد برخلاف HTML یا جاوا اسکریپت.
PHP مخفف عبارت Hypertext PreProcessor به معنای پیش پردازند فرامتن می باشد گه در سال ۱۹۹۴ توسط رسموس لردورف ایجاد شد و سپس توسط سایرین توسعه و گسترش پیدا کرد. اولین نگارش عمومی آن …


متن کامل در ادامه مطلب

پاسخی بگذارید

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