برگزیده های پرشین تولز

بوت استرپ (Bootstrap) چیست ؟ آیا به کار شما می آید ؟

hooman_the1

Registered User
تاریخ عضویت
18 آگوست 2012
نوشته‌ها
103
لایک‌ها
5
بوت استرپ (Bootstrap) امروزه به یک ابزار ضروری برای سازندگان وب سایت تبدیل شده است.

اما بوت استرپ دقیقا چیست ؟

تا اینجا فهمیدیم که بوت استرپ ابزار مفیدی است ، اما برای چه کاری مفید است و دقیقا چگونه و در چه مواردی به کمک سازندگان سایت می آید ؟

این ابزار توسعه برنامه های تحت وب ، توسط دو تن از کارکنان توییتر به نام Mark Otto و Jacob Thornton ساخته شد .

وب سایت رسمی بوت استرپ ، این نرم افزار را اینگونه توصیف می کند :

" معروفترین و محبوب ترین فریم ورک ، JS ، HTML و CSS برای ایجاد پروژه های ریسپانسیو (Responsive) و بهینه شده برای دستگاههای موبایل ، تحت وب "

بوت استرپ به زبان ساده :

بوت استرپ مجموعه مفید و با قابلیت استفاده چندباره ، از کدهای از پیش نوشته شده HTML ، CSS و JavaScript است . همچنین بوت استرپ ، یک front-end framework است که طراحان و برنامه نویسان وب سایت با استفاده از آن می توانند به سرعت وب سایتهایی ریسپانسیو طراحی کنند .

whatboot.jpg

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

بوت استرپ مجانی است .
همچنین بوت استرپ بر روی GitHub قرار دارد و بسادگی از طریق سایت getbootstrap.com قابل دانلود است .

ادامه دارد ...

منبع : http://appzweb.ir/articles/bootdefine.htm
 

hooman_the1

Registered User
تاریخ عضویت
18 آگوست 2012
نوشته‌ها
103
لایک‌ها
5
چرا معتقدم بوت استرپ بهترین انتخاب برای طراحان سایت است ؟

مزایای بوت استرپ را به 8 دسته تقسیم میکنم :

  1. Responsive Grid های بوت استرپ .
    دیگر لازم نیست ساعت ها زمان صرف کد نوشتن برای کدهای Grid کنید ، بوت استرپ بصورت پیش فرض سیستم grid در داخل خود تعبیه کرده است .
    حالا میتوانید مستقیما به سراغ نوشتن محتوی داخل وب سایت بروید !
    laptop-grid-system-2.jpg

    تعریف breakpoint دلخواه برای هر ستون در قالب های extra small , small , medium , large , و extra large . و در صورتی که قالب های پیش فرض مطابق نیازهای شما باشد ، حتی نیاز به تعریف مقادیر هم نخواهید داشت .
  2. تصاویر ریسپانسیو بوت استرپ .
    بوت استرپ حاوی کدهایی است که بصورت خودکار و بر اساس سایز نمایشگر ، ابعاد تصاویر را تغییر می دهد . فقط کافیست که کلاس .img-responsive را به تصویرتان بدهید ، بقیه کارها بر عهده بوت استرپ خواهد بود .
    بوت استرپ ابعاد تصویر را برایتان تغییر خواهد داد .
    همچنین ، بوت استرپ می تواند در صورت استفاده از کلاسهای img-circle و img-rounded ، قیافه تصویر را تغییر دهد ، و تمام این ها بدون دخالت شما در کد های CSS نوشته شده انجام می شود .
  3. اجزاء (components) بوت استرپ .
    در داخل بوت استرپ تعداد زیادی کامپوننت وجود دارد براحتی می توانید از آنها در وب سایتتان استفاده کنید ، از جمله :
    • نوار ناوبری (Navigation bar)
    • دراپ داون ها (Dropdowns)
      Bootstrap-DropDown.jpg
    • نوار پیشرفت کار (Progress bars)
    • Thumbnails
    • و خیلی چیزهای دیگر ...
    این کامپوننت ها نه فقط ظاهر زیبایی در وب سایت شما دارند بلکه می توانید مطمئن باشید که همه کاربران با هر وسیله ای که وب سایت شما را مشاهده کنند، آن را یکسان می بینند .
ادامه دارد ...

منبع : http://appzweb.ir/articles/bootdefine.htm
 

hooman_the1

Registered User
تاریخ عضویت
18 آگوست 2012
نوشته‌ها
103
لایک‌ها
5
4.JavaScript های بوت استرپ .

