سوال: بوت استرپ [بایگانی]

زینب فاطمی

چهارشنبه 23 مرداد 1392, 11:14 صبح

سلام
در سایت bootstap برای اینکه یک سلول داشته باشیم کد زیر رو گذاشته :

<body> <div class="container"> ... </div></body>
من برای اینکه یک عکس رو پشت زمینه قرار بدم میخوام از بوت استرپ استفاده کنم و از کد بالا هم استفاده کردم ولی پایین عکس خالی میفته وقتی هم container-fluid میزارم عکس وسط نمی افته کنار می افته . لطفا کمک کنید .

s2/mri

چهارشنبه 23 مرداد 1392, 11:43 صبح

سلام

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

< div class="container-fluid">
<div class="span10 my">

</div>
</div>

.my{
background:url('yourimage');
}

titreaval

چهارشنبه 23 مرداد 1392, 11:51 صبح

بوت استرپ چیست

بحث جدید هست که من تازه می شنوم

خوب مگه نمیشه :

.container{
background:url(...) no-repeat center top ;
}

s2/mri

چهارشنبه 23 مرداد 1392, 12:00 عصر

بوت استرپ چیست

بحث جدید هست که من تازه می شنوم

خوب مگه نمیشه :

.container{
background:url(...) no-repeat center top ;
}

بوت استرپ یکی از فریم ورک های css هستش . درمورد فریم ورک ها قبلا بحث شده

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

mehbod.rayaneh

چهارشنبه 23 مرداد 1392, 12:05 عصر

سلام
من نفهمیدم میخواید چیکار کنید! کدی ک دوستان دادن چ مشکلی را قراره حل کنه؟!

titreaval

چهارشنبه 23 مرداد 1392, 12:24 عصر

بوت استرپ یکی از فریم ورک های css هستش . درمورد فریم ورک ها قبلا بحث شده

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

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

زینب فاطمی

چهارشنبه 23 مرداد 1392, 12:28 عصر

ممنون ازراهنمایی تون من span رو 12 دادم و offset رو 1 و فقط کامل وسط نمی افته از راست فاصله میگیره .
کلاس گذاشتم و با درصد فاصله دادم از چپ که کامل وسط بیفته ولی نشد .

<div class="span12 offset1 " >

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

s2/mri

چهارشنبه 23 مرداد 1392, 13:28 عصر

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

اگه از id استفاده میکردی ، حرف شما درست باید فقط یه جا ازش استفاده میشد! چون از کلاس استفاده شده شما میتونین بارها اونو تو صفحه تون به کار ببری و اگه بهش بک گراند بدی جاهایی که از این کلاس استفاده میکنی اون بک گراند رو میگیره

ممنون ازراهنمایی تون من span رو 12 دادم و offset رو 1 و فقط کامل وسط نمی افته از راست فاصله میگیره .
کلاس گذاشتم و با درصد فاصله دادم از چپ که کامل وسط بیفته ولی نشد .

<div class="span12 offset1 " >

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

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

.my{
background:url(img/arm.png) 100%;
margin:0 auto;
}

زینب فاطمی

چهارشنبه 23 مرداد 1392, 15:29 عصر

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

.my{background:url(img/arm.png) 100%;margin:0 auto;}
این کد هم زدم ولی تو همه مرورگرها یکسان نیست مثلا تو فایرفاکس درسته توی اپرا پایینش خالی میفته در صورتی که وقتی درصد میدیم باید متناسب بزرگ بشه . مگر اینکه شرط بذاریم. توی این کد نباید برای سایر مرورگرها کدی نوشته بشه؟

asghar2008

چهارشنبه 23 مرداد 1392, 16:38 عصر

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

.my{background:url(img/arm.png) 100%;margin:0 auto;}
ولی تو همه مرورگرها یکسان نیست مثلا تو فایرفاکس درسته توی اپرا پایینش خالی میفته در صورتی که وقتی درصد میدیم باید متناسب بزرگ بشه . مگر اینکه شرط بذاریم. توی این کد نباید برای سایر مرورگرها کدی نوشته بشه؟

سلام

شما ابتدا تنظیمات Css مربوطه رو Reset کنید (margin و padding). با Reset کردن اونا در همه مرورگر ها یکسان نمایش داده میشه .

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

*{
margin:0px;
padding:0px;
}

refugee

چهارشنبه 23 مرداد 1392, 19:28 عصر

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

منم اون موقع استادمون میگفت بوت استرپ استفاده کنید خوبه و سرعت و بالا میبره و .. ولی هر کار کردم نفهمیدم جی است , تا الانم سراغش نرفتم , اینجوری محدود نمیشیم به چند تا خانه 12 یا 16 تایی ..

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

titreaval

چهارشنبه 23 مرداد 1392, 20:10 عصر

به نظر من برای استاندارد سازی و بهینه کردن به مرورگرها
یه جورایی ساده نویسی / اما برای کسی که خوراکش باشه

نظر نهایی من :
اگر با همان css خودمون به تنهایی درست استفاده کنیم فرقی با اون نداره
اما منم مثل شما از این چیزها استفاده نمی کنم
فقط تعریف مشترکی هست که در همه زبانها php css html و ... استفاده میشود ...
هرچند که خیلی قابلیت ها را که مرورگر مثلا ie ساپورت نمی کنه این فریم ورک ها تا حدی از جلوی این چیزهارا میگیره
مثلا اندازه px % و ... را درie یکجور در opera یکجور و ...
اما میاد فریم وردک جلوی این نا هماهنگی ها را میگیرد
و حتی مچ با دیگر مرورگرهای ناشناخته می کند
البته نه هر فریم ورکی ...
مثال
html : pie
css : همین
php : heefal
جی کوئری ****** من اونو فریم ورک می خوانم

