none
MVC com layout Responsivo RRS feed

  • Discussão Geral

  • Bom dia pessoal, estou com a seguinte duvida eu sei que tem como  colocar uma aplicação pronta feita em aspx MVC com layout  responsivo, porem eu não gostaria de perder o que já foi feito, e a minha duvida maior é se os gridViews  conseguem se adaptar a esse tipo de layout. Pensei em utilizar o Fluido mas no meu caso ele não vai resolver o problema.

    Bem vou postar css e html  da MasterPage  para aquele que já tem experiencia nesse assunto possam me ajudar. 

       
    <%@ Master Language="C#" AutoEventWireup="true" ClientIDMode="Static" CodeBehind="Master.Master.cs" Inherits="web_projeto.Master" %>
    
    <%@ Register assembly="Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" namespace="Microsoft.Reporting.WebForms" tagprefix="rsweb" %>
    
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Demostração para Forum</title>
        <link href="css/style.css" rel="stylesheet" />
        <link href=" images/icone.ico"  rel="icon" type="image/x-icon" title="favicon" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
       
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <script type="text/javascript">
              
    
           $(document).ready(function () {
               $('li.D0').click(function () {
                   $(this).parent().find('ul#1').slideToggle("slow");
               });
           });
    
            $(document).ready(function () {
                $('li.D1').click(function () {
                    $(this).parent().find('ul#2').slideToggle("slow");
                });
            });
         
            $(document).ready(function () {
                $('li.D2').click(function () {
                    $(this).parent().find('ul#3').slideToggle("slow");
                });
            });
            $(document).ready(function () {
                $('li.D3').click(function () {
                    $(this).parent().find('ul#4').slideToggle("slow");
                });
            });
            $(document).ready(function () {
                $('li.D4').click(function () {
                    $(this).parent().find('ul#5').slideToggle("slow");
                });
            });
            $(document).ready(function () {
                $('li.D6').click(function () {
                    $(this).parent().find('ul#7').slideToggle("slow");
                });
            });
            $(document).ready(function () {
                $('li.D7').click(function () {
                    $(this).parent().find('ul#8').slideToggle("slow");
                });
            });
            $(document).ready(function () {
                $('li.D8').click(function () {
                    $(this).parent().find('ul#9').slideToggle("slow");
                });
            });
            $(document).ready(function () {
                $('li.D9').click(function () {
                    $(this).parent().find('ul#10').slideToggle("slow");
                });
            });
            $(document).ready(function () {
                $('li.D5').click(function () {
                    $(this).parent().find('ul#6').slideToggle("slow");
                });
            });
            $(document).ready(function () {
                $('li.D10').click(function () {
                    $(this).parent().find('ul#11').slideToggle("slow");
                });
            });
    
            $(document).ready(function () {
                $('li.D11').click(function () {
                    $(this).parent().find('ul#12').slideToggle("slow");
                });
            });
    
            $(document).ready(function () {
                $('li.D12').click(function () {
                    $(this).parent().find('ul#13').slideToggle("slow");
                });
            });
    
            $(document).ready(function () {
                $('li.D13').click(function () {
                    $(this).parent().find('ul#14').slideToggle("slow");
                });
            });
    
            $(document).ready(function () {
                $('li.D14').click(function () {
                    $(this).parent().find('ul#15').slideToggle("slow");
                });
            });
    
            $(document).ready(function () {
                $('li.D15').click(function () {
                    $(this).parent().find('ul#16').slideToggle("slow");
                });
            });
    
            
        </script>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="frmMaster" runat="server">
    
            <div id="main">
                <div class="header">
                    <div class="perfil">
                    <asp:Image ID="ImagePerf" runat="server" />
                    <asp:Label ID="LabelNome" runat="server" Text="Label"></asp:Label>
                    </div>
                    <div class ="fundo_logo">
                        <a href="Inicial.aspx" title="School System"></a>
                       <%-- <img src="images/logo_.jpg" alt="School System" /></a>--%>
                    </div>
                         <asp:ImageButton ID="ImageButton3"  runat="server" ImageUrl="~/images/icon/logout-icon.png" title="Sair"  PostBackUrl="Default.aspx" />
                        <asp:ImageButton ID="ImageButton1"  runat="server" ImageUrl="~/images/icon/arrow-left-icon.png" title="Voltar" OnClientClick="JavaScript: window.history.back(1); return false;" />
                        <asp:ImageButton ID="ImageButton2"  runat="server" ImageUrl="~/images/icon/arrow-right-icon.png" title="Avançar" OnClientClick="JavaScript: window.history.forward(); return false;" />
                 
                    
                 
                   </div> 
                <!-- /header -->
                <div class="navSide radius">
                    <ul>
                        <li><a href="Inicial.aspx" title="Ir para paginal Inicial">Inicial</a></li>
                        <li class="D0">Primeira Pagina
                            <ul class="itens" id="1">
                                <li><a href="Primeira.aspx" title="">Cadastro</a></li>
                                <li><a href="PrimeiraB.aspx" title="">Editar</a></li>
                                <li><a href="PrimeiraB.aspx" title="Contas a Pagar">Excluir</a></li>
                                <li><a href="Primeira_Pagina.aspx" title="Qualquer">Identificadores</a></li>
                            </ul>
                        </li>
                        <li class="D15">Segunda Pagina 
                            <ul class="itens" id="16">
                                <li><a href="Segunda.aspx" title="Qualquer">Cadastro</a></li>
                               
                            </ul>
                        </li>
    
                        <li class="D1">Terceira Pagina
                            <ul class="itens" id="2">
                                <li><a href="Terceira.aspx" title="">Cadastro</a></li>
                                <li><a href="Terceira.aspx" title="">Editar</a></li>
                                <li><a href="Terceira.aspx" title="">Excluir</a></li>
                            </ul>
                        </li>
                         <li class="D2">Quarta Pagina
                            <ul class="itens" id="3">
                                <li><a href="Quarta.aspx" title="">Qualquer(s)</a></li>
                                <li><a href="#" title="">Qualquer1</a></li>
                                <li><a href="#" title="">Qualquer2</a></li>
                            </ul>
                        </li>
                        <li class="D3">Quinta Pagina
                            <ul class="itens" id="4">
                                <li><a href="Quinta.aspx" title="">Cadastrar</a></li>
                                <li><a href="Quinta.aspx" title="">Editar</a></li>
                                <li><a href="Quinta.aspx" title="">Excluir</a></li>
                            </ul>
                        </li>
                        <li class="D4">Sexta Pagina
                            <ul class="itens" id="5">
                                <li><a href="SextaB.aspx" title="">Cadastrar</a></li>
                                <li><a href="SextaB.aspx" title="">Editar</a></li>
                                <li><a href="SextaB.aspx" title="">Excluir</a></li>
                            </ul>
                        </li>
                        <li class="D5">Setima Pagina
                            <ul class="itens" id="6">
                                <li><a href="Setima.aspx" title="">Cadastrar</a></li>
                                <li><a href="Setima.aspx" title="">Editar</a></li>
                                <li><a href="Setima.aspx" title="">Excluir</a></li>
                            </ul>
                        </li>
                        <li id="D6">Oitava 
                            <ul class="itens" id="7">
                                <li><a href="Oitava.aspx" title="">Consultar</a></li>
                               
                            </ul>
                        </li>
                        <li class="D8">Nona
                            <ul class="itens" id="9">
                                <li><a href="Nona.aspx" title="">Cadastrar</a></li>
                                <li><a href="Nona.aspx" title="">Alterar</a></li>
                                <li><a href="Nona.aspx" title="">Excluir</a></li>
                            </ul>
                        </li>
                         <li class="D9">Decima
                            <ul class="itens" id="10">
                                <li><a href="Decima.aspx" title="">Cadastrar</a></li>
                                <li><a href="DecimaB.aspx" title="">Alterar</a></li>
                                <li><a href="DecimaB.aspx" title="">Excluir</a></li>
                            </ul>
                        </li>
                         <li class="D10">Decima primeira
                            <ul class="itens" id="11">
                                <li><a href="Decima_primeira.aspx" title="">Cadastrar</a></li>
                                <li><a href="Decima_primeira.aspx" title="">Alterar</a></li>
                                <li><a href="Decima_primeira.aspx" title="">Excluir</a></li>
                            </ul>
                        </li>
                        <li class="D11">Decima segunda
                            <ul class="itens" id="12">
                                <li><a href="Decima_segunda.aspx" title="">Cadastrar</a></li>
                                <li><a href="Decima_segundaB.aspx" title="">Alterar</a></li>
                                <li><a href="Decima_segundaB.aspx" title="">Excluir</a></li>
                            </ul>
                        </li>
                         <li class="D12">Decima terceira
                            <ul class="itens" id="13">
                                <li><a href="Decima_terceira.aspx" title="">Log</a></li>
                                <li><a href="Decima_terceira.aspx" title="">Registrar</a></li>
                                <li><a href="Decima_terceiraB.aspx" title="">Informações</a></li>
                            </ul>
                        </li>
                         <li class="D13">Decima Quarta
                            <ul class="itens" id="14">
                                <li><a href="Decima_Quarta.aspx" title="">Cadastrar</a></li>
                                <li><a href="Decima_QuartaB.aspx" title="">Alterar</a></li>
                                <li><a href="Decima_QuartaB.aspx" title="">Excluir</a></li>
                            </ul>
                        </li>
                        <li class="D14">Decima Quinta
                            <ul class="itens" id="15">
                                <li><a href="Decima_quinta.aspx" title="">Cadastrar</a></li>
                                <li><a href="Decima_quintaB.aspx" title="">Alterar</a></li>
                                <li><a href="Decima_quintaB.aspx" title="">Excluir</a></li>
                            </ul>
                        </li>
    
                    </ul>
                </div>
                <!-- /navSide -->
                <div id="content" class="radius">
                    <asp:ContentPlaceHolder ID="cphContent" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
                <!-- /Content -->
                <div class="footer">
                </div>
                <!-- /footer -->
            </div>
            <!-- /Main -->
        </form>
    </body>
    </html>
    

    Css 

    * {
        border-style: none;
        border-color: inherit;
        border-width: medium;
        padding: 0;
        outline: none;
        float: none;
        background: none;
        margin-left: 0px;
        margin-right: 0;
        }
    
    body {
        background: #F5F5F5;
        font: 12px Arial, Tahoma, Verdana;
        color: #000;
    }
    
    #main {
        margin: 0 auto;
        width: 988px;
    }
    
    /*begin header*/
    .header {
        width: 988px;
        height: 150px;
         background-color:#ffffff;
        border: 3px solid #5d7b9d;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        margin-bottom:5px;
       
    }
    
       
    
    .fundo_logo {
      
    
        background-image: url(../images/logo_cronofit.jpg);
        background-size: cover;
        width:400px;
        min-height:120px; 
        margin: 0 auto;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../images/logo_cronofit.jpg',sizingMethod='scale');
       
    }
    
        .header img {
            float: left;
            margin: 0px;
           
           
        }
    /*end header*/
    /*begin radius*/
    .radius {
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        background: #fff;
        border: 1px solid #ECECFB;
    }
    
    .radiusInput {
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        background: #FBFBFB;
        border: 1px solid #dedede;
    }
    
    /*end radius*/
    /*begin sidebar*/
    .navSide {
        width: 150px;
        min-height: 300px;
        float: left;
        padding:15px 0;
        background-color:#5d7b9d;
    }
    
    .navSide ul {
        list-style:none;
    }
    .navSide ul li{
        display:block;
        margin:0 20px;
        padding:5px;
        color:#FFF;
    
    }
    .navSide ul li a{
        display:block;
        padding:0;
        color:#ffffff;
        text-decoration:none;
    }
    .navSide ul li a:hover{
        color:#000;
    }
    
    .navSide ul li ul.itens{
        list-style:circle;
    }
    
    .navSide ul li ul.itens li a{
        display:block;
        padding:0;
        color:#FFF;
        text-decoration:none;
    }
    .navSide ul li ul.itens li a:hover{
        color:#000;
    
    }
    
    
    /*end sidebar*/
    /*begin content*/
    #content {
        width: 820px;
        float: right;
        margin-bottom: 100px;
        min-height: 300px;
        border: 2px solid #5d7b9d;
    }
    
        #content div {
            margin: 10px 10px 10px 11px;
            float: left;
           
            padding: 10px 0;
        }
    
             #content div h1 {
                margin: 8px 10px 8px 22px;
                font: 20px Arial, Verdana;
                width: 178px;
                height: 36px;
    }
    
           
    
                #content div table thead {
                    background: #729DDE;
                    text-align: center;
                    color: #F5F5F5;
                 
                    font-weight: 800;
                }
    
                    #content div table thead tr th,
                    table tbody tr td {
                        border: 1px solid #E6E6E6;
                        padding: 8px 0;
                    }
    
                #content div table tbody tr td {
                    padding-left: 8px;
                }
    
    
                #content div table tbody .odd {
                    background: #C8D9F2;
                }
    
        #content ul {
            list-style: none;
        }
    
            #content ul li {
                display: inline-block;
                margin: 10px 5px 10px 45px;
                width: 355px;
                height: 52px;
    }
    
                #content ul li span {
                    display: block;
                    margin-bottom: 5px;
                    font: 20px;
                    font-family:'Trebuchet MS';
                   
                }
    
                #content ul li input[type="text"] {
                    padding: 8px;
                    margin: 0 3px 0 0px;
                    color: #666;
                }
    
    
    fieldset {
    
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        width: 370px;
        background: #FBFBFB;
        border: 1px solid #dedede;
        margin: 20px 20px 10px 20px;
        font: 13px Arial,Verdana,Tahoma;
        font-weight: 800;
        color: #000;
        padding-left: 10px;
    }
    
    #rlbTypeSearch {
        float: left;
        margin: 10px;
    }
    
    fieldset #rlbTypeSearch li {
        float: left;
        width: 85px;
        margin: 10px;
    }
    
        fieldset #rlbTypeSearch li input[type="radio"] {
            margin-right: 10px;
        }
    
    
    .disable {
        font-weight: 800;
        background: #fff;
        cursor:no-drop;
    }
    /*end content*/
    /*begin buttons*/
    .btn {
        width: 210px;
        height: 50px;
        line-height: 50px;
        border: 1px solid #ddd;
        color: #000;
        cursor: pointer;
        font-weight: 800;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    
    .btnAdd {
        background: #F5F5F5 url(../images/save.png) no-repeat left 2px;
    }
    
    .btnEdit {
        background: #F5F5F5 url(../images/file_edit.png) no-repeat left;
    }
    
    .btnSearch {
        background: #F5F5F5 url(../images/search.png) no-repeat left 1px;
    }
    
    #Label2 {
    margin-left:21px;
    float:left;
    
    }
    
    #Label1{
    margin-left:30px;
    float:left;
    margin-top:2px;
    
    }
    
    
    li.D0,li.D1,li.D2,li.D3,li.D4,li.D14,
    li.D5,li.D6,li.D7,li.D8,li.D9,
    li.D10,li.D11,li.D12,li.D13,li.D15{ cursor: pointer; }
    .itens{ display: none; }
    
    
    #Visitante {
       cursor: pointer; 
    }
    /*end buttons*/
    
    
    #LinkSair {
        margin-left:200px;
        margin-top:150px;
        font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size:15px;
        float:left;
        color:#808080;
        z-index:1000;
    }
    
    #ImageButton1 {
    
       float:left;
       margin-left:100px;
       margin-top:-70px;
    }
    
    #ImageButton2 {
    
       float:left;
       margin-left:170px;
       margin-top:-70px;
    }
    
    #ImageButton3 {
    
       float:left;
       margin-left:40px;
       margin-top:-70px;
    }
    
    .perfil {
        float:right;
        margin-top:40px;
        margin-right:60px;
    
    }
    
    #ImagePerf {
         border: 1px solid #ddd;
        -webkit-border-radius:50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        cursor: pointer;
        width:50px;
        height:50px;
    }
    #LabelNome {
        font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size:11px;
        margin-top:20px;
        color:#666;
        float:right;
        margin-left:15px;
        max-width:120px;
    
    }

    Desde já Agradeço 

    quinta-feira, 16 de junho de 2016 12:11

Todas as Respostas