Позвольте мне сначала показать вам визуализации. Если вы чувствуете, что это довольно хорошо, пожалуйста, продолжайте ссылаться на идеи реализации для подробного объяснения.
макет
1. Половина каждого из левого и правого (COL-MD-6)
2. левое ящик для входа в систему учитывает половину левой стороны
3. Справа являются меры предосторожности для входа в систему
Используются элементы HTML
Хорошо
Входная группа
Кнопка (Btn-Success)
HTML -код
<div style = "margin-top: 30px;"> <div style = "граница-справа: 1px solid #ddd;"> <div> <h3> Пользовательский логин </h3> <div> <span id = "sizing-addon1"> <i aria-hidden = "true"> </i> </span> <input type = "Text" Textdohdelder = "имя пользователя"> </i> </span> <input = "" aria-describedby = "sizing-addon1"> </div> <div> <span id = "sizing-addon1"> <i> </i> </span> <input type = "пароль" Placeholder = "password" aria-describedby = "sizing-addon1"> </div> <div style = "text-align:"> "name"> "name"> "rake"> </div> <div style = " value = "Tea"> Учитель <input type = "radio" name = "kind" value = "stu"> stuctive </div> <button type = "отправить"> вход в систему </button> </div> <div> <h3> Добро пожаловать, чтобы использовать систему управления домашним заданием для учащихся </h3> <ul> <li> Студенты используют студенческий номер </em> для входа. Первоначальный пароль - <em> 1 <em>. Пожалуйста, измените пароль во времени после входа в систему. Учитель, пожалуйста, используйте рабочий номер </em> для входа. Первоначальный пароль - <em> 6 1 </em>. Пожалуйста, измените пароль во времени после входа в систему. </Li> </ul> </div> </div>
CSS -код
. INPUT-GROUP {Margin: 10px 0px; // Верхняя и нижняя края входной коробки составляют 10px, а левая и справа-0px} H3 {Padding: 5px; Border-bottom: 1px solid #ddd; // h3 font dotem bord и нижняя маржа-10px} em {// Подчеркнутый цвет стиля: #c7254e;Выше приведено то, что редактор представил вам для использования Bootstrap для реализации пользовательского интерфейса интерфейса пользователя. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!