چند سوال در مورد ایجاد قالب ریسپانسیو با بوت استرپ

[i-php-i]

من بوت استرپ رو دانلود کردم و راهنماش رو هم خوندم ولی یه سری مشکلات اساسی باهاش دارم که در ادامه گفتم و خوشحال می شم هر کدوم رو توضیح بدید:

1- هر تگ با کلاس col تقریبا 15 پیکسل پدینگ داره و باعث می شه بین ستونهای قالب فاصله ایجاد بشه، چطور باید این مقدار رو بصورت کامل تغییر داد؟ البته توی توضیحات گفته از این دستور استفاده بشه مقدار gutter تغییر می کنه ولی من این دستور رو گذاشتم ولی تغییر نکرد.

@grid-gutter-width: 30px;

2- اگر بخوام مقدار gutter برای یک یا چند تگ div تغییر بدم باید چیکار کنم؟

3- اگر بخوام رنگ، تصویر پس زمینه یا فونت جداگانه برای صفحات تصویر مختلف ایجاد کنم باید چیکار کنم؟ یعنی نحوه نمایش یه تگ توی مانیتور، تبلیت و گوشی تفوات داشته باشه

[بهزاد علی محمدزاده]

سلام. اون gutter یه متغیر هست در sass یا less که شما باید کار با یکی از این دو رو بلد باشید که بتونید به این روش بوت استرپ و شخصی سازی کنید. برای خود بوت استرپ در یو..تیو..ب آموزش های زیادی وجود داره که شما باید این آموزش ها رو شناسایی و دانلود کنید. اول یه دوره اون آموزش ها رو نگاه کن و بعد سعنی کن آموزش هایی برای sass پیدا کنی و ببینی که چطور باهاش کار می کنن. بعدش طرز کار بوت استرپ ( و خیلی نکته های دیگه ) دستت میاد.

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

[i-php-i]

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

[بهزاد علی محمدزاده]

من متوجه سوالت هستم , اون راهنمایی که کردم که باید منابع و بشناسی چون تاپیک دیگه ایی هم در این زمینه داشتی برات گفتم که یه دوره ویدیو های بوت استرپ و sass ببینی وگرنه می دونم که سوالت چیه .

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

این کارها رو باید دستی انجام بدی . بوت استرپ همه کاری که دیگه برای ما انجام نمیده اگر می خوای فونت اضافه کنی و یا استایلی رو تغییر بدی باید خودت این کار و انجام بدی .

2- اگر بخوام مقدار gutter برای یک یا چند تگ div تغییر بدم باید چیکار کنم؟

باید override کنی :

.padding-right-5{padding-right:5px;}

شما نمی خوای تنظیمات کلی رو دست بزنی و فقط بعضی قسمت ها رو می خوای تغییر بدی , من فکر کردم می خوای که فرضا فاصله بین gutter ها 30 پیکسل هست اون تغییر بدی به 20 پیکسل. که در اینصورت بهتره با sass کار کنی .

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

یعنی نحوه نمایش یه تگ توی مانیتور، تبلیت و گوشی تفوات داشته باشه

بایستی با میدیا کویری ها خودت استایل مورد نظرت و پیاده سازی کنی.

[i-php-i]

بایستی با میدیا کویری ها خودت استایل مورد نظرت و پیاده سازی کنی.

دقیقا الان مشکل همینه زیاد با بوت استریپ کار نکردم ولی از دیروز که مستنداتش رو خوندم به این نتیجه رسیدم نمی شه زیاد روش مانوv داد، چون این فریم ورک برای قالب ریسپانسیو فقط 2 بخش داره:

1. grid system
2. Responsive utilities

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

[saeed410]

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

[i-php-i]

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

تنظیمات خاصی نداره آخه، موقع دانلود می شه مقادیر پیش فرضش رو تغییر داد. شما وقتی بخواید توی یه صفحه تصویر بزرگ عرض ساید بار سمت راست رو 180 پیکسل تعیین کنید و 5 پیکسل هم از سمت چپ بهش margin بدید چیکار می کنید؟

[amirtc]

به صورت تو در تو استایل میدیم.

[i-php-i]

