بوت استرپ

Printable View

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

بوت استرپ

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

کد HTML:

<body> <div class="container"> ... </div></body>

من برای اینکه یک عکس رو پشت زمینه قرار بدم میخوام از بوت استرپ استفاده کنم و از کد بالا هم استفاده کردم ولی پایین عکس خالی میفته وقتی هم container-fluid میزارم عکس وسط نمی افته کنار می افته . لطفا کمک کنید .
چهارشنبه 23 مرداد 1392, 11:43 صبح
s2/mri

نقل قول: بوت استرپ
سلام

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

کد HTML:

< div class="container-fluid"> <div class="span10 my"> </div> </div>
```
.my{

background:url('yourimage');

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

نقل قول: بوت استرپ
بوت استرپ چیست

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

خوب مگه نمیشه :
```
.container{

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

}
```
چهارشنبه 23 مرداد 1392, 12:00 عصر
s2/mri

نقل قول: بوت استرپ
نقل قول:
نوشته شده توسط titreaval

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

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

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

.container{
background:url(...) no-repeat center top ;
}
بوت استرپ یکی از فریم ورک های css هستش . درمورد فریم ورک ها قبلا بحث شده

اما کدی که شما گذاشتی اون استایل رو به container اعمال میکنه که اگه بخوایم جای دیگه ای از این کلاس استفاده کنیم بک گراند روش اعمال میشه به خاطر همین یک کلاس جدا نوشتم که هرجا کاربر خواست اون بک گراند رو استفاده کنه
چهارشنبه 23 مرداد 1392, 12:05 عصر
mehbod.rayaneh

نقل قول: بوت استرپ

سلام
من نفهمیدم میخواید چیکار کنید! کدی ک دوستان دادن چ مشکلی را قراره حل کنه؟!
چهارشنبه 23 مرداد 1392, 12:24 عصر
titreaval

نقل قول: بوت استرپ

نقل قول:

نوشته شده توسط s2/mri

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

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

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

نقل قول: بوت استرپ

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

کد HTML:

<div class="span12 offset1 " >

میخوام عکس رو از طریق فریم ورک بک گراند قرار بدم برای اینکه تو رزولوشن های مختلف یکسان باشه گفتم از فریم ورک استفاده کنم.
چهارشنبه 23 مرداد 1392, 13:28 عصر
s2/mri

نقل قول: بوت استرپ
نقل قول:

نوشته شده توسط titreaval

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

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

نقل قول:

نوشته شده توسط زینب فاطمی

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

کد HTML:

<div class="span12 offset1 " >

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

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

background:url(img/arm.png) 100%;

margin:0 auto;

}
```
چهارشنبه 23 مرداد 1392, 15:29 عصر
زینب فاطمی

نقل قول: بوت استرپ

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

کد HTML:

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

این کد هم زدم ولی تو همه مرورگرها یکسان نیست مثلا تو فایرفاکس درسته توی اپرا پایینش خالی میفته در صورتی که وقتی درصد میدیم باید متناسب بزرگ بشه . مگر اینکه شرط بذاریم. توی این کد نباید برای سایر مرورگرها کدی نوشته بشه؟
چهارشنبه 23 مرداد 1392, 16:38 عصر
asghar2008

نقل قول: بوت استرپ
نقل قول:

نوشته شده توسط زینب فاطمی

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

کد HTML:

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

ولی تو همه مرورگرها یکسان نیست مثلا تو فایرفاکس درسته توی اپرا پایینش خالی میفته در صورتی که وقتی درصد میدیم باید متناسب بزرگ بشه . مگر اینکه شرط بذاریم. توی این کد نباید برای سایر مرورگرها کدی نوشته بشه؟

سلام

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

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

margin:0px;

padding:0px;

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

نقل قول: بوت استرپ

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

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

اصلا خوبی بوت استرپ چیه ؟ چرا باید استفاده کنیم ؟ اگه لینگی مفید میدونید بدین .
چهارشنبه 23 مرداد 1392, 20:10 عصر
titreaval

نقل قول: بوت استرپ

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

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

یک چارچوب برای بهینه نوشتن
مسخره و پیچیده بازی برای مثلا بهینه کردن
خوشم نمیاد
چهارشنبه 23 مرداد 1392, 20:22 عصر
زینب فاطمی

نقل قول: بوت استرپ

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

کد HTML:

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

فایده نداره . من همه روش ها رو امتحان کردم . آخرشم باید برای هر مرورگر یه کد بنویسم .
چهارشنبه 23 مرداد 1392, 20:30 عصر
refugee

نقل قول: بوت استرپ

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

این همه کد نوشتن بی فایده نیست ؟
چهارشنبه 23 مرداد 1392, 20:34 عصر
titreaval

نقل قول: بوت استرپ

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

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

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

فریم ورک : چارچوب
تعریف : ساده گرایی مفهومی + در عمر کامپیوتر و بعضی چیزها بهینه کاری
چهارشنبه 23 مرداد 1392, 20:52 عصر
asghar2008

نقل قول: بوت استرپ

نقل قول:

نوشته شده توسط زینب فاطمی

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

کد HTML:

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

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

در قسمت body نه!

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

در ابتدای فایل css بنویس. اگه میخوای تو تمامی مرورگرها یکسان نشون داده بشه از Css Reset استفاده کن.
چهارشنبه 23 مرداد 1392, 21:11 عصر
زینب فاطمی

نقل قول: بوت استرپ

نقل قول:

نوشته شده توسط loveload

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

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

شما چه روشی دارید ؟

نقل قول:

نوشته شده توسط asghar2008

در قسمت body نه!

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

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

منظورم من هم توی فایل css بود یه body تعریف کردم و توش این کد رو نوشتم .
چهارشنبه 23 مرداد 1392, 21:40 عصر
asghar2008

نقل قول: بوت استرپ
منظور من اینه :
```
*{



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 عصر
زینب فاطمی

نقل قول: بوت استرپ
نقل قول:
نوشته شده توسط asghar2008

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

*{

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 چطوری میشه ؟