مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

کاربر سایت

arman174

عضویت از 1393/07/06

نمایش اطلاعات بصورت repeater با استفاده از bootstrap

  • شنبه 4 اردیبهشت 1395
  • 21:51
تشکر میکنم

با سلام

من می خواهم از یک repeater استفاده کنم که به بانک اطلاعاتی وصل باشه و از bootstrap هم استفاده کنه در حالت معمولی (PC)به شکل زیر باشه :

و در حالت Mobile بشکل زیر نمایش داده شود :

البته خدمت شما عرض کنم می خواهم بصورت داینامیک و واکنشگرا باشند

تشکر

پاسخ های این پرسش

تعداد پاسخ ها : 4 پاسخ
کاربر سایت

سجاد باقرزاده

عضویت از 1392/02/24

  • یکشنبه 5 اردیبهشت 1395
  • 08:51

شما باید از col-md-4 برای آیتم های داخل repeater استفاده کنید. می تونید برای اطلاعات بیشتر درباره grid ها و responsive کردن صفحه لینک زیر را بررسی کنید :

Grid system

 

کاربر سایت

arman174

عضویت از 1393/07/06

  • یکشنبه 5 اردیبهشت 1395
  • 20:48

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

کاربر سایت

arman174

عضویت از 1393/07/06

  • یکشنبه 5 اردیبهشت 1395
  • 21:09

میشه لطفا با یک مثال ساده آموزش استفاده رو بصورت داینامیک به من بدین من انجام دادم حالت واکنشگرا نشد:

    <asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" 
        RepeatColumns="3" RepeatDirection="Horizontal">
        <ItemTemplate>
<div class="row">
<div class="col-lg-4 col-xs-12">
    <asp:Label ID="Label21" runat="server" Text='<%# Eval("Title", "{0}") %>'></asp:Label>
</div>
</div>
        </ItemTemplate>
    </asp:DataList>

 

کاربر سایت

سجاد باقرزاده

عضویت از 1392/02/24

  • دوشنبه 6 اردیبهشت 1395
  • 07:51

شما باید کلاس row را خارج از حلقه repeate خود قرار دهید :

<div class="row">
    <asp:Repeater ID="DataList1" runat="server" DataSourceID="SqlDataSource1">
        <ItemTemplate>
            <div class="col-md-4 col-sm-6 col-xs-12">
                <img src="/Image/<%# Eval("ImageName") %>" alt="" class="img-circle"/>
                <p><%# Eval("FullName") %></p>
                <p><small><%# Eval("Title") %></small></p>
                <a href="/Profile.aspx" class="btn btn-info">نمایش پروفایل</a>
            </div>
        </ItemTemplate>
    </asp:Repeater>
</div>

 

کاربرانی که از این پست تشکر کرده اند

هیچ کاربری تا کنون از این پست تشکر نکرده است

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید

با ما تماس بگیرید تا در این مسیر همراهتان باشیم :)