Question

我尝试在bootstrap中创建这种类型的登录页面 http://v4-alpha.getbootstrap.com/examples/signin/

但在此之前我已经创建了页面，但这不是bootstrap 代码

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Mainpage.aspx.cs" Inherits="project.Mainpage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>System</title>

    <link href="Styles/login.css" rel="stylesheet" />
    <link href="Styles/main.css" rel="stylesheet" />

    <link href="Content/bootstrap.css" rel="stylesheet" />

    <!-- Google Web fonts -->
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800' rel='stylesheet' type='text/css'/>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,800,700,600' rel='stylesheet' type='text/css'/>
</head>
<body style="background-image:url(images/slide07.jpg);background-repeat:no-repeat">

        <img class="logo" alt="LOGO" src="images/logomain.png" />
    <br /><br />
    <form id="form1" runat="server" class="fordiv">
         <div id="box">

              <span>
                     <img src="images/none.png"  id="avtar" />

                </span> 

            <div style="margin-left: 190px;margin-top: -170px";> 

                <span>
                <asp:TextBox CssClass="textbx" ID="txt_us" runat="server" placeholder="Enter UserName"></asp:TextBox><br /><br />

                </span>
               <span>
                 <asp:TextBox  CssClass="textbx"  ID="txt_pwd" runat="server" placeholder="Enter Password" TextMode="Password"></asp:TextBox><br /><br />

               </span>
                <span>
                  <asp:Button ID="Button1" CssClass="button" runat="server" Text="LOGIN" OnClick="Button1_Click" />
                </span>
            </div>
        </div><br /><br />
       <asp:Label ID="Label1" CssClass="info" visible="false"     runat ="server" Text="" BorderColor="Black"></asp:Label>
    </form>
     <table  class="table" style="border: medium groove #FFFFFF; width: 100%; margin-top: 200px; ">
        <tr>
            <td>
                <img style="margin-left: 10px;"  src="images/passd.jpg" />
            </td>

            <td>
                <img src="images/1.jpg" />
            </td>
            <td>

                <img src="images/2.jpg" />
            </td>
            <td>

                <img src="images/3.jpg" />
            </td>
            <td>
                <img src="images/4.jpg" />
            </td>
        </tr>

    </table>

        <br /><br /><br />  
</body>
</html>

现在我尝试创建bootstrap响应，我试过这个

 <div class="container">
         <img class="logo" alt="LOGO" src="images/logomain.png" /><br /><br />
        <form class="form-signin" runat="server" >
        <h2 class="form-signin-heading">Please sign in</h2><br /><br />
        <label for="inputEmail" class="sr-only">Email address</label>
        <asp:TextBox CssClass="textbx" ID="txt_us" runat="server" placeholder="Enter UserName"></asp:TextBox><br /><br />
        <label for="inputPassword" class="sr-only">Password</label>
          <asp:TextBox  CssClass="textbx"  ID="txt_pwd" runat="server" placeholder="Enter Password" TextMode="Password"></asp:TextBox>
       <br /><br />
         <asp:Button ID="Button1" CssClass="button" runat="server" Text="LOGIN" OnClick="Button1_Click" />   
        <asp:Label ID="Label1" CssClass="info" visible="false"     runat ="server" Text="" BorderColor="Black"></asp:Label>
      </form>

    </div>

但这显示了尴尬的显示

任何解决方案？

Answer 1

那么，对于响应式设计，您应该使用bootstraps的网格系统。我想你应该阅读一下有关响应式设计here和引导网格系统here的内容。

Bootstrap页面响应

1 个答案: