ریسپانسیو کردن یک گرید؟

[vb8334]

با سلام به تمامی دوستان

دوستان من می خواستم بدونم چجوری می تونم این گرید رو responsive کنم
من از bootstrap استفاده می کنم و تازه در حال یادگیری bootstrap هستم

گرید من:http://jsfiddle.net/psot98/mSRUe/7/embedded/result/

این کد html هستش


<div class="span6 box gradient main_stting row-fluid" style="margin-top: -40px;">
<div class="dataTables_filter span4" id="txtSearch">
<label>
Search:
<input type="text" aria-controls="DataTables_Table_0">
</label>
</div>
<div class="title span4">
<button class="btn ref" type="submit">Refresh</button>
<h3></h3>
</div>
<div class="content ">
<div class="table row"></div>
</div>
</div>


سوال من اینجاست من باید اولین دایو .row-fluid استفاده کنم حالا تقسیم بندی دیگر دایوها چجوری هستش یعنی منظورم اینکه برای بقیه دایوها از span4 استفاده کنم که جمعش بشه 12 تا

ممنون میشم بگید از کجا و چه جوری شروع کنم و اصولش رو بگید.


مرسی

[webtracker]

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

[Radman]

کد زیر یک row شناور ایجاد میکند
حالا میتونی دوتا span6 بزاری یا 3 تا span4 یا اصلا 12 تا span1 دیگه بستگی به نیازت داره
در ضمن حالا که داری یاد می گیری نسخه جدیدش3 رو یاد بگیر
document خود bootstrap بهترین منبع برای یادگیریشه :لبخندساده:


<div class="row-fluid">
<div class="span4">

</div>
<div class="span4">

</div>
<div class="span4">

</div>
</div>

[Radman]

در ضمن فایل responsive.css بوت استرپ رو اضافه کن 90% کار رو میکنه
اگر هم document اش رو خوب بخونی اون 10 % باقیمانده رو توضیح داده

[vb8334]

ببینید اون جدولی که توش دیتا وجود داره خودش responsive هستش ولی به دلیل اینکه من یه سری div بهش اضافه کردم باعث شده دیگه responsive نباشه

اینجا رو ببین:http://jsfiddle.net/psot98/mSRUe/8/embedded/result/ الان این خودش responsive هستش ولی خوب دیگه الان اون دکمه refresh نیستش و اون search و همینطور اون div زیرین.

منظورم اینکه با اضافه شدن این کدها دیگه responsive نیستش حالا چظوری می تونم با وجود این کدها responsive کنمش


< div class = "span6 box gradient main_stting" style = "margin-top : -40px; " >
< div class ="dataTables_filter" id= "txtSearch" >
< label>
Search:
< input type ="text" aria-controls= "DataTables_Table_0" >
</ label>
</ div>
< div class ="title" >
< button class ="btn ref" type= "submit" >Refresh </ button>
< h3></ h3 >
</ div>

</ div >


مرسی

[Radman]

من که گفتم همه اینا رو داخل یک row-fluid بندازید
:افسرده:

[vb8334]

ولی خوب اینکار رو میکنم بهم میریزه اینجا رو ببین

http://jsfiddle.net/psot98/mSRUe/12/embedded/result/

[Radman]

گفتم به کلشون بده نه به اون span 6
جوری باشه همه تگ ها داخلش قرار بگیره

[vb8334]

یعنی برای همشون row-fluid در نظر بگیرم!!!!!

میشه یکم بیشتر توضیح بدی یا روی همون دمویی که من گذاشتم کد رو بزاری ببینم منظورت چیه

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



/* Large desktop */
@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }


مرسی

[webtracker]

می بخشید این شکلی درست یا باید بیفته کنار باتن اضافه کردن رکورد جدید این فیلد و باتن
http://jsfiddle.net/vyKpd/

[vb8334]

داداش دمت گرم خیلی بهتر شد.

من یه عکس گذاشتم تا دقیق تر متوجه بشی search باید بره سمت چپ تر و زیرش یه هدر نقره ای رنگ هم باید بره زیرش که الان از هم جدا شدن


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

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



/* Large desktop */
@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }


یه توضیح هم در مورد کاری که انجام دادی بگی دیگه خیلی دمت گرم:قهقهه:

مرسی

[webtracker]

کجا عکس رو گذاشتین ؟ شما کافی از داکیومنت خود بوت استرپ استفاده کنید که این دوتا تگ رو گفته اضافه کنید


<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

[vb8334]

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

[webtracker]

الان یک نگاهی به دمویی که دادم بکنید ببینید درست یانه؟
http://jsfiddle.net/vyKpd/3/embedded/result/

[vb8334]

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

لطفآ اگه میشه در مورد کاری که انجام دادید یه توضیحی بدی ممنون میشم

راستی برای responsive کردن ارتفاع چه کاری باید انجام بدم.

یه دنیا ممنون

[tadayoni]

ارتفاع بصورت خودکار تغییر میکنه و height: auto باید بهش بدی
همچنین در آخر اون div که اشیاء توی اون دارن ایجاد میشن هم یه div دیگه بشکل زیر بذار

<div style="clear: both;"></div>

[vb8334]

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