5번째 줄: |
5번째 줄: |
| 이러한 작업의 비효율성을 줄이기 위해 만들어진 것이 부트스트랩이다. 트위터(Twitter)를 개발하면서 만들어졌고 현재 지속적으로 관리되고 있는 오픈소스 프로젝트이다. | | 이러한 작업의 비효율성을 줄이기 위해 만들어진 것이 부트스트랩이다. 트위터(Twitter)를 개발하면서 만들어졌고 현재 지속적으로 관리되고 있는 오픈소스 프로젝트이다. |
| | | |
− | 설치는 이곳에서 https://getbootstrap.com/
| + | === 설치 === |
| | | |
− | 다운로드 후 bootstrap.min.css와 bootstrap.min.js를 static 경로에 옮겨두면 사용할 수 있다.(다운로드하지 않고 제공하는 링크로 불러올 수도 있지만, 버전업이라든가, 예상치 못한 문제가 생길 수도 있으니 다운로드를 권장한다.) | + | * 설치는 이곳에서 https://getbootstrap.com/ |
− | | + | * 다운로드 후 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을 지정해 아이콘의 크기, 색 따위를 변형할 수 있다.) 자세한 사용법은 나중에 찾아보자.(진짜 특이한..하지만 유용한 방식이네;) |
− | ==장고== | + | ==탬플릿에 적용하기== |
− | ===라이브러리로 부트스트랩 사용하기===
| |
− | 개인적으로는.. 부트스트랩의 업그레이드와 다른 정적파일 사용들에 익숙해지기 위해 위의 방법을 추천한다.
| |
− | | |
− | django-bootstrap4
| |
− | | |
− | 폼들에 일괄적으로 장고 부트스트랩4를 적용할 수 있다.
| |
− | | |
− | | |
− | pip install django-bootstrap4
| |
− | | |
− | settings.py의 app 항목에 'bootstrap4'를 추가해 적는다.
| |
− | ===form에 일괄 적용===
| |
− | 탬플릿에서 {% load bootstrap4 %} 로 부트스트랩을 불러온 후,
| |
− | | |
− | {% bootstrap4_form form %} 을 <nowiki>{{form}}</nowiki> 대신 넣으면... 위에서 진행한 지저분한 방법을 쓰지 않고도....진행이 된다;
| |
| | | |
− | ===탬플릿에 적용하기===
| |
| 적용은 html 파일에 아래와 같이.(다운받은 이름에 오타가 생기지 않게)<syntaxhighlight lang="html"> | | 적용은 html 파일에 아래와 같이.(다운받은 이름에 오타가 생기지 않게)<syntaxhighlight lang="html"> |
| {% load static %} | | {% load static %} |
43번째 줄: |
27번째 줄: |
| <script src="{% static 'bootstrap.min.js' %}"></script> | | <script src="{% static 'bootstrap.min.js' %}"></script> |
| </syntaxhighlight> | | </syntaxhighlight> |
| + | |
| | | |
| | | |
48번째 줄: |
33번째 줄: |
| | | |
| 부트스트랩을 잘 쓰려면... 공부가 조금 필요하다. | | 부트스트랩을 잘 쓰려면... 공부가 조금 필요하다. |
| + | =장고 제공기능= |
| + | ===라이브러리로 부트스트랩 사용하기=== |
| + | 개인적으로는.. 부트스트랩의 업그레이드와 다른 정적파일 사용들에 익숙해지기 위해 위의 방법을 추천한다. |
| + | |
| + | django-bootstrap4 |
| + | |
| + | 폼들에 일괄적으로 장고 부트스트랩4를 적용할 수 있다. |
| + | |
| + | pip install django-bootstrap4 |
| + | |
| + | settings.py의 app 항목에 'bootstrap4'를 추가해 적는다. |
| + | ===form에 일괄 적용=== |
| + | 탬플릿에서 {% load bootstrap4 %} 로 부트스트랩을 불러온 후, |
| + | |
| + | {% bootstrap4_form form %} 을 <nowiki>{{form}}</nowiki> 대신 넣으면... 위에서 진행한 지저분한 방법을 쓰지 않고도....진행이 된다; |
| + | |
| [[분류:4. 장고 스테틱]] | | [[분류:4. 장고 스테틱]] |