설계 및 개발에 부트 스트랩 프레임 워크를 사용하는 것은 세계에서 비교적 인기있는 트렌드입니다. 신제품을 최적화 할 때 많은 소프트웨어 회사는 JS 및 컨트롤의 포괄적 인 장점으로 인해이 개발 프레임 워크를 선택할 것입니다.
부트 스트랩 프레임 워크는 프론트 엔드 UI 디자인 프레임 워크입니다. 통합 UI 인터페이스를 제공하고 인터페이스 UI를 설계하는 프로세스를 단순화합니다 (단점은 인터페이스가 사용자 정의되므로 조정의 여지가 많지 않다는 것입니다). 특히 현재 응답 시간 레이아웃 (내 이해는 페이지가 다른 해상도에 따라 다른 페이지 요소의 레이아웃을 채택한다는 것입니다. 이는 부트 스트랩에서 잘 지원됩니다. 속성이 간단하게 설정되는 한 응답 시간 레이아웃을 자동으로 구현하여 프로그래머 인터페이스의 프로세스를 크게 단순화 할 수 있습니다.
따라서 부트 스트랩 프레임 워크를 사용하여 다음 인터페이스를 구현합니다. 간단하지만 특별합니다 (정말 직접 구현하고 싶다면 원숭이와 말의 달의 해가 될지 모르겠습니다).
전체 페이지는 여러 부분으로 나뉘어져 있으며 부트 스트랩의 공식 웹 사이트에서 샘플 코드를 사용하여 구현되고 마지막으로 페이지로 형성됩니다. 각 부분의 개략도는 다음 그림에 나와 있습니다.
다음으로, 각 부분의 코드를 차례로 설명하십시오
먼저 빈 페이지를 구성하면 코드는 다음과 같습니다.
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-catible"content = "ie = edge"> <meta name = "viewport"content = "metth = meter-width, feation-width = 1.0"> <meta name = "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" " 이름 = "author"content = ""> <title> bootstrap </title> <link rel = "stylesheet"href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css "> link rel ="Styleshet " href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"> <!-[If Lt IE 9]> <Script src = "../../ docs-assets/js/js/ie8-responsive-file-warning.js"> </script> <! IE 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/respone.js/1.3.0/respent.min.js"> </script> <! [endif]-> <style> .BS-Docs-home {배경색 : #1B31B1; 배경 이미지 : URL (line.png); } src = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"> </script> </body> </html>부트 스트랩 프레임 워크를 사용하려면 페이지의 부트 스트랩 프레임 워크 파일을 참조해야합니다. Bootstrap.min.css, bootstrap-theme.min.css, jquery-1.10.2.min.js, bootstrap.min.js
이 파일을 참조 하여만 부트 스트랩 프레임 워크에서 제공하는 다양한 UI 요소를 사용할 수 있습니다.
다음으로 위의 그림과 같이 각 부분의 코드를 순서대로 설명하십시오.
상단 설명 :
전체 페이지를 설계한다는 아이디어는 전체 페이지를 패널에 배치하는 것이며 맨 위에있는 텍스트는 패널 헤더입니다.
부트 스트랩 프레임 워크의 페이지는 12 열 그리드 레이아웃입니다. 그래서 전체 페이지를 세 부분으로 나누었습니다. 왼쪽과 오른쪽에는 3 개의 열이 넓은 공백이 있으며 6 개의 열은 하나의 패널 (패널)을 넓 힙니다.
코드는 다음과 같습니다. 코드의 나머지 부분은 순서대로 <div> </div>입니다.
<body> <div> <h1 style = "line-height : 2em;"> </h1> <br/> <div> <div> </div> <div> <h3> <strong> <strong> <strongational skills 검사 점수 쿼리 </strong> </h3> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> src = "https://code.jquery.com/jquery-1.10.2.min.js"> </script> <scrc = "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> 참고! </strong>이 사이트의 점수는 12333의 공식 웹 사이트에서 나온 것입니다. 자세한 내용은 공식 웹 사이트 </div>를 참조하십시오.
Identity 카드 양식 및 쿼리 버튼
ID 카드 양식과 후속 계정 양식은 한 형식이어야합니다. ID 형식 및 쿼리 버튼은 부트 스트랩 프레임 워크를 사용하는 양식 요소 그룹입니다. 입력 그룹을 사용하여 텍스트 상자와 버튼을 결합하십시오. 부트 스트랩 프레임 워크는 워터 마크 및 하이라이트와 같은 효과를 제공합니다. 양식에 많은 색상을 추가하십시오
<form role = "form"name = "form1"> <div> <label for = "idcard"> ID 번호를 입력하십시오 </label> <div> <입력 유형 = "텍스트"id = "idcard"name = "idcard"placeholder = "idcard 번호"> <span> <button type = "button"on comp1.submit (); " > 쿼리 </button> </span> </div> </form>
주제 양식
계정 양식은 또한 부트 스트랩 프레임 워크를 사용하는 양식 요소 그룹입니다. 입력 그룹을 사용하여 텍스트 상자 (입력), 버튼 (버튼) 및 드롭 다운 목록 (UL)을 결합하십시오.
텍스트 상자에 직접 주제를 입력하거나 드롭 다운 메뉴에서 주제를 선택할 수 있습니다. 특정 구현은 $ ( '#aversity'). val ( 'Computer Operator') 및 기타 코드를 사용하여 하이퍼 링크 (A)의 클릭 이벤트 (클릭)에서 텍스트 상자의 내용을 변경하는 것입니다. 계정 양식은 양식 (양식) 안에 ID 양식 아래에 있습니다.
코드는 다음과 같습니다.
<div> <label for = "subject"> 원하는 주제를 입력하십시오 </label> <div> <input type = "text"id = "id id ="subll "name ="sublic "placeholder ="sucdholder = "계정, 빈 주제는 모든 주제를 쿼리하는 것을 의미합니다"> <div> <버튼 유형 = "button"data-toggle = "dropdown"> 계정 <Span> </span> <ul> <li> <a href = "##" ". onclick = "$ ( '#aver'). val ( '컴퓨터 운영자');"> 컴퓨터 연산자 </a> </li> <li> <a href = "#"onclick = "$ ( '#aversity'). val ( 'Web Design');"> 웹 디자인 </a> </li> <li> <a href = "#" onclick = "$ ( '#aversity'). val ( 'multimedia');"> Multimedia </a> </li> </ul> </div> </div> </div>
쿼리 오류 정보
쿼리 버튼을 클릭하고 레코드가 없으면 쿼리 오류 메시지가 표시됩니다. 이전 프롬프트 텍스트와 마찬가지로 부트 스트랩 프레임 워크에서 경고 구성 요소를 사용합니다.
이 정보가 표시되는지 여부는 배경 동적 코드의 협력이 필요합니다. 동적 코드는 쿼리 결과를 기반으로 정보를 표시할지 여부를 결정합니다 (레코드가없는 경우 정보가 표시됩니다). 이 기사에서는 동적 코드가 논의되지 않습니다.
위치는 양식 뒤에 있으며 코드는 다음과 같습니다.
<div> <button type = "button"data-dismiss = "Alert"aria-hidden = "true"> × </button> <strong> 참고! </strong> 결과가 발견되지 않았습니다. ID 번호와 주제를 확인하고 다시 확인하십시오 </div>
등급 형식
쿼리 버튼을 클릭하면 레코드가 발견되면 점수 양식이 표시됩니다. 마찬가지로, 표시 여부는 배경에서 동적 코드의 협력이 필요합니다.
하나의 오류 메시지와 점수 양식 만 동시에 나타날 수 있습니다.
코드는 다음과 같습니다.
<div> <테이블 셀 패팅 = "0"CellPadding = "0"> <tr> <th scope = "col"> <span style = "color : white"> subjects </span> </th> <th scope = "col"> <span style = "color : white"> span </span> </td> </td> no td> no td> <tr> <td> 컴퓨터 운영자 </td> <td> 우수한 </td> </tr> <tr> <td> 멀티미디어 운영자 </td> good </td> </tr> <tr> <td> 웹 디자인 </td> <td> 실패 </td> </div>
이 페이지는 부트 스트랩 프레임 워크를 사용하여 구현됩니다. 부트 스트랩 프레임 워크의 힘 덕분에 UI를 설계하는 것은 더 이상 어려운 작업이 아닙니다. 그러나 Bootstrap은 UI 프레임 워크 일 뿐이며 우수성은 백그라운드에서 동적 코드의 협력에 달려 있습니다.
다음 URL은 위의 인터페이스 + 백엔드 동적 코드 (PHP)를 사용하는 저자의 기능으로, 직업 기술 테스트 점수 (상하이 만 해당)의 쿼리를 실현합니다. 당신은 가서보고 귀중한 의견을 줄 수 있습니다 (1 개월 동안 유효).
http://bertin.sturgeon.mopaas.com/
전체 UI 코드는 다음과 같습니다.
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-catible"content = "ie = edge"> <meta name = "viewport"content = "metth = meter-width, feation-width = 1.0"> <meta name = "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" " 이름 = "author"content = ""> <title> bootstrap </title> <link rel = "stylesheet"href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css "> link rel ="Styleshet " href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"> <!-[If Lt IE 9]> <Script src = "../../ docs-assets/js/js/ie8-responsive-file-warning.js"> </script> <! IE 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/respone.js/1.3.0/respent.min.js"> </script> <! [endif]-> <style> .BS-Docs-home {배경색 : #1B31B1; 배경 이미지 : URL (line.png); . aria-hidden = "true"> × </button> <strong> note! </strong>이 사이트에서 묻은 점수는 12333 년의 공식 웹 사이트에서 나온 것입니다. 자세한 내용은 공식 웹 사이트를 참조하십시오. </div> <form robol = "form"= "form1"> <div> <레이블 "Idcard"> id 숫자 </label> <input type = "id idcard" "idcard" "idcard"를 입력하십시오. 자리 표시기 = "ID 번호"> <span> <버튼 유형 = "버튼"onclick = "form1.submit ();"; > query </button> </span> </div> <div> <label for = "subll"> 쿼리하려는 주제를 입력하십시오 </label> <div> <입력 유형 = "text"id = "subject"name = "subject"placeholder = "계정, 빈 주제는 모든 주제를 쿼리하는 것을 의미합니다. href = "#"onclick = "$ ( '#aversity'). val ( '컴퓨터 운영자');"> 컴퓨터 운영자 </a> </a> </a> </a> </li> <li> <a href = "#"onclick = "$ ( '#aversity');"> 웹 디자인 </a> </li> <li> <a href = "#" onclick = "$ ( '#aversity'). val ( 'multimedia');"> Multimedia </a> </a> </a> </li> </ul> </div> </div> </form> <div> <button type = "button"data-dismiss = "Aria-Hidden ="true "> × </button> <sprong> </strong> 결과를 확인하십시오. <div> <테이블 셀 패팅 = "0"CellPadding = "0"> <tr> <th scope = "col"> <span style = "color : white"> subjects </span> </th> <th scope = "col"> <span style = "color : 흰색"> scor </span> </th> </td> <td> computerator <td> </td> <td> <td> 운영자 </td> <td> 우수 </td> </tr> <td> 멀티미디어 운영자 </td> <td> good </td> </td> <td> 웹 디자인 </td> <td> 실패한 </td> </td> </table> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> src = "https://code.jquery.com/jquery-1.10.2.min.js"> </script> <scrc = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/js/bootstrap.min.js"> </html> </html>위의 것은 부트 스트랩 프레임 워크를 사용하여 소개 된 쿼리 페이지의 인터페이스 예제 코드를 작성하는 것에 대한 관련 지식입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!