نمایش محصولات بصورت ریسپانسیو

[hamednazarzadeh]

سلام دوستان
من قبلا برای نمایش محصولات اطلاعات رو از دیتابیس می خوندم و از دیتا لیست بصورت 3 ستونه برای نمایش استفاده میکردم . الان سایت رو دارم بصورت ریسپانسیو با بوت استراپ بازنویسی میکنم . ولی متوجه شدم برای نمایش محصولات بصورت ریسپانسیو نمیشه از دیتالیست استفاده کرد . میشه راهنمایی کنید برای نمایش محصولات بصورت ریسپانسیو (مثلا مانند آگهی های دیوار) باید از چه کنترلی و چطوری استفاده کنم؟
ممنون میشم از دوستان اگر کسی سمپل داره لطفا ارائه بده یا مرجعی رو معرفی کنه .
متشکرم

[Mag-Mag]

سلام
کافیه کدهای بوت استرپ رو در دیتابیستت استفاده کنی

<asp:DataList ID="DataList1" runat="server"   OnItemDataBound="uxPosts_ItemDataBound1" cssClass="row"  RepeatLayout="Flow" RepeatDirection="Horizontal">
        <ItemTemplate>
            <div class="col-sm-3 col-md-3 col-lg-3"><%# Eval("Name") %></div>
            <div class="col-sm-3 col-md-3 col-lg-3"><%# Eval("Email") %></div>
            <div class="col-sm-3 col-md-3 col-lg-3"><%# Eval("Address") %></div>
            <div class="col-sm-3 col-md-3 col-lg-3"><%# Eval("Phone") %></div>
        </ItemTemplate>
    </asp:DataList>

[hamednazarzadeh]

ممنونم . عالی شد .فقط یه مورد ، من می خوام در هر ردیف 4 محصول رو نمایش بدم و با توجه به اندازه های مختلف صفحه نمایش تعداد به 2 و 1 محصول در هر ردیف تغییر کنه . کد بالا محصولات رو در 4 ستون نشون میده و با کوچیک شدن صفحه یکباره میشه 1 ستون . چطور میشه کاری کرد که تعداد ردیف با توجه به اندازه صفحه از 4 به 2 و بعد به 1 تغییر کنه؟

[Mag-Mag]

ببین توی بوت استرپ تو 4 تا سایز داری
lg = large که با col-lg-3 مشخص میشه ، اون عدد اخر باید عددی بین 1 تا 12 باشه (چون کلا صفحه رو به 12 قسمت تقسیم میکنه)
مثلا دو تا دایو با خاصیت col-lg-6 یعنی نصف صفحه مال یکی ، نصفش هم مال اون یکی

md = medium که با col-md-3 مشخص میشه
smal = sm که با col-sm-3 مشخص میشه
extra smal = xs که با col-xs-3 مشخص میشه

<div class="col-md-12 col-lg-6">1111</div>
<div class="col-md-12 col-lg-6">2222</div>

الان دستور بالا میگه توی سایز بزرگ برای هر div پنجاه درصد صفحه رو در نظر بگیر (6 از 12 ستون)
برای سایز معمولی برای هر div کل صفحه رو در نظر بگیر (12 از 12)

<div class="col-sm-12 col-md-6 col-lg-3">333</div>
<div class="col-sm-12 col-md-6 col-lg-3">444</div>

این یکی میگه برای سایز های بزرگ (3 قسمت از 12 قسمت صفحه)
معمولی 6 قسمت
کوچیک 12 قسمت

قاعدتا در بهترین حالت ، باید طراحیت طوری باشه که که توی همه ی سایزهت مجموع اون عدد دایو هات 12 باشه
مثلا توی مثال بالا مجموع lg های من 6 هست
خوب این جالب نیست
من اگر فقط 2 تا دایو داشته باشم ،باید lg رو هم 6 بدم

برای اون چیزی که شما میخوای ، یه همچین چیزی باید بدی

<div class="col-xs-12 col-sm-6 col-md-3">111</div>
<div class="col-xs-12 col-sm-6 col-md-3">222</div>
<div class="col-xs-12 col-sm-6 col-md-3">333</div>
<div class="col-xs-12 col-sm-6 col-md-3">444</div>