Visualizzazione dei risultati da 1 a 4 su 4

Discussione: Incolonnare responsive

  1. #1
    Utente di HTML.it
    Registrato dal
    Jul 2005
    Messaggi
    2,153

    Incolonnare responsive

    Salve
    io utilizzo questo script per incolonnare a 4 i risultati di una query:
    codice:
    <%
    If rs.EOF Then
    %>Nessun risultato
    <%
    Else
        i = 0
        do while not rs.eof
        if i = 0 then
        %>         
        <tr>
        <%end if%>
    RISULTATO
    <%  rs.movenext
                    i = i + 1
          if i = 4 then
               i = 0
          %>    
          
        
    </tr>
    
        <%
        end if
    
        loop
    %>
        
        <%
        END IF
        %>
    Come potrei adattarlo in responsive?
    Tipo:
    max-width: 300px visualzzare tutti i risultati in una sola colonna
    max-width: 600px visualizzare tutti i risultati su 2 colonne
    max-width: 1000px visualizzare tutti i risultati in 4 colonne etc
    Grazie

  2. #2
    Utente di HTML.it
    Registrato dal
    Apr 2007
    Messaggi
    592
    Per gestire il tutto, usa le media queries, impostando i breakpoint.

    Devo dire che mi sta semplificando la vita il framework Bootstrap. Ti consiglio di darci un'occhiata. https://getbootstrap.com/

  3. #3
    Utente di HTML.it
    Registrato dal
    Jul 2005
    Messaggi
    2,153
    Grazie per il tuo aiuto, ma puoi farmi un esempio pratico? Perchè la mia query è impostata per stampare a video a 4 colonne ma non saprei con le mediaqueries come posso fare, fare più query ?
    Grazie

  4. #4
    Utente di HTML.it
    Registrato dal
    Apr 2007
    Messaggi
    592
    Le media queries hanno a che fare con CSS3 e servono per impostare i breakpoint in corrispondenza di prefissate misure della finestra del browser.
    Qui trovi delle informazioni sulle media queries: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Non c'entra niente con ASP.
    Con ASP fai la tua query che tira su i dati dal db, senza preoccuparti di come vengono distribuiti nelle pagine.

    Ripeto, però, che la soluzione più semplice è quella di affidarsi ad un framework (io uso Bootstrap), la cui struttura è già responsive.

    Ecco un esempio molto semplice (c'è la struttura di base di Bootstrap e del semplice codice ASP).

    codice:
    <!doctype html>
    <html lang="en">
        <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
        
        <title>esempio</title>
        </head>
        <body>
        <div class="container">
            <div class="row justify-content-md-center">
            <%
            [qui ci metti la tua query ASP]
    
            if rs.eof then
                response.write "nessun risultato"
            else
                while not rs.eof
                response.write ("<div class=""col-xxs-12 col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-3"">")
                response.write rs("miocampo")
                response.write ("</div>")
                rs.movenext
            end if
            rs.close
            set rs = nothing
            %>
            </div>
        </div>
    
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
        </body>
    </html>

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.