부트 스트랩은 프론트 엔드 프레임 워크와 같습니다. 이미 많은 CS를 준비했으며 프론트 엔드 개발에 필요한 경우 직접 호출 할 수 있습니다. 웹 사이트 주소는 http://www.bootcss.com입니다. 부트 스트랩을 사용하면 프론트 엔드 개발 중에 CSS의 레이아웃 시간이 줄어 듭니다.
공식 웹 사이트에서 구성 요소를 다운로드하려면 부트 스트랩을 사용해야합니다 (링크를 열려면 클릭하십시오). 프로덕션 환경에서 사용되는 부트 스트랩 버전 (링크를 열려면 클릭하십시오). Bootstrap3은 2와 호환되지 않습니다. 개발 문서에 따라 Bootstrap3을 직접 사용하는 것이 좋습니다.
부트 스트랩을 압축 해제 한 후, 얻은 3 개의 폴더 CS, 글꼴 및 JS를 사이트 디렉토리에 복사하십시오. Eclipse의 JSP 웹 프로젝트 인 경우 Webroot 폴더 아래에 넣으십시오.
그런 다음 부트 스트랩에 전화 하여이 사이트 디렉토리의 프론트 엔드를 신속하게 모델링 할 수 있습니다.
그러나 다른 브라우저마다 부트 스트랩에 대한 설명이 다르다는 점은 주목할 가치가 있습니다. 즉 일부 스타일을 읽을 수는 없지만 기본 기능은 영향을받지 않으며 페이지는 약간 추악합니다.
동일한 페이지에서 IE와 Google Chrome의 비교는 다음과 같습니다.
1. 기본 목표
부트 스트랩을 사용하여 PC, 태블릿 및 휴대폰 용 아름다운 방문 페이지를 작성하십시오.
PC에서 늘어난 경우 다양한 요소가 화면에 자동으로 적응됩니다.
휴대 전화에서 해당 페이지를 열면 사용자를 자동으로 조정할 필요없이 전화 화면에 직접 조정됩니다.
2. 기본 아이디어
페이지의 레이아웃은 다음과 같이 고유 한 부트 스트랩 스타일에 따라 설계되었습니다.
3. 생산 과정
전체 페이지의 특정 코드는 다음과 같습니다. 다음은 태그를 하나씩 분석합니다.
<! docType html public "-// w3c // dtd html 4.01 전환 // en"> <html> <head> <html> <html> <title> 로그인 페이지 </title> <meta name = "viewport"content = "width = initial-scale = 1.0, user-scalable = no"> Rel = "Stylesheet"media = "screen"> </head> <body> <div> <div> <table frame = "void"> <tr> <td> <img src = "images/img0.jpg"/> </td> <td> 환영합니다. 먼저 로그인하십시오. </td> </tr> </table> </div> <div> <form role = "form"action = "1.html"method = "post"> <div> <label for = "username"> username : </label> <div> <입력 유형 = "text"name "name"= "username"placeholder = "username" "username"> </div> <username ". 비밀번호 : </label> <div> <입력 유형 = "비밀번호"이름 = "비밀번호"자리 표시 자 = "비밀번호"id = "비밀번호"/> </div> </div> <div> <div> <div> <div> <버튼 유형 = "제출"> 로그인 </button> <small> 계정이 없습니까? <a href = "http://2.com"> 등록하려면 클릭 </a> </small> </div> </div> </form> </div> </div> </div> </body> </html>
1. <head> 태그
먼저 다음 두 줄의 코드를 <head> 태그에 넣습니다.
<head> <title> 로그인 페이지 </title> <!-페이지가 브라우저의 화면에 자동으로 조정되어야합니다 .-> <meta name = "viewport"content = "width = device-width, 초기 스케일 = 1.0, 사용자-스케일 가능 = no"!-declare bootstrap-> <link href = "CSSS/bootstrap. 미디어 = "화면"> </head>
2. <body> 태그
(1) 먼저 <div> </div>를 작성한 다음 코드를 넣습니다. 기본 설명은 다음과 같습니다.
(2) <div> 태그
<div> <!-이 CSS 레이어를 레이아웃하도록 테이블을 설정하십시오. IMG 태그에 Align = "Left"를 추가하는 것은 쉽지 않습니다. 이미지는 <table>-> <table frame = "void"> <td> <td> <img src = "images/img0.jpg"/> </td> <td> 환영합니다. 먼저 로그인하십시오. </td> </tr> </table> </div>
(3) <div> 태그 아래에서 먼저 양식 요소 양식 역할 = "form"action = "1.html"method = "post"를 넣으십시오. 일반적인 HTML 양식과 비교 하여이 양식에는 더 많은 클래스 속성 및 역할 속성이 있습니다. 클래스 속성에 대해 많이 말할 필요가 없습니다. 값이 양식 인 경우 양식에 충분한 위치가 있더라도 외부 레이블과 입력 상자가 같은 줄에 있지 않습니다. 값이 현재 형태의 유명 인 경우, 그림의 효과에 표시됩니다. 역할 속성은 어떤 효과도 보이지 않으며, Bootstrap의 중국 문서에 따라 추가됩니다.
다음으로, 각 형태의 요소는 다음과 같습니다.
<div> <form role = "form"action = "1.html"method = "post"> <!-각 속성의 외부 레이블은 입력 상자와 함께 양식 그룹 튜플을 형성합니다.-> <div> <!-다음 클래스 속성은 화면 크기에 따라 자동으로 스트레칭해야합니다. 물론 IE8에서 설명 할 수없는 것은 무엇이든. ID의 기능이 보이지 않습니다. 부트 스트랩 중국어 문서의 요구 사항에 따라 추가됩니다 .-> <input type = "text"name = "username"placeholder = "username"id = "username"/> </div> <div> <레이블에 대한 = "password"> password "> div plassest" "place hiplder" "placeholder" "placeholder" "placeholder" "placeing" </div> <div> <!-여기의 버튼은 HTML 일반 제출 버튼과 다르지만 양식 제출에 영향을 미치지 않습니다.> <버튼 유형 = "제출"> 로그인 </button> <!-<small> 태그는이 텍스트가 제출 버튼과 동일한 줄과 동일한 줄을 보장합니다. <a href = "http://2.com"> 등록하려면 클릭 </a> </small> </div> </div> </form> </div> </div>
이 시점 에서이 페이지의 개발이 완료되었습니다.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.