"장고 부트스트랩"의 두 판 사이의 차이
둘러보기로 가기
검색하러 가기
| (같은 사용자의 중간 판 4개는 보이지 않습니다) | |||
| 18번째 줄: | 18번째 줄: | ||
부트스트랩과 구글에서 무료로 제공하는 아이콘 팩(메터리얼 아이콘)이 있다. 메터리얼 아이콘은 head에 불러와서 class로 불러와 구현한다.(이와 함께 style을 지정해 아이콘의 크기, 색 따위를 변형할 수 있다.) 자세한 사용법은 나중에 찾아보자.(진짜 특이한..하지만 유용한 방식이네;) | 부트스트랩과 구글에서 무료로 제공하는 아이콘 팩(메터리얼 아이콘)이 있다. 메터리얼 아이콘은 head에 불러와서 class로 불러와 구현한다.(이와 함께 style을 지정해 아이콘의 크기, 색 따위를 변형할 수 있다.) 자세한 사용법은 나중에 찾아보자.(진짜 특이한..하지만 유용한 방식이네;) | ||
===탬플릿에 적용하기=== | ===탬플릿에 적용하기=== | ||
| − | |||
| − | |||
적용은 html 파일에 아래와 같이.(다운받은 이름에 오타가 생기지 않게)<syntaxhighlight lang="html"> | 적용은 html 파일에 아래와 같이.(다운받은 이름에 오타가 생기지 않게)<syntaxhighlight lang="html"> | ||
{% load static %} | {% load static %} | ||
<!-- Bootstrap CSS --> | <!-- Bootstrap CSS --> | ||
| − | <link rel="stylesheet" type="text/css" href="{% static ' | + | <link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}"> |
| − | <!-- | + | <!-- Bootstrap JS --> |
| − | < | + | <script src="{% static 'bootstrap.min.js' %}"></script> |
| − | |||
<!-- jQuery JS(점차 사용하지 않는 추세다.) --> | <!-- jQuery JS(점차 사용하지 않는 추세다.) --> | ||
<script src="{% static 'jquery-3.5.1.min.js' %}"></script> | <script src="{% static 'jquery-3.5.1.min.js' %}"></script> | ||
| − | |||
| − | |||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | |||
| − | |||
| − | |||
| − | |||
==장고 제공기능== | ==장고 제공기능== | ||
| 55번째 줄: | 46번째 줄: | ||
= 확인 = | = 확인 = | ||
| − | + | 부트스트랩 문서에서 제공하는 아무 기능이나 구현해보자. 다음의 코드를 탬플릿에 넣고 접속해보면 파란색 버튼이 있는 카드가 하나 나온다. 그렇다면 성공!<syntaxhighlight lang="html+django"> | |
| + | <div class="card" style="width: 18rem;"> | ||
| + | <img src="..." class="card-img-top" alt="..."> | ||
| + | <div class="card-body"> | ||
| + | <h5 class="card-title">Card title</h5> | ||
| + | <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> | ||
| + | <a href="#" class="btn btn-primary">Go somewhere</a> | ||
| + | </div> | ||
| + | </div> | ||
| + | </syntaxhighlight>각종 사용법에 대해선 다음 링크 참조 https://getbootstrap.com/docs/4.4/getting-started/introduction/<nowiki/>(버전별로 약간씩 사용법이 달라지니 유의) | ||
| + | |||
| + | 부트스트랩을 잘 쓰려면... 공부가 조금 필요하다. | ||
| + | |||
| + | = 사용 특이점 = | ||
| + | |||
| + | === 네비바 === | ||
| + | 네비바의 드롭다운을 쓰려고 하면 안나오는 경우가 있다. 그런 경우엔 다음의 조치를 시도해보자. | ||
| + | {| class="wikitable" | ||
| + | !조치 | ||
| + | !설명 | ||
| + | !방법 | ||
| + | |- | ||
| + | |드롭다운 스크립트 배치 | ||
| + | | | ||
| + | |<syntaxhighlight lang="html+django"> | ||
| + | <script> | ||
| + | $('.dropdown-toggle').dropdown() | ||
| + | </script> | ||
| + | </syntaxhighlight> | ||
| + | |- | ||
| + | |JQuery 호출 | ||
| + | |<head> 안에서 제이쿼리를 호출해준다. | ||
| + | |<syntaxhighlight lang="html+django"> | ||
| + | <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script> | ||
| + | </syntaxhighlight> | ||
| + | |} | ||
[[분류:4. 장고 스테틱]] | [[분류:4. 장고 스테틱]] | ||
2022년 6월 9일 (목) 16:22 기준 최신판
1 개요[편집 | 원본 편집]
css를 짜는 것 또한 반복적이면서도 상당히 오래걸리는 작업이다.
이러한 작업의 비효율성을 줄이기 위해 만들어진 것이 부트스트랩이다. 트위터(Twitter)를 개발하면서 만들어졌고 현재 지속적으로 관리되고 있는 오픈소스 프로젝트이다.
2 설치 방법[편집 | 원본 편집]
설치방법엔 크게 2가지가 있다. 직접 다운로드받아 제공하거나 라이브러리로 설치하는 것.(혹은 부트스트랩 주소로 바로 연결하는 것.)
2.1 직접 다운로드[편집 | 원본 편집]
2.1.1 설치[편집 | 원본 편집]
- 설치는 이곳에서 https://getbootstrap.com/
- 다운로드 후 bootstrap.min.css와 bootstrap.min.js를 static 경로에 옮겨두면 사용할 수 있다.(다운로드하지 않고 제공하는 링크로 불러올 수도 있지만, 버전업이라든가, 예상치 못한 문제가 생길 수도 있으니 다운로드를 권장한다.)
- 그런데, bootstrap.min.js의 기능을 모두 사용하려면 jQuery가 필요하다. https://jquery.com/download/에서 다운받는다.(점점 밀려나는 추세임.) 그냥 누르면 괴상한 텍스트들이 뜨는데, 좌클릭이 아닌, 우클릭으로 '다른이름으로 저장'을 누르면 jquery-3.5.1.min.js 따위의 파일을 받을 수 있다. 이것도 static에 옮겨준다.
2.1.2 팁[편집 | 원본 편집]
부트스트랩과 구글에서 무료로 제공하는 아이콘 팩(메터리얼 아이콘)이 있다. 메터리얼 아이콘은 head에 불러와서 class로 불러와 구현한다.(이와 함께 style을 지정해 아이콘의 크기, 색 따위를 변형할 수 있다.) 자세한 사용법은 나중에 찾아보자.(진짜 특이한..하지만 유용한 방식이네;)
2.1.3 탬플릿에 적용하기[편집 | 원본 편집]
적용은 html 파일에 아래와 같이.(다운받은 이름에 오타가 생기지 않게)
{% load static %}
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
<!-- Bootstrap JS -->
<script src="{% static 'bootstrap.min.js' %}"></script>
<!-- jQuery JS(점차 사용하지 않는 추세다.) -->
<script src="{% static 'jquery-3.5.1.min.js' %}"></script>
2.2 장고 제공기능[편집 | 원본 편집]
2.2.1 라이브러리로 부트스트랩 사용하기[편집 | 원본 편집]
개인적으로는.. 부트스트랩의 업그레이드와 다른 정적파일 사용들에 익숙해지기 위해 위의 방법을 추천한다.
django-bootstrap4
폼들에 일괄적으로 장고 부트스트랩4를 적용할 수 있다.
pip install django-bootstrap4
settings.py의 app 항목에 'bootstrap4'를 추가해 적는다.
2.2.2 form에 일괄 적용[편집 | 원본 편집]
탬플릿에서 {% load bootstrap4 %} 로 부트스트랩을 불러온 후,
{% bootstrap4_form form %} 을 {{form}} 대신 넣으면... 위에서 진행한 지저분한 방법을 쓰지 않고도....진행이 된다;
3 확인[편집 | 원본 편집]
부트스트랩 문서에서 제공하는 아무 기능이나 구현해보자. 다음의 코드를 탬플릿에 넣고 접속해보면 파란색 버튼이 있는 카드가 하나 나온다. 그렇다면 성공!
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
각종 사용법에 대해선 다음 링크 참조 https://getbootstrap.com/docs/4.4/getting-started/introduction/(버전별로 약간씩 사용법이 달라지니 유의)
부트스트랩을 잘 쓰려면... 공부가 조금 필요하다.
4 사용 특이점[편집 | 원본 편집]
4.1 네비바[편집 | 원본 편집]
네비바의 드롭다운을 쓰려고 하면 안나오는 경우가 있다. 그런 경우엔 다음의 조치를 시도해보자.
| 조치 | 설명 | 방법 |
|---|---|---|
| 드롭다운 스크립트 배치 | <script>
$('.dropdown-toggle').dropdown()
</script>
| |
| JQuery 호출 | <head> 안에서 제이쿼리를 호출해준다. | <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
|