Использование Bootstrap Framework для дизайна и разработки является относительно популярной тенденцией в мире. При оптимизации новых продуктов многие компании -разработчики выберут эту структуру разработки из -за своих всесторонних преимуществ в JS и управления.
Bootstrap Framework представляет собой фронтальную каркас дизайна пользовательского интерфейса. Он обеспечивает унифицированный интерфейс пользовательского интерфейса и упрощает процесс разработки интерфейса интерфейса (недостаток в том, что интерфейс настроен, поэтому не так много места для регулировки). Особенно текущий макет времени ответа (на мой взгляд, на странице используется макет различных элементов страницы в соответствии с различными решениями), которая хорошо поддерживается в начальной загрузке. Пока свойства просто установлены, макет времени ответа может быть автоматически реализована, что значительно упрощает процесс интерфейса программистов.
Поэтому я использую платформу Bootstrap для реализации следующего интерфейса. Хотя это просто, это необычно (если вы действительно хотите реализовать его самостоятельно, я не знаю, будет ли это год месяца обезьян и лошадей)
Вся страница разделена на несколько частей, которые реализованы с использованием образца кода на официальном веб -сайте Bootstrap, и, наконец, сформированы на страницу. Схема каждой части показана на следующем рисунке
Далее объясните код каждой части по очереди
Во -первых, построить пустую страницу, код следующим образом:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compateible" content = "ie = edge"> <meta name = "viewport" content = "width = device-width, начальная шкала = 1.0"> <meta name = "meta name =" meta name = "meta name" "meta name =" meta name = "meta name" "meta name" "meta name" "meta" = "meta name =" "meta name =" "meta name" "" meta name "". Content = ""> <Title> Bootstrap </title> <link rel = "styleSheet" href = "http://cdn.bootcss.com/twiter-bootstrap/3.0.1/css/bootstrap.min.css"> <link rel = "styleshepe" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"> <!-[if Ie 9]> <Скрипт src = "../../ docs-assets/js/ie8-responsive-file-warning.js"> </script> <! [endif]-> <!-[если я т.е. 9]> <script src = "../../ docs-assets/js/ie8-responsive-file-warning.js"> <//script> <! Т.е. 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script> <! [endif]-> <style> .bs-docs-home {fackgine-color: #1b31b1; Фоно-изображение: url (line.png); } </style> </head> <body> <script src = "https://code.jquery.com/jquery-1.10.2.min.js"> </script> <script src = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"> </script> </body> </html>Чтобы использовать Framework Bootstrap, вы должны обратиться к файлу Framework Bootstrap на странице. Всего их четыре: bootstrap.min.css, bootstrap-teme.min.css, jquery-1.10.2.min.js, bootstrap.min.js
Только ссылаясь на эти файлы, вы можете использовать различные элементы пользовательского интерфейса, предоставленные платформой Bootstrap.
Далее, как показано на приведенном выше рисунке, объясните коды каждой части в последовательности
Верхнее описание:
Идея разработки всей страницы состоит в том, чтобы поместить всю страницу на панели, а текст сверху - заголовок панели
Страница Bootstrap Framework представляет собой макет сетки с 12 колонами. Поэтому я разделил всю страницу на три части. Есть 3 колонны шириной слева и вправо, а 6 столбцов расширяют одну панель (панель).
Код выглядит следующим образом: оставшаяся часть кода находится в <div> </div> в последовательности
<body> <div> <h1 style = "line-height: 2em;"> </h1> <br/> <div> <div> </div> <div> <div> <h3> <strong> запрос оценки оценки навыков профессиональных навыков </strong> </h3> </div> </div> </div> </div> </div> src = "https://code.jquery.com/jquery-1.10.2.min.js"> </script> <script src = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"> </script> </body>
Быстрый текст
Текст приглашения использует компонент оповещения в платформе начальной загрузки, а код заключается в следующем:
<div> <button type = "button" data-dismiss = "alert" aria-hidden = "true"> × </button> <strong> Примечание!
Форма идентификационной карты и кнопка запроса
Форма идентификационной карты и последующая форма учетной записи должны быть в одной форме. Форма идентификации и кнопки запросов - это группы элементов формы, которые используют платформу начальной загрузки. Используйте группу ввода, чтобы объединить текстовое поле и кнопку. Структура начальной загрузки обеспечивает такие эффекты, как водяные знаки и основные моменты. Добавьте много цвета в форму
<form rol = "form" name = "form1"> <div> <label for = "idcard"> Пожалуйста, введите свой идентификационный номер </label> <div> <input type = "text" id = "idcard" name = "idcard" placeholder = "idcard number"> <pran> <button = "onclick =" form1.submit (); > Query </button> </span> </div> </form>
Форма предмета
Формы счета также являются группами элементов формы, которые используют платформу начальной загрузки. Используйте группу ввода, чтобы объединить текстовое поле (вход), кнопку (кнопку) и раскрывающий список (UL).
Вы можете ввести субъект непосредственно в текстовое поле, или вы можете выбрать субъект в раскрывающемся меню. Конкретная реализация заключается в том, чтобы использовать $ ('#subject'). Val («оператор компьютера») и другие коды, чтобы изменить контент в текстовом поле в событии Click (щелчок) гиперссылки (а). Форма учета расположена ниже формы идентификатора, внутри формы (форма)
Код заключается в следующем:
<div> <label for = "subject"> Пожалуйста, введите субъект, который вы ищете </label> <div> <input type = "text" id = "субъект" name = "subject" placeholder = "учетная запись, пустой субъект означает запрос всех субъектов"> <div> <button Type = "кнопка" Data-toggle = "Dropdown"> Account <pan> </span> </button> <ul> <li> <al> <href = "#"#"#"##"#"##"##"##". onclick = "$ ('#subject'). val ('Operator');"> компьютерный оператор </a> </li> <li> <a href = "#" onclick = "$ ('#субъект'). Val ('Web Design');"> веб -дизайн </a> </li> <li> <a href = "#" onclick = "$ ('#субъект'). val ('multimedia');"> Multimedia </a> </li> </ul> </div> </div> </div>Информация об ошибке запроса
Когда кнопка запроса нажимается и не найдено записи, отображается сообщение об ошибке запроса. Как и предыдущий текст подсказки, он использует компонент оповещения в платформе начальной загрузки.
Отображается ли эта информация, также требуется сотрудничество фонового динамического кода. Динамический код решает, отображать ли информацию на основе результатов запроса (если нет записи, информация будет отображаться). Динамический код не обсуждается в этой статье.
Расположение стоит за формой, а код выглядит следующим образом:
<div> <button type = "button" data-dismiss = "alert" aria-hidden = "true"> × </button> <strong> Примечание! </strong> Нет результатов, пожалуйста, проверьте идентификационный номер и субъекты и проверьте снова </div>
Форма класса
Когда кнопка запроса нажимается, форма счета отображается при найдении записи. Точно так же, чтобы отображать его также требует сотрудничества динамического кода в фоновом режиме.
Только одно сообщение об ошибке и форма оценки может появиться одновременно
Код заключается в следующем:
<div> <table cellpacing="0" cellpadding="0"> <tr> <th scope="col" ><span style="color:white">Subjects</span></th> <th scope="col"><span style="color:white">Score</span></th> </tr> <tr> <td>Computer Operator</td> <td>No Grade</td> </tr> <tr> <Td> оператор компьютера </td> <td> превосходный </td> </tr> <tr> <td> Multimedia Operator </td> <td> good </td> </tr> <tr> <td> веб -дизайн </td> <td> не удалось </td> </tr> </table> </div>
Эта страница реализована с использованием платформы начальной загрузки. Благодаря мощности платформы начальной загрузки, проектирование пользовательского интерфейса больше не является сложной задачей. Но Bootstrap - это просто структура пользовательского интерфейса, и его превосходство зависит от сотрудничества динамического кода в заднем плане.
Следующий URL -адрес является функцией автора с использованием вышеуказанного интерфейса плюс динамический код бэкэнд (PHP) для реализации запроса результатов тестирования профессиональных навыков (только Шанхай). Вы можете пойти и посмотреть и дать ценные комментарии (действительные в течение 1 месяца).
http://bertin.sturgeon.mopaas.com/
Полный код пользовательского интерфейса заключается в следующем:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compateible" content = "ie = edge"> <meta name = "viewport" content = "width = device-width, начальная шкала = 1.0"> <meta name = "meta name =" meta name = "meta name" "meta name =" meta name = "meta name" "meta name" "meta name" "meta" = "meta name =" "meta name =" "meta name" "" meta name "". Content = ""> <Title> Bootstrap </title> <link rel = "styleSheet" href = "http://cdn.bootcss.com/twiter-bootstrap/3.0.1/css/bootstrap.min.css"> <link rel = "styleshepe" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"> <!-[if Ie 9]> <Скрипт src = "../../ docs-assets/js/ie8-responsive-file-warning.js"> </script> <! [endif]-> <!-[если я т.е. 9]> <script src = "../../ docs-assets/js/ie8-responsive-file-warning.js"> <//script> <! Т.е. 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script> <! [endif]-> <style> .bs-docs-home {fackgine-color: #1b31b1; Фоно-изображение: url (line.png); } </style> </head> <body> <div> <h1 style = "line-height: 2em;"> </h1> <br/> <div> <div> </div> <div> <div> <h3> <strong> Query Quolde Qualts </h3> </h3> </div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <button-type = ”button" data-dismis ARIA-hidden = "true"> × </button> <strong> Примечание! </strong> Оценки, запрошенные на этом сайте, с официального веб-сайта 12333. Для получения подробной информации, пожалуйста, обратитесь к официальному веб-сайту </div> <form rol = "form" = "form1"> <div> <label for = "idcard"> Пожалуйста, введите свой идентификационный номер </label> <div> <dist> <pint vy type = "IDCARD" = "IDCARD". Placeholder = "Идентификационный номер"> <pan> <button type = "onclick =" form1.submit (); " > Query </button> </span> </div> <div> <label for = "subject"> Пожалуйста, введите субъект, который вы хотите запросить </label> <div> <input type = "text" id = "субъект" name = "placeholder =" account, пустой субъект означает запрос всех субъектов "> <div> type =" data-toggle = "Выпадение"> account <pran> </span> </button> <ul> <li> <a href = "#" onclick = "$ ('#субъект'). Val ('Computer Operator');"> компьютерный оператор </a> </li> <li> <a href = "#" onclick = "$ ('#субъект'). Design</a></li><li><a href="#" onClick="$('#Subject').val('Multimedia');">Multimedia</a></li></ul></div></div></form><div><button type="button" data-dismiss="alert" aria-hidden="true">×</button><strong> Attention!</strong> Результаты не было найдено, пожалуйста, проверьте свой идентификационный номер и субъектов и проверьте еще раз </div> <div> <Таблица CellPacing = "0" cellPadding = "0"> <Tr> <th Scope = "col"> <span style = "color: white"> субъекты </span> </th> <th Scope = "col"> <span style = "color: white"> span> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th operator</td><td>no grade</td></tr><td>computer operator</td><td>excellent</td></tr><td>multimedia operator</td><td>good</td></tr><td>web design</td><td>failed</td></tr> </table></div> </div> </div> <div> </div> </div> </div> </div> <script src = "https://code.jquery.com/jquery-1.10.2.min.js"> </script> <script src = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"> </script> </body> </html>Выше приведено соответствующие знания об использовании платформы начальной загрузки для создания примеров интерфейса для страниц запросов, представленных вам. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!