استایل دهی به عناصر در بوت استرپ

[mostafae]

سلام. بهترین راه برای استایل دهی به عناصر در بوت استرپ به چه شکلی هست؟

مثلا من کد زیر رو دارم:


<div class="col-sm-3" >.col-md-3</div>
<div class="col-sm-6" id="bbbb">.col-md-6</div>
<div class="col-sm-3">.col-md-3</div>


میخوام به کلاس col-sm-3 اولی مثلا height برابر 200 پیکسل بدم.

[mohammad425]

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


<div class="mostafa col-sm-3">.col-md-3</div>


.mostafa{height:200px}

[mostafae]

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


<div class="mostafa col-sm-3">.col-md-3</div>


.mostafa{height:200px}

حالا اگه بخوام استایل کلاس mostafa تو حالت col-lg-12 رو تغییر بدم و عرضش رو توی این کلاس کم تر یا بیشتر کنم چیکار باید کنم؟

[سعید کشاورز]

حالا اگه بخوام استایل کلاس mostafa تو حالت col-lg-12 رو تغییر بدم و عرضش رو توی این کلاس کم تر یا بیشتر کنم چیکار باید کنم؟
بوت استرپ از چهار تا سایز استفاده میکنه...مثلا ۰ تا ۷۶۸ برای کلاس xs استفاده میشه..شما باید بیای دستور media screen برای حالت های مختلف اون کلاس mostafa رو مقدار دهی کنی..توی سایت بوت استرپ مقادیر دقیق رزولوشن ها هستش..اینجوری میتونی کلاست رو بر اساس lg ,md,sm,xs مقدار دهی کنی

[mostafae]

بوت استرپ از چهار تا سایز استفاده میکنه...مثلا ۰ تا ۷۶۸ برای کلاس xs استفاده میشه..شما باید بیای دستور media screen برای حالت های مختلف اون کلاس mostafa رو مقدار دهی کنی..توی سایت بوت استرپ مقادیر دقیق رزولوشن ها هستش..اینجوری میتونی کلاست رو بر اساس lg ,md,sm,xs مقدار دهی کنی

ببخشید منظورم ارتفاع بود نه عرض

[سعید کشاورز]

ببخشید منظورم ارتفاع بود نه عرض
معذرت میخام تند تند خوندم اشتباهی شد :لبخند:
این کلاس Mostafa که تعریف کردی عرضش رو از کلاس های بوت استرپ میگیره و شما نباید عرض رو تغییر بدی چون عرض بر اساس % محاسبه میشه.. میشه بگی دقیقا میخای چی کار کنی؟

[mostafae]

معذرت میخام تند تند خوندم اشتباهی شد :لبخند:
این کلاس Mostafa که تعریف کردی عرضش رو از کلاس های بوت استرپ میگیره و شما نباید عرض رو تغییر بدی چون عرض بر اساس % محاسبه میشه.. میشه بگی دقیقا میخای چی کار کنی؟

من میخوام مثلا ارتفاع header یا ارتفاع foooter تو مانیتور کامپیوتر 200 پیکسل باشه ولی توی موبایل 50 پیکسل. چطور باید مقدار ارتفاع رو تعیین کرد؟

[سعید کشاورز]

من میخوام مثلا ارتفاع header یا ارتفاع foooter تو مانیتور کامپیوتر 200 پیکسل باشه ولی توی موبایل 50 پیکسل. چطور باید مقدار ارتفاع رو تعیین کرد؟

خوب توی پست اولی که دادم درست گفتم دیگه :لبخند: چرا منو گمراه میکنی؟ :قهقهه:
ببین کامل بهت توضیح میدم..
شما یه کلاس تعریف میکنی مثلا به اسم height-header
حالا شما میای چهارتا مدیا اسکرین تعریف میکنی..
/*in alan baraye halate xs bootstrap mishe ke mobile*/
@media (max-width: 768px) and (min-width: 0px) {
.height-header{height:50px;}
}
/*in alan baraye halate sm bootstrap mishe ke tablete*/
@media (max-width: 992px) and (min-width: 768px) {
.height-header{height:100px;}
}
/*in alan baraye halate md,lg bootstrap mishe ke pc va laptop hastan*/
@media (max-width: 1200px) and (min-width: 992px) {
.height-header{height:200px;}
}



حالا بر اساس تغییر سایز اون کلاس height-header هم ارتفاعش عوض میشه

این کدهارو توی نوت پد کپی کن درست نمایش داده میشه اونجا بخون میفهمی

[ABZiko]

با مدیا کوئری :


@media screen and (max-width:1280px){
header{
height:200px;
}
}

@media screen and (max-width:100px){
header{
height:50px;
}
}

[mostafae]

پس اینطور که مشخصه توی بوت استرپ هم یه جاهایی باید از مدیا کوئری استفاده کرد.
راهی نداره مثل عرض واسه ارتفاع هم از کلاس استفاده کرد؟