티스토리 뷰

Web/Django

[Django] bootstrap

HAN_PY 2020. 7. 6. 16:33
반응형

https://getbootstrap.com/docs/4.5/getting-started/introduction/

 

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.

getbootstrap.com

 

위의 페이지 들어가서 CDN이나 설치나 하면된다.

 

CDN으로 간단히 하려면 base.html에 아래와 같이 해주면된다.

 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Hi! hanpy</title>
  </head>
  <body>
    <div class = "container">
        {% block body %}
        {% endblock %}
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

이런 식으로 완성되어 있는 템플릿을 그대로 쓰면 된다. 이때 아래와 같이

    <div class = "container">

        {% block body %}

        {% endblock %}

    </div>

이런 식으로 container로 body부분을 감싸주기만 해도 bootstrap이 적용된다.

 

 

Form

 

{% extends 'base.html'

{% boad bootstrap4

 

 

<form action="{% url 'articles:delete' %}" method="POST">

  {% csrf_token %}

  {% bootstrap_form form %}

  <button class=btn btn-primary>제출</button>

</form>

 

 

위에서 써도 되지만 우리는 서드파트라이브러리를 써본다.

구글에 django bootstrap4를 검색해 보자. 

장고에 적용 잘되는 라이프러리(패키지)를 쓰는거다.

https://django-bootstrap4.readthedocs.io/en/latest/

 

Welcome to django-bootstrap4’s documentation! — django-bootstrap4 2.0.2 documentation

© Copyright 2020, Dylan Verheul Revision 8c7d5e3c.

django-bootstrap4.readthedocs.io

설치) pip install django-bootstrap4

터미널에 치고 installedapp에 등록하자. => 'bootstrap4',

 

Quickstart 보니 

base.html에 추가하자

<!DOC~ 바로 밑에

{% load bootstrap4 %} 

 

</head> 바로위에

{% bootstrap_css %}

 

</body> 바로위에

{% bootstrap_javascript jquery='full' %}

을 추가한다.

아래와 같이 코드 적으면 된다.

 

<!DOCTYPE html>

{% load bootstrap4 %}

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Django Live Session</title>

    {% bootstrap_css %}

</head>

<body>

    <div class="container">

        {% block body %}

        {% endblock %}

    </div>

    {% bootstrap_javascript jquery='full' %}

</body>

</html>

 

 

 

각각의 html에 각 파일 마다 import 하는것 처럼 {% load bootstrap4 %}도 모든 html에 넣는다

{% extends 'base.html' %}

{% load bootstrap4 %} 

{% block body %}

위와 같은 위치에 넣어 주면 된다.

 

반응형

'Web > Django' 카테고리의 다른 글

[Django] HTTP+ GET과 POST  (0) 2020.07.08
[Django] 프로필 이미지 구현_gravatar (python코드의 확장)  (0) 2020.07.08
[Django] 정적파일(STATIC_JavaScript, CSS, IMAGE) 넣기+ImageField(pillow, imagekit)  (0) 2020.07.02
[django] CRUD 한번에 구현하기  (0) 2020.06.30
[Django] Model 기초  (0) 2020.06.28
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함