یک چارچوب برای بهینه نوشتن
مسخره و پیچیده بازی برای مثلا بهینه کردن
خوشم نمیاد

زینب فاطمی

چهارشنبه 23 مرداد 1392, 20:22 عصر

توی body اینو زدم . این طوری :

body {margin:0 auto; padding:0 ;}

فایده نداره . من همه روش ها رو امتحان کردم . آخرشم باید برای هر مرورگر یه کد بنویسم .

refugee

چهارشنبه 23 مرداد 1392, 20:30 عصر

خب زینب خانم چرا از روش معمولی سی اس اس مثل من استفاده نمیکنید ؟

این همه کد نوشتن بی فایده نیست ؟

titreaval

چهارشنبه 23 مرداد 1392, 20:34 عصر

نتیجه ی استفاده از فریم ورک : در پست فوق

فریم ورک بد نیست
جی کوئری به نظر من یک فریم ورک است
آیا بده ....
نه
اما همه جا استفاده از api خاص که کار را آسان , راحت و کانفیگور شده با سیستم های مربوطه / که در css سیستم ما مرورگر هست کار جذابی نیست ...

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

فریم ورک : چارچوب
تعریف : ساده گرایی مفهومی + در عمر کامپیوتر و بعضی چیزها بهینه کاری

asghar2008

چهارشنبه 23 مرداد 1392, 20:52 عصر

توی body اینو زدم . این طوری :

body {margin:0 auto; padding:0 ;}

فایده نداره . من همه روش ها رو امتحان کردم . آخرشم باید برای هر مرورگر یه کد بنویسم .

در قسمت body نه!

شما حتما یه فایل Css دارین دیگه . درسته ؟؟

در ابتدای فایل css بنویس. اگه میخوای تو تمامی مرورگرها یکسان نشون داده بشه از Css Reset استفاده کن.

زینب فاطمی

چهارشنبه 23 مرداد 1392, 21:11 عصر

خب زینب خانم چرا از روش معمولی سی اس اس مثل من استفاده نمیکنید ؟

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

در قسمت body نه!

شما حتما یه فایل Css دارین دیگه . درسته ؟؟

در ابتدای فایل css بنویس. اگه میخوای تو تمامی مرورگرها یکسان نشون داده بشه از Css Reset استفاده کن.
منظورم من هم توی فایل css بود یه body تعریف کردم و توش این کد رو نوشتم .

asghar2008

چهارشنبه 23 مرداد 1392, 21:40 عصر

منظور من اینه :

*{

margin:0px;
padding:0px;

}

body{

background-color:#559933;
}

همانطور که مشاهده کردین body جداست !

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

/* CSS Mini Reset */

html, body, div, form, fieldset, legend, label
{
margin: 0;
padding: 0;
}

table
{
border-collapse: collapse;
border-spacing: 0;
}

th, td
{
text-align: left;
vertical-align: top;
}

h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }

img { border: 0; }

همیشه در طراحی صفحات از Css Reset استفاده کن.حالا چرا باید استفاده کنی؟

CSS Reset مجموعه ای از استایل سی اس اس ( CSS Style ) است که تمامی Style پیش فرض عناصر و تگ های HTML ( که در مرور گرهای گوناگون ، متفاوت است ) را در حالت پیش فرض قرار میدهد . با استفاده از این روش تمامی مرورگرها به طور پیش فرض دارای نمایش یکسانی خواهند بود و طراح وب سایت می تواند با استفاده از این روش استایل ها (CSS Style ) را با توجه به نیازهای خود تعیین کند.

زینب فاطمی

پنج شنبه 24 مرداد 1392, 15:29 عصر

منظور من اینه :

*{

margin:0px;
padding:0px;

}

body{

background-color:#559933;
}

همانطور که مشاهده کردین body جداست !

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

/* CSS Mini Reset */

html, body, div, form, fieldset, legend, label
{
margin: 0;
padding: 0;
}

table
{
border-collapse: collapse;
border-spacing: 0;
}

th, td
{
text-align: left;
vertical-align: top;
}

h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }

img { border: 0; }

همیشه در طراحی صفحات از Css Reset استفاده کن.حالا چرا باید استفاده کنی؟

CSS Reset مجموعه ای از استایل سی اس اس ( CSS Style ) است که تمامی Style پیش فرض عناصر و تگ های HTML ( که در مرور گرهای گوناگون ، متفاوت است ) را در حالت پیش فرض قرار میدهد . با استفاده از این روش تمامی مرورگرها به طور پیش فرض دارای نمایش یکسانی خواهند بود و طراح وب سایت می تواند با استفاده از این روش استایل ها (CSS Style ) را با توجه به نیازهای خود تعیین کند.
ممنون کد ها رو وارد کردم تو مرورگر سافاری با بقیه ناسازگاره . اگر ممکنه بگید با درصد چطوری شما این سازگاری رو برقرار می کنید ؟
این td , th , table مال جدول هست vertical-align: top; رو میشه margin دقیق تر کرد ؟ اگر با جدول کار نکنیم این CSS Reset چطوری میشه ؟