9번째 줄: |
9번째 줄: |
| * 설치는 이곳에서 https://getbootstrap.com/ | | * 설치는 이곳에서 https://getbootstrap.com/ |
| * 다운로드 후 bootstrap.min.css와 bootstrap.min.js를 static 경로에 옮겨두면 사용할 수 있다.(다운로드하지 않고 제공하는 링크로 불러올 수도 있지만, 버전업이라든가, 예상치 못한 문제가 생길 수도 있으니 다운로드를 권장한다.) | | * 다운로드 후 bootstrap.min.css와 bootstrap.min.js를 static 경로에 옮겨두면 사용할 수 있다.(다운로드하지 않고 제공하는 링크로 불러올 수도 있지만, 버전업이라든가, 예상치 못한 문제가 생길 수도 있으니 다운로드를 권장한다.) |
− | * 그런데, bootstrap.min.js의 기능을 모두 사용하려면 jQuery가 필요하다. https://jquery.com/download/<nowiki/>에서 다운받는다. 그냥 누르면 괴상한 텍스트들이 뜨는데, 좌클릭이 아닌, 우클릭으로 '다른이름으로 저장'을 누르면 jquery-3.5.1.min.js 따위의 파일을 받을 수 있다. 이것도 static에 옮겨준다. | + | * 그런데, bootstrap.min.js의 기능을 모두 사용하려면 jQuery가 필요하다. https://jquery.com/download/<nowiki/>에서 다운받는다.(점점 밀려나는 추세임.) 그냥 누르면 괴상한 텍스트들이 뜨는데, 좌클릭이 아닌, 우클릭으로 '다른이름으로 저장'을 누르면 jquery-3.5.1.min.js 따위의 파일을 받을 수 있다. 이것도 static에 옮겨준다. |
| ===팁=== | | ===팁=== |
| 부트스트랩과 구글에서 무료로 제공하는 아이콘 팩(메터리얼 아이콘)이 있다. 메터리얼 아이콘은 head에 불러와서 class로 불러와 구현한다.(이와 함께 style을 지정해 아이콘의 크기, 색 따위를 변형할 수 있다.) 자세한 사용법은 나중에 찾아보자.(진짜 특이한..하지만 유용한 방식이네;) | | 부트스트랩과 구글에서 무료로 제공하는 아이콘 팩(메터리얼 아이콘)이 있다. 메터리얼 아이콘은 head에 불러와서 class로 불러와 구현한다.(이와 함께 style을 지정해 아이콘의 크기, 색 따위를 변형할 수 있다.) 자세한 사용법은 나중에 찾아보자.(진짜 특이한..하지만 유용한 방식이네;) |
18번째 줄: |
18번째 줄: |
| | | |
| <!-- Bootstrap CSS --> | | <!-- Bootstrap CSS --> |
− | <link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}"> | + | <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/bootstrap.min.css' %}"> |
| <!-- 각 앱의 CSS. 앱의 CSS를 먼저 뒤지고 상위의 CSS를 찾는다. --> | | <!-- 각 앱의 CSS. 앱의 CSS를 먼저 뒤지고 상위의 CSS를 찾는다. --> |
| <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}"> | | <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}"> |
| | | |
− | <!-- jQuery JS --> | + | <!-- jQuery JS(점차 사용하지 않는 추세다.) --> |
| <script src="{% static 'jquery-3.5.1.min.js' %}"></script> | | <script src="{% static 'jquery-3.5.1.min.js' %}"></script> |
| <!-- Bootstrap JS --> | | <!-- Bootstrap JS --> |
− | <script src="{% static 'bootstrap.min.js' %}"></script> | + | <script src="{% static 'bootstrap/bootstrap.min.js' %}"></script> |
| </syntaxhighlight> | | </syntaxhighlight> |
− |
| |
− |
| |
| | | |
| 각종 사용법에 대해선 다음 링크 참조 https://getbootstrap.com/docs/4.4/getting-started/introduction/ | | 각종 사용법에 대해선 다음 링크 참조 https://getbootstrap.com/docs/4.4/getting-started/introduction/ |
| | | |
| 부트스트랩을 잘 쓰려면... 공부가 조금 필요하다. | | 부트스트랩을 잘 쓰려면... 공부가 조금 필요하다. |
| + | |
| =장고 제공기능= | | =장고 제공기능= |
| ===라이브러리로 부트스트랩 사용하기=== | | ===라이브러리로 부트스트랩 사용하기=== |