"장고 부트스트랩"의 두 판 사이의 차이

Pywiki
둘러보기로 가기 검색하러 가기
(새 문서: ==개요== css를 짜는 것 또한 반복적이면서도 상당히 오래걸리는 작업이다. 이러한 작업의 비효율성을 줄이기 위해 만들어진 것이 부트스...)
 
 
(같은 사용자의 중간 판 7개는 보이지 않습니다)
5번째 줄: 5번째 줄:
 
이러한 작업의 비효율성을 줄이기 위해 만들어진 것이 부트스트랩이다. 트위터(Twitter)를 개발하면서 만들어졌고 현재 지속적으로 관리되고 있는 오픈소스 프로젝트이다.
 
이러한 작업의 비효율성을 줄이기 위해 만들어진 것이 부트스트랩이다. 트위터(Twitter)를 개발하면서 만들어졌고 현재 지속적으로 관리되고 있는 오픈소스 프로젝트이다.
  
−
설치는 이곳에서 https://getbootstrap.com/
+
= 설치 방법 =
 +
설치방법엔 크게 2가지가 있다. 직접 다운로드받아 제공하거나 라이브러리로 설치하는 것.(혹은 부트스트랩 주소로 바로 연결하는 것.)
  
−
다운로드 후 bootstrap.min.css와 bootstrap.min.js를 static 경로에 옮겨두면 사용할 수 있다.(다운로드하지 않고 제공하는 링크로 불러올 수도 있지만, 버전업이라든가, 예상치 못한 문제가 생길 수도 있으니 다운로드를 권장한다.)
+
== 직접 다운로드 ==
  
−
그런데, bootstrap.min.js의 기능을 모두 사용하려면 jQuery가 필요하다. https://jquery.com/download/<nowiki/>에서 다운받는다. 그냥 누르면 괴상한 텍스트들이 뜨는데, 좌클릭이 아닌, 우클릭으로 '다른이름으로 저장'을 누르면 jquery-3.5.1.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에 옮겨준다.
 
===팁===
 
===팁===
−
부트스트랩과 구글에서 무료로 제공하는 아이콘 팩(메터리얼 아이콘)이 있다. 메터리얼 아이콘은 head에 불러와서 class로 불러와 구현한다.(특이한 방식이네; 이와 함께 style을 지정해 아이콘의 크기, 색 따위를 변형할 수 있다.) 자세한 사용법은 나중에 찾아보자.(진짜 특이한..하지만 유용한 방식이네;)
+
부트스트랩과 구글에서 무료로 제공하는 아이콘 팩(메터리얼 아이콘)이 있다. 메터리얼 아이콘은 head에 불러와서 class로 불러와 구현한다.(이와 함께 style을 지정해 아이콘의 크기, 색 따위를 변형할 수 있다.) 자세한 사용법은 나중에 찾아보자.(진짜 특이한..하지만 유용한 방식이네;)
−
==장고==
+
===탬플릿에 적용하기===
 +
적용은 html 파일에 아래와 같이.(다운받은 이름에 오타가 생기지 않게)<syntaxhighlight lang="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>
 +
</syntaxhighlight>
 +
 
 +
==장고 제공기능==
 
===라이브러리로 부트스트랩 사용하기===
 
===라이브러리로 부트스트랩 사용하기===
 
개인적으로는.. 부트스트랩의 업그레이드와 다른 정적파일 사용들에 익숙해지기 위해 위의 방법을 추천한다.
 
개인적으로는.. 부트스트랩의 업그레이드와 다른 정적파일 사용들에 익숙해지기 위해 위의 방법을 추천한다.
19번째 줄: 36번째 줄:
  
 
폼들에 일괄적으로 장고 부트스트랩4를 적용할 수 있다.
 
폼들에 일괄적으로 장고 부트스트랩4를 적용할 수 있다.
−
 
  
 
pip install django-bootstrap4
 
pip install django-bootstrap4
29번째 줄: 45번째 줄:
 
{% bootstrap4_form form %} 을 <nowiki>{{form}}</nowiki> 대신 넣으면... 위에서 진행한 지저분한 방법을 쓰지 않고도....진행이 된다;
 
{% bootstrap4_form form %} 을 <nowiki>{{form}}</nowiki> 대신 넣으면... 위에서 진행한 지저분한 방법을 쓰지 않고도....진행이 된다;
  
−
===탬플릿에 적용하기===
+
= 확인 =
−
적용은 html 파일에 아래와 같이.(다운받은 이름에 오타가 생기지 않게)<syntaxhighlight lang="html">
+
부트스트랩 문서에서 제공하는 아무 기능이나 구현해보자. 다음의 코드를 탬플릿에 넣고 접속해보면 파란색 버튼이 있는 카드가 하나 나온다. 그렇다면 성공!<syntaxhighlight lang="html+django">
−
{% load static %}
+
<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/>(버전별로 약간씩 사용법이 달라지니 유의)
 +
 
 +
부트스트랩을 잘 쓰려면... 공부가 조금 필요하다.
  
−
<!-- Bootstrap CSS -->
+
= 사용 특이점 =
−
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
 
−
<!-- 각 앱의 CSS. 앱의 CSS를 먼저 뒤지고 상위의 CSS를 찾는다. -->
 
−
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
 
  
−
<!-- jQuery JS -->
+
=== 네비바 ===
−
<script src="{% static 'jquery-3.5.1.min.js' %}"></script>
+
네비바의 드롭다운을 쓰려고 하면 안나오는 경우가 있다. 그런 경우엔 다음의 조치를 시도해보자.
−
<!-- Bootstrap JS -->
+
{| class="wikitable"
−
<script src="{% static 'bootstrap.min.js' %}"></script>
+
!조치
 +
!설명
 +
!방법
 +
|-
 +
|드롭다운 스크립트 배치
 +
|
 +
|<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>
 
</syntaxhighlight>
−
 
+
|}
−
 
 
−
각종 사용법에 대해선 다음 링크 참조 https://getbootstrap.com/docs/4.4/getting-started/introduction/
 
−
 
 
−
부트스트랩을 잘 쓰려면... 공부가 조금 필요하다.
 
 
[[분류: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>
원본 주소 "http://id8436.iptime.org:2786/mediawiki/index.php?title=장고_부트스트랩&oldid=1242"