ログインフォームを応答する方法

アプリケーションは、以下のログオンフォームを作成するためにブートストラップを使用します。モバイルデバイスでは、ログオンフォームが小さすぎる、モバイル画面を中心に、多くの空白があります。ユーザーの名前とパスワードを入力することは困難です。ログインフォームを応答する方法

これを修正して、ログインフォームが携帯電話でもネイティブに見えるようにするにはどうすればよいですか？または、任意の画面解像度で使用可能なログオンフォームを作成するために使用できるテンプレートがありますか？

<!DOCTYPE html> 
<html> 

<head> 
    <link href="/admin/css/redmond/jquery-ui.css" rel="stylesheet" /> 
    <link href="/admin/Content/font-awesome.min.css" rel="stylesheet" /> 
    <link href="/admin/Content/bootstrap.css" rel="stylesheet" /> 
    <link href="/admin/Content/bootstrap-theme.css" rel="stylesheet" /> 
    <title> 
     Login 
    </title> 
    <script src="/admin/Scripts/jquery-1.11.2.js"></script> 
    <script src="/admin/Scripts/jquery-ui-1.11.4.js"></script> 
    <script src="/admin/Scripts/bootstrap.js"></script> 
</head> 

<body> 
    <div class='login-box container'> 
     <form action="/admin/Account/LogOn" method="post"> 
      <fieldset> 
       <legend>Login</legend> 
       <div class="form-group"> 
        <label for="user">User</label> 
        <input autofocus="1" class="form-control" id="user" maxlength="10" name="UserName" placeholder="User" required="True" style="width:auto" type="text" value="" /> 
       </div> 
       <div class="form-group"> 
        <label for="password">Password</label> 
        <input class="form-control" id="password" name="Password" placeholder="Password" required="True" style="width:auto" type="password" /> 
       </div> 
       <div class="checkbox"> 
        <label> 
         <input id="RememberMe" name="RememberMe" type="checkbox" value="true" /> 
         <input name="RememberMe" type="hidden" value="false" /> Remember me 
        </label> 
       </div> 
      </fieldset> 
      <input type="submit" value='Logon' class="btn btn-primary" /> 
     </form> 
    </div> 
    <script type="text/javascript"> 
    $(function() { 
     $("input:text:visible:first").focus(); 
    }); 
    </script> 
</body> 

</html>

HTML5、ブートストラップ3、jQuery、jQuery UI、ASP.NET MVC 4、およびRazorが使用されます。

出典

2016-03-26 Andrus

ブートストラップを使用しているので、カラムシステムを見たことがありますか？ https://getbootstrap.com/examples/grid/ ...また、あなたのタイトルをresponsiblyではなくresponsiblyに変更する必要があります。：P – chrisv

私はタイトルを詰めました。私はbootstapカラムシステムを使用しています。ログオンフォームには列が1つしかないので、列システムはここでは役に立ちません。私は、ログオンフォームを大きくする必要があります、おそらく携帯電話で画面全体の幅を占めるために – Andrus

私はあなたがブートストラップのドキュメントでいくつかの時間を費やす必要があると思う。そして、このフォーム要素がdiffウィンドウにどのように正しく整列するかを見てください。http://getbootstrap.com/css/#forms –

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
    <h2>Vertical (basic) form</h2> 
    <form role="form"> 
    <div class="form-group"> 
     <label for="email">Email:</label> 
     <input type="email" class="form-control" id="email" placeholder="Enter email"> 
    </div> 
    <div class="form-group"> 
     <label for="pwd">Password:</label> 
     <input type="password" class="form-control" id="pwd" placeholder="Enter password"> 
    </div> 
    <div class="checkbox"> 
     <label><input type="checkbox"> Remember me</label> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
    </form> 
</div> 

</body> 
</html>

出典

2016-03-26 19:15:29

ログインフォームを応答する方法

答えて

関連する問題