توی صفحه تصویر واید اگر بخوایم به این صورت کار کنیم باید از دو تگ div با کلاس col-lg-2 و col-lg-10 استفاده کنیم. احتمالا ساید بار سمت راست رو به 12 قسمت تقسیم می کنید ولی در این صورت عرض هر ستون 16 پیکسل می شه و چند پیکسل فضای خالی بین قالب می مونه. برای حل مشکل فضای خالی چیکار می کنید؟ کلا فضای خالی توی قالبهاتون ایجاد می شه یا نه؟

[mmdsharifi]

توی صفحه تصویر واید اگر بخوایم به این صورت کار کنیم باید از دو تگ div با کلاس col-lg-2 و col-lg-10 استفاده کنیم. احتمالا ساید بار سمت راست رو به 12 قسمت تقسیم می کنید ولی در این صورت عرض هر ستون 16 پیکسل می شه و چند پیکسل فضای خالی بین قالب می مونه. برای حل مشکل فضای خالی چیکار می کنید؟ کلا فضای خالی توی قالبهاتون ایجاد می شه یا نه؟

به صورت پیش فرض فضای خالی بین ستون ها ایجاد نمیشه.

Demo

[i-php-i]

منظور اینه که اگر تعداد ستونها کم باشه، بوت استرپ بصورت پیشفرض عرض ستونها رو افزایش می ده تا اندازه تگ والد بشه؟

[mmdsharifi]

نه اینجوری نیست،بلکه هر ستون به اندازه خودش جا می گیره.
مثلا شما اومدید اول یک ستون 10 تایی تعریف کردید بعدش درون اون یک ستون 6 تایی الان می بینید که اون ستون 6 تایی نصف ستون 10 رو گرفته. امتحان کنید !

[i-php-i]

نه اینجوری نیست،بلکه هر ستون به اندازه خودش جا می گیره.
مثلا شما اومدید اول یک ستون 10 تایی تعریف کردید بعدش درون اون یک ستون 6 تایی الان می بینید که اون ستون 6 تایی نصف ستون 10 رو گرفته. امتحان کنید !

خب منم همین رو می گم

میخوام ساید بار سایت 185 پیکسل باشه، و باید از کد زیر استفاده کنیم
توی این کد به دلیل اینکه عرض تگ داخلی ساید بار col-lg-11 هست به اندازه یک col-lg-1 فضای خالی باقی می مونه
چیکار کنیم که این فضای خالی باقی نمونه؟

<div class="col-lg-2">
    <div class="ROW">
        <div class="col-lg-11">
            SIDE BAR
        </div>
    </div>
</div>
<div class="col-lg-10"></div>

[tooka123]

سلام , عرض کلاس width: 91.66666667% , col-lg-11 است یعنی 91 درصد تگ والد رو پر می کنه که شما باید همون col-lg-12 استفاده کنید تا فضای خالی نباشه

[i-php-i]

سلام , عرض کلاس width: 91.66666667% , col-lg-11 است یعنی 91 درصد تگ والد رو پر می کنه که شما باید همون col-lg-12 استفاده کنید تا فضای خالی نباشه

این یه عیب محسوب می شه دیگه

می تونیم دستی ابعاد تگ col-lg-11 رو تغییر بدیم بدون اینکه قواعد فریم ورک نقض بشه؟

[mmdsharifi]

خب منم همین رو می گم

میخوام ساید بار سایت 185 پیکسل باشه، و باید از کد زیر استفاده کنیم
توی این کد به دلیل اینکه عرض تگ داخلی ساید بار col-lg-11 هست به اندازه یک col-lg-1 فضای خالی باقی می مونه
چیکار کنیم که این فضای خالی باقی نمونه؟

<div class="col-lg-2">
    <div class="ROW">
        <div class="col-lg-11">
            SIDE BAR
        </div>
    </div>
</div>
<div class="col-lg-10"></div>

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

[i-php-i]

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

مستنداتشو خوندم

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

کلا مشکلش همینه

کد دستی بنویسیم بهتره

[mmdsharifi]

بله شما می تونید از library های less , sass بوت سترپ استفاده کنید و اون رو کاملا شخصی سازی نمایید.
یه راهشم واقعا اینکه که خودت یک فریم ورک واسه کارای خودت بکنی که سبکتر هم از بوت استرپ باشه!