Bootstrap innerhalb von '<layoutTemplate>'

  • VB.NET
  • .NET 4.0

    Bootstrap innerhalb von '<layoutTemplate>'

    Hallo zusammen,

    ich bin noch relativ neu, was Webdesign angeht und habe nun ein kleines Problem.
    Ich habe mit Hilfe von Bootstrap eine Login Website erstellt (s. Bild im Anhang).

    Auf dem Bild sind zwei Login-Panels zu erkennen.
    Das obere ohne ASP Funktionen und in dem gewünschten Design und das zweite inklusive ASP Funktionen.

    Durch das "<layoutTemplate>" im Code werden die Textboxen kleiner angezeigt als in dem ersten Panel angezeigt.
    Hat jemand eine Idee, woran das liegt bzw. wie ich im zweiten Panel das identische Design wie im ersten Panel hinbekomme?

    Die Größe der Textboxen sollte sich an den Bootstrap Vorgaben richten und nicht mit CSS fixiert werden (Beispiel: width:500px;), da ansonsten die Textboxen auf einem Tablet das Panel überragen.

    Zur Info: Das erste Panel dient nur der Erklärung und wird, sobald das Design des zweiten Panels passt, entfernt.

    Hier nun mein Code:

    HTML-Quellcode

    1. <body class="bg-faded">
    2. <div class="container">
    3. <div class="row">
    4. <div class="col-md-6 col-md-offset-3">
    5. <div class="panel panel-login bg-inverse">
    6. <div class="panel-heading bg-inverse-light">
    7. <div class="row">
    8. <div class="col-xs-5">
    9. <img src="Images/logo.png" style="height:40px;" />
    10. </div>
    11. </div>
    12. </div>
    13. <div class="modal-footer" >
    14. <div class="panel-body ">
    15. <div class="row">
    16. <div class="col-lg-12">
    17. <form id="login-form" role="form" style="display: block;">
    18. <div class="form-group">
    19. <input type="email" name="E-Mail-Adresse" id="UserName" tabindex="1" class="form-control" placeholder="E-Mail-Adresse" value="" required="required">
    20. </div>
    21. <div class="form-group">
    22. <input type="password" name="passwort" id="Password" tabindex="2" class="form-control" placeholder="Passwort" required="required">
    23. </div>
    24. <div class="form-group">
    25. <div class="row">
    26. <div class="col-sm-6 col-sm-offset-3">
    27. <input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-primary" value="Anmelden">
    28. </div>
    29. </div>
    30. </div>
    31. <div class="form-group">
    32. <div class="row">
    33. <div class="text-center">
    34. <a href="#" class="link">Passwort vergessen?/ Kontoaktivierung</a>
    35. </div>
    36. </div>
    37. </div>
    38. </form>
    39. </div>
    40. </div>
    41. </div>
    42. </div>
    43. </div>
    44. </div>
    45. </div>
    46. <br />
    47. <form id="form1" runat="server">
    48. <div class="container">
    49. <div class="row">
    50. <div class="col-md-6 col-md-offset-3">
    51. <div class="panel panel-login bg-inverse">
    52. <div class="panel-heading bg-inverse-light">
    53. <div class="row">
    54. <div class="col-xs-3">
    55. <img src="Images/logo.png" style="height:40px;" />
    56. </div>
    57. </div>
    58. </div>
    59. <div class="modal-footer" >
    60. <div class="panel-body ">
    61. <div class="row">
    62. <div class="col-md-12 ">
    63. <asp:Login ID="Login1" runat="server" OnAuthenticate="ValidateUser">
    64. <LayoutTemplate>
    65. <div class="form-group " style="display:block; margin-left:auto; margin-right:auto; ">
    66. <!-- <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">Benutzername:</asp:Label>
    67. <br /> -->
    68. <asp:TextBox ID="UserName" type="email" CssClass="form-control email" placeholder="E-Mail-Adresse" runat="server"></asp:TextBox>
    69. <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" ErrorMessage="Der Benutzername ist erforderlich." ToolTip="Der Benutzername ist erforderlich." ValidationGroup="Login1">*</asp:RequiredFieldValidator>
    70. <!-- <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">Kennwort:</asp:Label>
    71. <br /> -->
    72. <asp:TextBox ID="Password" CssClass="form-control passwort" placeholder="Passwort" runat="server" TextMode="Password"></asp:TextBox>
    73. <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password" ErrorMessage="Das Kennwort ist erforderlich." ToolTip="Das Kennwort ist erforderlich." ValidationGroup="Login1">*</asp:RequiredFieldValidator>
    74. <div class="row">
    75. <div class="col-xs-12" style="text-align:left;" >
    76. <asp:CheckBox ID="CheckBox1" runat="server" Text="&nbsp;&nbsp;Anmeldedaten speichern" />
    77. </div>
    78. </div>
    79. <div class="center-block">
    80. <asp:Button ID="Button4" runat="server" CommandName="Login" CssClass="form-control btn btn-primary " Text="Anmelden" ValidationGroup="Login1" />
    81. <asp:Literal ID="Literal4" runat="server" EnableViewState="False"></asp:Literal>
    82. <br />
    83. </div>
    84. </div>
    85. </LayoutTemplate>
    86. </asp:Login>
    87. </div>
    88. <div class="text-center">
    89. <a href="#" class="link">Passwort vergessen?/ Kontoaktivierung</a>
    90. </div>
    91. </div>
    92. </div>
    93. </div>
    94. </div>
    95. </div>
    96. </div>
    97. </div>
    98. </form>
    99. </body>


    Ich hoffe, ihr versteht, was ich meine.

    Vielen vielen Dank im Voraus. ;)

    Gruß Timo
    Bilder
    • beispiel.jpg

      62,04 kB, 1.278×883, 39 mal angesehen