Bootstrap이 기본 레이아웃을 구현하는 방법에 대한 자세한 설명
- PHPz원래의
- 2017-03-20 14:02:279747검색
부트스트랩 사이트를 20분 만에 구축한다는 기사를 봤는데 내용이 좀 낡았네요. Bootstrap3을 재사용해서 관련 내용을 최대한 자세히 설명했습니다.
1. 기본 페이지 만들기
먼저 기본 HTML 템플릿 페이지를 만듭니다. 이 페이지는 sublime + emmet을 사용하여 직접 만들 수 있습니다.
1.1 새 파일 만들기, Ctrl + N
1.2 페이지 파일에 저장, Ctrl + S, 이름을 index.html
1.3 이 빈 페이지에, html:5를 입력한 다음 Tab 키를 직접 누르면 기본 HTML5 템플릿 페이지가 표시됩니다.
1.4 다시 저장하고 Ctrl + S를 누릅니다.
페이지 내용은 다음과 같아야 합니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
2. Bootstrap 파일 참조 추가
index.html 파일이 있는 폴더에 css 폴더를 생성하여 모든 스타일 파일을 저장하고, css 하위 폴더에 bootstrap이라는 폴더를 생성하여 bootstrap 파일을 저장합니다.
부트스트랩 공식 웹사이트에서 부트스트랩 패키지를 다운로드할 수 있습니다. 이 웹사이트에는 CSS, Font, js라는 세 개의 하위 폴더가 포함된 dist 폴더가 있습니다. 이 세 개의 하위 폴더를 css/bootstrap 폴더에 복사하세요.
페이지와 관련된 콘텐츠는 스타일과 스크립트의 두 부분으로 구성됩니다.
2.1 스타일 참조 추가
헤더에 부트스트랩 스타일 참조를 추가합니다. 경로에주의하십시오.
<link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet"/> <link href="css/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"/>
bootstrap.min.css는 모든 부트스트랩 스타일 정의를 포함하는 부트스트랩의 스타일 파일이고 bootstrap-theme.min.css는 테마 정의입니다.
2.2 스크립트 참조 추가
부트스트랩은 jQuery 스크립트를 사용하므로 jquery 스크립트 라이브러리도 다운로드해야 합니다.
index.html 파일이 있는 디렉터리에 lib라는 하위 디렉터리를 만들어 나중에 사용할 수 있도록 스크립트 라이브러리를 저장하고 다운로드한 jquery.min.js를 이 디렉터리에 복사합니다.