편집
1,408
번
바뀜
둘러보기로 가기
검색하러 가기
22번째 줄:
22번째 줄: − + − + 46번째 줄:
46번째 줄: − 확인을 위해 네비게이션 바를 적용해보자. [[장고 네비게이션 바 만들기]] 문서를 참고하자.+ − 귀찮다면.. 부트스트랩 문서에서 제공하는 아무 기능이나 구현해보자. 다음의 코드를 탬플릿에 넣고 접속해보면 다채로운 색의 표가 나타난다.<syntaxhighlight lang="html+django">+ − + − <table class="table-primary">...</table>+ − <table class="table-secondary">...</table>+ − + − <table class="table-danger">...</table>+ − <table class="table-warning">...</table>+ − <table class="table-info">...</table>+ − <table class="table-light">...</table> − <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> − − − − − <!-- 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> −
→탬플릿에 적용하기
<!-- 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>
= 확인 =
= 확인 =
부트스트랩 문서에서 제공하는 아무 기능이나 구현해보자. 다음의 코드를 탬플릿에 넣고 접속해보면 파란색 버튼이 있는 카드가 하나 나온다. 그렇다면 성공!<syntaxhighlight lang="html+django">
<div class="card" style="width: 18rem;">
<!-- On tables -->
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>
</tr>
</syntaxhighlight>각종 사용법에 대해선 다음 링크 참조 https://getbootstrap.com/docs/4.4/getting-started/introduction/<nowiki/>(버전별로 약간씩 사용법이 달라지니 유의)
</syntaxhighlight>각종 사용법에 대해선 다음 링크 참조 https://getbootstrap.com/docs/4.4/getting-started/introduction/<nowiki/>(버전별로 약간씩 사용법이 달라지니 유의)
부트스트랩을 잘 쓰려면... 공부가 조금 필요하다.
부트스트랩을 잘 쓰려면... 공부가 조금 필요하다.
[[분류:4. 장고 스테틱]]
[[분류:4. 장고 스테틱]]