هنوز کافی نیست ؟ JQuery را امتحان کنید !
بوت استرپ به کاربرانش این امکان را می دهد که از تعداد زیادی پلاگین های JQuery استفاده کنند . JQuery به شما این امکان را می دهد که از قابلیت هایی مانند تعامل در صفحات ، ایجاد popup های متنوع ، تصاویر چرخ و فلکی (Image carousels) و پلاگینی بنام “scrollspy” که باعث می شود نوار ناوبری (navigation bar) با اسکرول کردن صفحه بهینه شود ( این یکی رو من خیلی دوست دارم ) و خیلی چیزهای دیگر ، استفاده کنید .


5.سفارشی سازی (Customizability) بوت استرپ .

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

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

customize.jpg



6.انجمن های (Community) بوت استرپ .

بخاطر داشتن تعداد زیادی پروژه متن باز (Open Source Project) ، تعداد بیشماری طراح و برنامه نویس در جوامع مجازی مربوط به بوت استرپ با هم در ارتباطند . بخاطر حضور در GitHub ، کدنویسان حرفه ای می توانند در بهینه سازی ساختار کدهای بوت استرپ مشارکت کنند . همچنین در این انجمن ها ، همه افراد می توانند مشارکت کرده و تجربیاتشان را در اختیار سایر کاربران قرار دهند .
بوت استرپ یک حساب فعال در توییتر ، یک وبلاگ و حتی یک حساب مستقل در Slack دارد . این موارد غیر از برنامه نویسانی است که در سایت Stack Overflow به شما در حل مشکلاتتان یاری می رسانند ، فقط کافیست سوالاتتان را در زیر موضوع bootstrap مطرح کنید .


ادامه دارد ...

منبع : appzweb.ir



 

hooman_the1

Registered User
تاریخ عضویت
18 آگوست 2012
نوشته‌ها
103
لایک‌ها
5

7
. قالب های (Template) اکسترنال بوت استرپ

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

در اینجا چند تا از این وب سایت ها را آورده ایم :


templates.jpg


ادامه دارد ...

منبع : appzweb.ir
 

hooman_the1

Registered User
تاریخ عضویت
18 آگوست 2012
نوشته‌ها
103
لایک‌ها
5
نقاط ضعف بوت استرپ
با توضیحاتی که دادم ممکن است فکر کنید که فقط احمق ها از بوت استرپ استفاده نمی کنند !
اما بخاطر داشته باشید هر چیزی ، دو روی متفاوت دارد .
مانند تمام چیزهای دیگر در دنیا ، حتی بوت استرپ هم نقاط ضعفی دارد .
بیایید شکایت هایی را که ممکن است در مورد بوت استرپ بشنوید را بررسی کنیم :

ترکیب کدهای بوت استرپ ، پیچیده است !
در ابتدای کار با بوت استرپ ، بعضی کدهای آن گیج کننده بنظر می رسد . برای مثال ، هنگام استفاده از سیستم Grids ، برای ایجاد یک ستون که یک سوم صفحه را اشغال کند ، نیاز است که یک کلاس با نام .col-md-4 به آن اضافه کنید .

4 ؟ این 4 از کجا آمده ؟

بی شک ، عدد 4 ممکن است باعث شود فکر کنید که ستون مربوطه ، یک چهارم از صفحه را اشغال می کند ، نه یک سوم . اما این عبارت ( عدد 4 ) بامعنی است ! بوت استرپ از سیستم 12 ستونی استفاده می کند و 4 ، یک سوم 12 ، است . اما این ، برای تازه کارها مشکل ساز است .

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

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

ادامه دارد ...

منبع : appzweb.ir
 

hooman_the1

Registered User
تاریخ عضویت
18 آگوست 2012
نوشته‌ها
103
لایک‌ها
5
بوت استرپ باعث می شود من کدزنی را یاد نگیرم !
همیشه این خطر وجود دارد که با استفاده از بوت استرپ ، شما بدون متوجه شدن ساختار کدها ، فقط یادبگیرید از آنها استفاده کنید . اما با وقت گذاشتن و بررسی دقیق آنچه انجام می دهید ، حتی می توانید با استفاده از بوت استرپ دانش کدنویسی خود را تقویت کنید ، به شرطی که از کدهای آماده بوت استرپ به عنوان نمونه کد ، استفاده کنید .

item-bootstrap.jpg


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

بوت استرپ بشدت محبوب است و از آن برای ایجاد سایت های فوق العاده ای استفاده شده . باور نمی کنید ؟ بهتر است سری به سایت هایی مانند MongoDB’s یا NASA و همچنین FIFA.com بزنید.

پایان

منبع : appzweb.ir
 
بالا