Bootstrap چیست؟

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

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

bootstrap elements

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

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

تاریخچه کلمه Bootstrap چیست؟

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

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

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

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

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

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

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

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

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

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

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

مشکل Bootstrap چیست؟

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

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

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

بوت استرپ 4 تحولی در ستون بندی صفحات

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

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

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

استفاده از flex در بوت استرپ 4

اطلاعات و تجربه شما در کار با Bootstrap را با ما و دیگران به اشتراک بگذارید و اگر منابع فارسی مناسبی برای آموزش این سیستم می شناسید در بخش نظرات همین سایت معرفی کنید.

پاسخ‌گوی سوالات شما هستیم سوال شما توسط کارشناسان وبسیما پاسخ داده شده و از طریق پیامک اطلاع رسانی می‌شود
نام و نام خانوادگی نام و نام خانوادگی به فارسی
آدرس ایمیل sample@domain.com
تلفن همراه 09 XX XXX XXXX
متن نظر
ثبت دیدگاه
  • پویا ذوالنوریان
    01/05/2020

    با سلام ممنون بخاطر مطالب مفید و طراحی زیبای سایتتون
    میخواستم بدونم شما به چه زبان هایی وبسایت خودتون رو طراحی کردین
    ممنون

    • وبسیما
      WEBSIMA
      02/05/2020

      سلام دوست عزیز
      این سایت بر بستر وردپرس و با استفاده از فریم ورک بوت استرپ طراحی شده است

  • نعمت رحیمی
    13/05/2019

    من HTML و css رو در حد متوسط می‌دونم
    میخواستم بدونم ، آیا با تمرین روی بوت استرپ۴ میتونم روی HTML CSS هم مسلط بشم یا اینکه باید قبلش این دو زبان رو مسلط بشم؟؟؟

    • وبسیما
      WEBSIMA
      18/05/2019

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

  • شکارچی بزرگ
    17/10/2017

    عالییییییییییییییییییییییییییییی

    • سعید جوادزاده
      07/02/2019

      ممنون عالی بود
      اگر امکان دارد بفرمایید لاراول بهتر است یا بوت استرپ و چه تفاوتی با هم دارند ؟

      • وبسیما
        WEBSIMA
        12/02/2019

        سلام دوست عزیز
        لاراول یک فریم ورک برنامه نویسی بر پایه php است و برای طراحی Back-end سایت استفاده میشود ولی بوت استرپ یک فریم ورک HTML,CSS,JS است که برای طراحی Front-end و نمای بیرونی سایت کاربرد دارد. در نتیجه مقایسه آنها با یکدیگر درست نیست و ممکن است در یک پروژه از هر دو استفاده شود.

  • azadeh
    12/07/2017

    با سلام.به محض اینکه وب سایتتون رو دیدم گفتم چه طراحی منحصر به فردی.من 25 سالمه .کارشناسی IT.در حال حاضر دارم دوره طراحی سایت یا همان ciw رو میگزرونم.خیلی دوست دارم برای همچین شرکت هایی توی بخش مربوط به رشته م کار کنم تا بتونم توی زمینه طراحی سایت تجربه کسب کنم.به خصوص طراح همچین سایتی.حتی شاید به عنوان کارآموز

    • وبسیما
      WEBSIMA
      15/07/2017

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

  • ابوالفضل
    09/07/2017

    مرسی از توضیحات کامل و خوبتون

  • promised
    06/03/2017

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

    • وبسیما
      WEBSIMA
      07/03/2017

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

  • امیر
    01/02/2017

    گرافیک سایتتون عالی دیزاینش عالیتر.

    • وبسیما
      WEBSIMA
      04/02/2017

      ممنون دوست عزیز، لطف دارید

  • ایرانی
    31/01/2017

    سپاس بخاطر مقاله خوب
    یک ایراد
    وقتی کسی نظر میذاره و شما پاسخ میدید، پاسخ شما بالاتر از نظر طرف ثبت میشه! و این گیج کننده س! من اولش وقتی نظر شما رو دیدم گفتم این در پاسخ به چه سوالیه! بعد پایین رو دیدم که نظر اونجاست!

    • وبسیما
      WEBSIMA
      01/02/2017

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

  • دانلود فیلم
    31/12/2016

    سلام.واقعا وبسایت خوبی دارید

  • رزیتا
    10/12/2016

    سلام.وبسایتتون فوق العادس.به کارتون ادامه بدین

  • ساخت سایت
    03/11/2016

    ممنون از سایت خوبتون و مطلب مفیدتون…

  • اس ام اس
    23/10/2016

    مطلب خوبی بود ممنون

  • محمدحسین
    21/08/2016

    سلام. چه تفاوتی بین bootstrap.css و boostrap-theme.css و bottstrap-min.css وجود دارد؟

    • وبسیما
      WEBSIMA
      22/08/2016

      سلام
      این از اون سوالای خوب بود. bootstrap.css همه طراحی های پایه رو در خودش داره و هسته اصلی فریم ورک محسوب میشه. bootstrap-theme.css سایه ها و انیمیشن های اضافی رو در خودش داره و کمی دیزاین اولیه رو تغییر میده. و bootstrap-min.css در واقع نسخه کم حجم شده فایل اصلیه که برای مرحله نهایی پروژه مورد استفاده قرار میگیره

  • ali
    20/08/2016

    با سلام و خسته نباشید .

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

    متن گوگل وبستر ارور :

    Sneaky mobile redirects detected on ***

    لطفا راهنمایی کنید .
    ممنون .

    • وبسیما
      WEBSIMA
      21/08/2016

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

  • www.academy-it.ir
    11/08/2016

    با سلام ، مطلب فوق العاده آموزنده ای بود
    در ضمن استفاده زیادی از کتاب هاتون کردم لطفا بخش اموزش ویدئویی رو نیز به سایت بیفزایید

    • وبسیما
      WEBSIMA
      13/08/2016

      سلام دوست عزیز
      بخش آموزش ویدئویی همین الان هم راه اندازی شده شما میتونید به آدرس school.websima.com مراجعه کنید

  • Bahar
    26/05/2016

    عرض سلام و احترام خدمت همه ی شما عزیزانی مه حتی کوچکترین قدمهارو برای این سایت برداشتین.
    بدنبال گشت و گزار جهت آشنایی با بوت استرپ ! جوری جذابیت و کلاسیک بودن سایت زیبا بود که شوق یادگیری داد …
    و در ادامه تمام مطالب هم عالی و روان .
    لینک های قرار داده شده بجا ، از دغدغه ما خیلی کم کردین .
    شنیدین میگن هیچ جا خونه خود آدم نمیشه !! دقیقا اینجا حس راحتی و امنیت خاطر رو ب ما میده ک هیچ سایتی مثل اینجا نمیشه ♥ .
    براتون آرزوی بهترین هارو دارم …

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

    • وبسیما
      WEBSIMA
      27/05/2016

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

  • reza
    13/02/2016

    سلام اصن چطوری ازBoot strapاستفادهکنم

    • وبسیما
      WEBSIMA
      13/02/2016

      سلام دوست عزیز
      آیا با کدنویسی HTML و CSS آشنا هستید؟

  • مهدی
    11/02/2016

    salam mamnon

  • shahri
    02/01/2016

    سلام.
    ممنون بابت توضیحاتتون.
    یه سوال!
    فرق بین bootstarp و dreamweaver چی هستش؟!
    اصلا نوع کاربردشون به هم ربطی داره؟
    من تازه وارد دنیای طراحی سایت شدم…
    پیشاپیش ممنونم بابت پشتیبانی خوبتون

    • وبسیما
      WEBSIMA
      03/01/2016

      سلام
      Bootstrap یک فریم ورک برای کدنویسی به زبان HTML است و dreamweaver یک نرم افزار که این کدها رو توش مینویسیم. مثل نرم افزار Word که برای نوشتن متن و مقاله استفاده میشه.

  • رسول آقاعبدالهیان
    25/12/2015

    سلام
    ممنون از توضیحاتتون در مورد این نرم افزار

    من کاملا با فتوشاپ مسلطم و html رو بلدم و css
    البته منظورم از بلد بودن اینه که کدها رو بلدم فتوشاپ رو هم بلدم
    اما بلد نیستم چطوری اونها رو با هم مخلوط کنم که مثلا یه قالب برای جوملا یا وردپرس
    بسازم که درست روش سوار بشه
    آیا نرم افزار bootstrapاین مشکل رو حل کرده
    خیلی ها رو دیدم که با ترکیب فتوشاپ واچ تی ام ال ال سی اس اس طراحی قالب رو انجام میدن و ترکیبشون با دریم ویور اما من همه این ها رو بلدم مام ترکیبشون رو نمیدونم bootstrap این ترکیب رو آیا میتونه جبران کنه
    ممنون از پاسختون

    • وبسیما
      WEBSIMA
      26/12/2015

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

  • Matori73
    20/12/2015

    درود !
    چند ماهی هست که نسخه 4 بوت استرپ هم منتشر شده که البته جای پیشرفت و .. داره .

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

    در مورد نسخه 4 که فقط یک سایت یافتم که با افزونه، راستچین کرده !
    در مورد نسخه 3 هم که راستچین فراوان هست و سوالی که برای من پیش اومده اینه که استایل RTL رو میشه روی نسخه های بالاتر هم استفاده کرد ؟ چون آخرین نسخه3، 3.3.6 هست ولی آخرین نسخه RTL که پیدا کردم 3.1 بود، سایتی که شما معرفی کردید هم که نسخه 2.3.2 رو راستچین کرده ..

    تشکر ..

    • وبسیما
      WEBSIMA
      20/12/2015

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

      • Matori73
        20/12/2015

        درود !
        همیشه به سرعت و کیفیت پاسخگویی شما ایمان داشتم، خیلی ممنونم (:

        • وبسیما
          WEBSIMA
          20/12/2015

          خواهش میکنم دوست عزیز، موفق باشید

  • حمزه
    03/12/2015

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

  • احمد شعیب جویا
    02/12/2015

    خیلی تشکر از ویب سیما
    من خیلی مطالب را در انترنیت راجع به هر چیزی جستجو کردم و خواندم اما هیچ مطالبی را ندیدم که مثل شما واضع و روشن شرح داده باشد!
    امید هر مطلبی را واضح و روشن شرح بدهید!
    خیلی ممنون!

    • وبسیما
      WEBSIMA
      05/12/2015

      خواهش میکنم دوست عزیز، تلاش ما هم همین بوده

  • بهناز
    08/11/2015

    با سلام
    وبسایتتون یکی از جذاب ترین وبسایت هایی هست که در عین سادگی طراحی خیلی هم کاربر پسنده.جدای از ظاهر , مطالب رو خیلی زیبا و مفهومی توضیح دادین که برای کسی مثل من که وقت کم و مطالب زیادی برای یادگیری داره خیلی خیلی مفیده.

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

    • وبسیما
      WEBSIMA
      09/11/2015

      سلام دوست عزیز
      از لطف و توجه شما سپاس گزارم، موفق باشید

  • سما
    01/11/2015

    سلام. من تاازه وارد کار طراحی سایت شدم. در واقع دارم یاد میگیرم. میخوام یک سایت فروشگاه آنلاین طراحی کنم. برای طراحی گرافیکش واااقعا گیج شدم. bootstrap یا ترکیب فوتوشاپ و اچ تی ام ال و css یا…
    نمیدونم چیو برم یاد بگیرم. میخوام ظاهر سایتم حرفه ای باشه.
    خواااهش میکنم راهنماییم کنید

    • وبسیما
      WEBSIMA
      01/11/2015

      سلام
      بحث طراحی و کدنویسی کاملا جدا از هم هستند. بهتره که از یک طراح و گرافیست حرفه ای کنار شما باشه تا ترکیب کار نتیجه مناسب رو ایجاد کنه. یادگیری bootstrap خیلی خوبه ولی به تنهایی کمکی به شما در طراحی حرفه ای نمیکنه.

  • الناز
    03/08/2015

    سلااااااام.خوبید؟
    واو تم جدید عالیییییه خیلی حال کردم
    موفق باشید

    • وبسیما
      WEBSIMA
      03/08/2015

      سلام مرسی
      ممنون از شما به خاطر اظهار نظر و لطفی که دارید.

  • مرتضی
    02/08/2015

    سلام به تیم پر تلاش وب سیما.
    من دارم روی سئو سایت کار میکنم خطای ۴۰۴ بوت استرپ رو توسط یه سایت آنالیز وب پیدا کردم(سایتgtmetrix.com).
    چطور میتونم این مشکل رو حل کنم؟
    پیشاپیش از تلاش و لطف شما سپاسگزارم.

    • وبسیما
      WEBSIMA
      02/08/2015

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

  • طراحی سایت webrgb
    13/07/2015

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

    • وب سیما
      13/07/2015

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

  • F_B
    28/06/2015

    سلام
    میخواستم ازتون بپرسم بنطرتون منظور : “رعایت اصول بوت استرپ در المان های یک صفحه ” چی هست؟ برای استفاده از بوت استرپ باید اصول خاصی تو صفحه رعایت بشه؟
    و این که برای رسپانسیو کردن یک صفحه باید همه ی المان هاش ازکلاس های بوت استرپ استفاده کنند ؟
    ممنون میشم

    • وب سیما
      30/06/2015

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

  • tablokar
    10/06/2015

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

    • وب سیما
      10/06/2015

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

  • هادی
    29/04/2015

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

    • وب سیما
      03/05/2015

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

  • ahmad
    29/03/2015

    با سلام داداش من مي خوام بالاي صفحه سايتم رو مثل سايت شما كه يگ خط مشكي داره و وقتي روي سه خط قرمز كليلك ميكنيم باز ميشه ، طراحي كنم اگه ممكنه اسمش يا كدش رو مي تونين بهم بدين ؟
    ممنونم

    • وب سیما
      04/04/2015

      با سلام
      فکر کنم اگر responsive menu button یا Mobile Menu button جستجو کنید نمونه های جالبی پیدا خواهید کرد.

  • طراحی سایت
    25/01/2015

    با تشکر و خسته نباشيد سايت خيلي خوب و مفيدي داريد موفق و پيروز باشيد

    • وب سیما
      25/01/2015

      ممنون از شما دوست و همکار عزیز

      • سمیرا
        05/03/2015

        سلام ببخشید میخواستم قالبم در حالت فارسی از فایل bootstrap و وقتی انگلیسی میکنم از فایل bootstrap-rtl بخونه.چه جوری باید اینکارو بکنم؟

        • وب سیما
          07/03/2015

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

  • محسن
    20/01/2015

    Bootstrap یک فریم ورک هست؟
    توابع php رو نداره؟
    با کیک php میشه استفاده کردش؟

    • وب سیما
      21/01/2015

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

  • محمد
    26/12/2014

    توضیح کاملی بود بسیار ممنون

    • وب سیما
      27/12/2014

      خواهش میکنم دوست عزیز؛ موفق باشید

  • م.رحمانی
    14/11/2014

    میتوانید نسخه راست چین را در لینک زیر دریافت کنید.
    https://github.com/imrahmani/bootstrap-rtl

    • وب سیما
      15/11/2014

      ممنون از لینک شما

  • پوستک وتکنولوژی
    16/09/2014

    جالب بود

  • بیژن
    26/08/2014

    عالی بود، ممنون

  • سعید شیرزادیان
    27/04/2014

    سلام
    مطلب بسیار زیبایی تهیه شده بود
    متشکرم

  • فرشاد
    02/04/2014

    من خلاقیتم رو دوست دارم.
    استفاده از این ابزار ها وقتی حال میده که دنبال یه کد خاص باشی که خودت نمیتونی درستش کنی! “البته خودم اینو قبول ندارم.”
    هر چند این Bootstrap ضعیف به نظر میاد اما کاربردیه؟مگه نه؟
    همون UI kit خودمون هست دوستان درسته؟
    http://www.getuikit.com یا ir
    یه مدل دیگه هم هست الان یادم نمیاد.

    • وب سیما
      03/04/2014

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

  • مهدی
    01/04/2014

    سلام و ممنون از مطالب مفید کلی قسمت وبلاگ سایتتون .
    چند تا مورد در این باره لازم شدش بگم ::

    1- موضوعی بیان کردید درباره اینکه الان تقریبا همه سایت ها شبیه به هم هستش ، و تقریبا اشاره کردید که این خوب نیستش ، راستش حرفتون قبول دارم اما باید این رو در نظر داشته باشید که تقریبا همه در حال حاضر کسانی که رو به حرفه ای گرایی پیش می روند ،دیگه زیاد سمت سایت هایی که دارای گرافیک های به صورت bitmap یا تصویری هستش نمی روند و رو به طراحی های فلت که با استفاده از رنگ می باشد رو میارن ، به دلیل اینکه تصاویر و bitmap ها حال واکنشگرایی ندارند اما رنگ ها چون فقط از رنگ استفاده شده خوب به هر اندازه که میخواهید حالت واکنش گرایی دارند .
    2 – من خودم به شخصه چیزی حدود دو سال وقتم با بوت استرپ گذراندم … نظر شخصی خودم این هستش که اگر میخواهید سایتتون خیلی زود طراحی و قالب بندی کنید از بوت استرپ استفاده کنید ، امکان کاستومایز کردن اون هم وجود داره خیلی هم راحت هستش … اما خوب مشکلات خاص خودش رو هم در پی داره . مثلا شما برای طراحی قالب های برای سیستم های وردپرس و جوملا اگر قرار باشه از بوت استرپ استفاده کنید تقریبا باید سواد کد زنی در حیطه جاوا اسکریپت یا جی کوئری کامل داشته باشید . چون بعضی مواقع باید از طریق جی کوئری فرایند دادن کلاس ها به آیتم ها را داشته باشید چون دسترسی مستقیم به اون دستورات ندارید . اما برای طراحی سایتهایی که با استفاده از سی.ام.اس های تجاری شرکتی تهیه می شود استفاده از بوت استرپ یک مزیت هستش اون هم به دلیل اینکه خودتون می دونید چه کدهایی و کجا استفاده کردید ..
    3 – یه مشکلی که بوت استرپ داره فایل JS اون هستش ، که تقریبا من از هر ده پلاگین یا افزونه ای که برای وردپرس و جوملا نصب میکردم یکی یا دو تا با فایل JS بوت استرپ تداخل داشتش و اجازه اجرا شدنش نمیداد …
    4- یکی از موضوعات که برام خیلی جالب بودش از اکثر همکاران و کاربرانی که با بوت استرپ کار میکردن دلیل کار با این فریم ورک پرسیدم همگی به خاطر استفاده از ساختار Responsive بودن این فریم ورک از آن استفاده میکردن که جا داره بگم این کاملا اشتباه هستش … مثل این میمونه که تو بری یه ماشین بی.ام.دبیلو بخری و لاستیک زاپاسش بندازی رو پیکان و سوار پیکانت بشی !!!
    اگر دوستان قرار هستش که فقط خاصیت ریسپانسیو گرایی استفاده کنند کافی هستش که در اینترنت سرچ کن به نتایج بهتری می رسن .
    5- در کل خودم زیاد از بوت استرپ خوشم نمیادش اونم به دلیل اینکه کامل تنبلت میکنه … در حالت عادی نیاز به سواد کد زنی خاصی نداره و این خیلی بده . اینکه شما مثلا برای سایت تب خودتون درگیر jQery کنید و چیزی یاد بگیرید بهتره یا اینکه فقط یه دستور HTML با یک کلاس خاص وارد کنید ؟؟؟

    من تجریبات و نظرم گفتم دیگه با خود دوستان که آیا استفاده کنن یا نکنن
    !!

    بازم ممنون بابت مطالب مفید و خوبتون .

    • وب سیما
      02/04/2014

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

      • مهدی
        02/04/2014

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

        • وب سیما
          02/04/2014

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

  • آرش
    31/03/2014

    نحوه استفاده از بوت استریپ به چه صورت است؟
    من که از سایت فارسیشم زیاد سر در نمیارم

    • وب سیما
      31/03/2014

      برای اینکه بتونید استفاده کنید باید تسلط خوبی به HTML و CSS داشته باشید.
      بعد از فراخوان فایل های CSS و JS در هدر صفحه باید کدهای HTML و کلاس های CSS اونها رو مطابق با استانداردهای از پیش تعیین شده در Bootstrap و مطالبق با مثال های ارائه شده بنویسید.

  • تبلیغات ارزان پیامکی چاپار341
    29/03/2014

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

    • وب سیما
      29/03/2014

      سلام دوست عزیز، نظرات شما دوستان رو که میبینیم انرژی بیشتری میگیریم. واقعا تهینه مقالات کامل زمان زیادی میگیره ولی ارزشش رو داره که این اطلاعات در اختیار دیگر دوستان هم قرار بگیره

  • حمید
    29/03/2014

    یک دنیا تشکر
    من هر وقت از شما سوالی پرسیدم سریع جواب دادید ممنون بابت اهمیت دادن به کاربراتون…

    • وب سیما
      29/03/2014

      خواهش میکنم دوست عزیز، خیلی خوشحال میشیم اگر کمک کوچیکی کرده باشیم.

  • حمید
    29/03/2014

    سلام بابت مطالب آموزندتون
    یک سوال دارم و اونم اینکه می خوام بدونم به منوی سایت در طراحی با بوت استرپ چه کلاسی بدم که در زمان کوچک شدن صفحه منو از حالت لیست خارج بشه و به صورت زیر منو در بیاد.
    دموی نمونه :http://up.7learn.com/mk/rwd-bootstrap3/

    • وب سیما
      29/03/2014

      سلام دوست عزیز، این حالت که در طراحی رسپانسیو ازش استفاده میشه در واقع از دو منوی مجزا تشکیل شده، یکی منوی اولیه و اصلی یکی هم منوی دکمه ای یا آبشاری، با توجه به کلاس های موجود در فایل responsive.min.css با توجه به عرض صفحه نمایش از یک جایی به بعد منوی اولیه نمایش داده نمیشه و این منو به حالت نمایش در میاد. در واقع همیشه هردو منو در سایت هستن ولی در زمان مناسب نمایش داده میشن.
      کدهایی که باید قرار بدید دقیقا در این صفحه موجود است و دقیقا برای وردپرس نوشته شده:
      http://stackoverflow.com/questions/10270819/twitter-bootstrap-and-mobile-navbar

مشاهده همه