바뀜

145 바이트 제거됨 ,  2022년 6월 9일 (목) 16:22
편집 요약 없음
22번째 줄: 22번째 줄:     
<!-- 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' %}">
 
<!-- Bootstrap JS -->
 
<!-- Bootstrap JS -->
<script src="{% static 'bootstrap/bootstrap.min.js' %}"></script>
+
<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>
46번째 줄: 46번째 줄:     
= 확인 =
 
= 확인 =
확인을 위해 네비게이션 바를 적용해보자. [[장고 네비게이션 바 만들기]] 문서를 참고하자.
+
부트스트랩 문서에서 제공하는 아무 기능이나 구현해보자. 다음의 코드를 탬플릿에 넣고 접속해보면 파란색 버튼이 있는 카드가 하나 나온다. 그렇다면 성공!<syntaxhighlight lang="html+django">
귀찮다면.. 부트스트랩 문서에서 제공하는 아무 기능이나 구현해보자. 다음의 코드를 탬플릿에 넣고 접속해보면 다채로운 색의 표가 나타난다.<syntaxhighlight lang="html+django">
+
<div class="card" style="width: 18rem;">
<!-- On tables -->
+
  <img src="..." class="card-img-top" alt="...">
<table class="table-primary">...</table>
+
  <div class="card-body">
<table class="table-secondary">...</table>
+
    <h5 class="card-title">Card title</h5>
<table class="table-success">...</table>
+
    <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>
<table class="table-danger">...</table>
+
    <a href="#" class="btn btn-primary">Go somewhere</a>
<table class="table-warning">...</table>
+
  </div>
<table class="table-info">...</table>
+
</div>
<table class="table-light">...</table>
+
</syntaxhighlight>각종 사용법에 대해선 다음 링크 참조 https://getbootstrap.com/docs/4.4/getting-started/introduction/<nowiki/>(버전별로 약간씩 사용법이 달라지니 유의)
<table class="table-dark">...</table>
     −
<!-- On rows -->
+
부트스트랩을 잘 쓰려면... 공부가 조금 필요하다.
<tr class="table-primary">...</tr>
  −
<tr class="table-secondary">...</tr>
  −
<tr class="table-success">...</tr>
  −
<tr class="table-danger">...</tr>
  −
<tr class="table-warning">...</tr>
  −
<tr class="table-info">...</tr>
  −
<tr class="table-light">...</tr>
  −
<tr class="table-dark">...</tr>
     −
<!-- On cells (`td` or `th`) -->
+
= 사용 특이점 =
<tr>
  −
  <td class="table-primary">...</td>
  −
  <td class="table-secondary">...</td>
  −
  <td class="table-success">...</td>
  −
  <td class="table-danger">...</td>
  −
  <td class="table-warning">...</td>
  −
  <td class="table-info">...</td>
  −
  <td class="table-light">...</td>
  −
  <td class="table-dark">...</td>
  −
</tr>
  −
</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. 장고 스테틱]]