편집
1,408
번
바뀜
편집 요약 없음
18번째 줄:
18번째 줄:
<!-- Bootstrap JS -->
−<script src="{% static 'bootstrap/bootstrap.min.js' %}"></script>
각종 사용법에 대해선 다음 링크 참조 https://getbootstrap.com/docs/4.4/getting-started/introduction/<nowiki/>(버전별로 약간씩 사용법이 달라지니 유의)
−부트스트랩을 잘 쓰려면... 공부가 조금 필요하다.
확인을 위해 네비게이션 바를 적용해보자. [[장고 네비게이션 바 만들기]] 문서를 참고하자. 귀찮다면.. 부트스트랩 문서에서 제공하는 아무 기능이나 구현해보자.+
+
+
+
부트스트랩과 구글에서 무료로 제공하는 아이콘 팩(메터리얼 아이콘)이 있다. 메터리얼 아이콘은 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 'bootstrap/bootstrap.min.css' %}">
+<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
−<!-- 각 앱의 CSS. 앱의 CSS를 먼저 뒤지고 상위의 CSS를 찾는다. -->
+<!-- Bootstrap JS -->
−<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
+<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. 장고 스테틱]]