Printable View
سلام دوستان
من قبلا برای نمایش محصولات اطلاعات رو از دیتابیس می خوندم و از دیتا لیست بصورت 3 ستونه برای نمایش استفاده میکردم . الان سایت رو دارم بصورت ریسپانسیو با بوت استراپ بازنویسی میکنم . ولی متوجه شدم برای نمایش محصولات بصورت ریسپانسیو نمیشه از دیتالیست استفاده کرد . میشه راهنمایی کنید برای نمایش محصولات بصورت ریسپانسیو (مثلا مانند آگهی های دیوار) باید از چه کنترلی و چطوری استفاده کنم؟
ممنون میشم از دوستان اگر کسی سمپل داره لطفا ارائه بده یا مرجعی رو معرفی کنه .
متشکرم
سلام
کافیه کدهای بوت استرپ رو در دیتابیستت استفاده کنی
کد HTML:<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>
ممنونم . عالی شد .فقط یه مورد ، من می خوام در هر ردیف 4 محصول رو نمایش بدم و با توجه به اندازه های مختلف صفحه نمایش تعداد به 2 و 1 محصول در هر ردیف تغییر کنه . کد بالا محصولات رو در 4 ستون نشون میده و با کوچیک شدن صفحه یکباره میشه 1 ستون . چطور میشه کاری کرد که تعداد ردیف با توجه به اندازه صفحه از 4 به 2 و بعد به 1 تغییر کنه؟
ببین توی بوت استرپ تو 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 پنجاه درصد صفحه رو در نظر بگیر (6 از 12 ستون)کد HTML:<div class="col-md-12 col-lg-6">1111</div>
<div class="col-md-12 col-lg-6">2222</div>
برای سایز معمولی برای هر div کل صفحه رو در نظر بگیر (12 از 12)
این یکی میگه برای سایز های بزرگ (3 قسمت از 12 قسمت صفحه)کد HTML:<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>
معمولی 6 قسمت
کوچیک 12 قسمت
قاعدتا در بهترین حالت ، باید طراحیت طوری باشه که که توی همه ی سایزهت مجموع اون عدد دایو هات 12 باشه
مثلا توی مثال بالا مجموع lg های من 6 هست
خوب این جالب نیست
من اگر فقط 2 تا دایو داشته باشم ،باید lg رو هم 6 بدم
برای اون چیزی که شما میخوای ، یه همچین چیزی باید بدی
کد HTML:<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>