CSS Javascript Bootstrap 부트스트랩 웹사이트 접속 활용 방법

Back-End/Django

psy_er 2021. 10. 21. 09:41

1. getbootstrap.com 사이트에 접속한다

2. Doit 장고 부트스트랩 교재에서 사용한 버전은 4.5 버전이다.

3. 상단에 다운로드 버튼을 클릭한다.

4. Bootstrap v5.1 클릭한다

5. All versions 클릭해 4.5 버전을 클릭한다.

6. Head to the downloads page 클릭하지 말고 새 탭에서 열도록 하자.

7. Compiled CSS and JS의 Download 버튼을 클릭한다.

부트스트랩 파일이 bootstrap-4.5.3-dist.zip으로 생성되었을 것이다. 그러면 zip 압축을 풀고 css 디렉터리에 접근한다. bootstrap.min.css 파일과 bootstrap.min.css.map 두 개의 파일을 업로드할 것이다.

1. vscode에 bootstrap4 디렉터리를 을 생성한다.

2. bootstrap4 파일 아래에 css 디렉터리를 생성한다.

3. bootstrap.min.css 파일과 bootstrap.min.css.map 두 개 이 파일을 드래그해서 복사시킨다.

4. <head> 부분에 코드를 추가한다.

<link href=“bootstrap4/css/bootstrap.min.css” rel=“stylesheet” type=“text/css”>

Javascript는 다운로드하지 않고 copy 해 사용한다.

1. Compiled CSS and JS의 Download 버튼이 있는 곳에서 드래그해 jsDeliver을 찾는다.

2. 밑에 3줄 스크립트를 복사한다.

3. </body> 바로 전에 복사 붙여 넣기 한다.

[ Django ] 장고 프로젝트의 기본 (4)	2021.10.25
[ Bootstrap ] 다양한 기능 부트스트랩 위치와 Font Awesome (0)	2021.10.24
[ Bootstrap ] 부트스트랩 Navbar 나브 바 Container 컨테이너 Grid 그리드 활용 (0)	2021.10.23
[ Bootstrap ] 부트스트랩 Spacing Row Margin 마진 Padding 패딩 Card Modal 활용 (3)	2021.10.22
HTML CSS Javascript 프로그래밍 (8)	2021.10.20

PSY_IT_Tech