最初にレンダリングをお見せしましょう。かなり良いと感じている場合は、詳細な説明については、実装のアイデアを引き続き参照してください。
レイアウト
1。左右のそれぞれの半分（col-MD-6）
2。左ログインボックスは、左側の半分を説明します
3。右側には、システムにログインするための注意事項があります
使用されるHTML要素
良い
入力グループ
ボタン（btn-success）
HTMLコード
<div style = "mirvight-top：30px;"> <div style = "border-right：" border-right： "> px solid #ddd;"> <div> <h3> user login </h3> <span id = "sizing-addon1"> <i aria-hidden = "true"> </i> </<入力= "テキスト"ユーザー名= aria-describedby="sizing-addon1"></div><div><span id="sizing-addon1"><i></i></span><input type="password" placeholder="password" aria-describedby="sizing-addon1"></div><div style="text-align:center;"><input type="radio" name="kind" value="tea">教師<入力タイプ= "Radio" name = "dind" value = "stu">生徒</div> <ボタンタイプ= "submit"> login </button> </div> </div> <h3>生徒の宿題管理システムを使用するよう歓迎</h3> <ul> <li>生徒は学生番号を使用して</em>をログインします。最初のパスワードは<em> 6 </em>ログイン後の時間内にパスワードを変更してください。教師は、作業番号を使用してログインしてください。最初のパスワードは<em> 6 1 </em>です。ログインした後の時間内にパスワードを変更してください。</li> </ul> </div> </div>
CSSコード
.input-group {マージン：10px 0px; //入力ボックスの上限と下のマージンは10px、左右は0px} h3 {padding：5px; border-bottom：1px solid #ddd; // h3 font bottom border} li {list-style-type：squarマージンは10pxです} em {//強調されたスタイルの色：＃c7254e; font-style：enternit; background-color：＃f9f2f4;}上記は、編集者がBootstrapを使用してユーザーログインインターフェイスUIを実装するために紹介したものです。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！