Django Bootstrap4 ์ฐ๋
2021. 5. 23. 14:17ใBackend/๐ Python
1. ์ฐ์ Bootstrap ๊ณต์ํํ์ด์ง์์ CSS CDN์ copy ํฉ๋๋ค.
https://getbootstrap.com/docs/5.0/getting-started/introduction/
Introduction
Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.
getbootstrap.com
copy ํ css cdn ์ ์ฅ๊ณ ํ ํ๋ฆฟ ๋ด๋ถ์ ๋ถ์ฌ๋ฃ๊ธฐ ํด์ค๋๋ค.
<head>
<meta charset="UTF-8">
<title>Title</title>
{# bootstrap #}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
2. bootstrap4 library๋ฅผ ๋ค์ด๋ก๋ ๋ฐ๊ฒ ์ต๋๋ค.
terminal์ pip install django-bootstrap4 ๋ฅผ ์ ๋ ฅํฉ๋๋ค.
๋ค์์ผ๋ก settings.py ํ์ผ์ Installed_apps์ ์๋์ฒ๋ผ ๋ฑ๋กํด์ค๋๋ค.
Settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'bootstrap4', # ์ถ๊ฐ
]
3. load bootstrap 4 => {% load bootstrap4 %}
{% load bootstrap4 %} # bootstarp4 ๋ก๋
<div style="text-align: center; max-width: 500px; margin: 4rem auto">
<div>
<h4>LOGIN</h4>
</div>
<div>
<form method="post">
{% csrf_token %}
{% bootstrap_form form %}
<input type="submit" class="btn btn-dark rounded-pill col-6 mt-3">
</form>
</div>
</div>
์ ์ฝ๋์ input ํ๊ทธ์ ํด๋์ค๋ bootstrap์ ํด๋์ค๋ฅผ ์์๋ฐ์ ์ ์๊ฒ ๋ฉ๋๋ค.
๊น๋ํ UI๋ฅผ ์ฌ์ฉํ ์ ์๊ฒ ๋ฉ๋๋ค.
'Backend > ๐ Python' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| Django CBV (2) - ๋ก๊ทธ์ธ, ๋ก๊ทธ์์ ๊ตฌํ (0) | 2021.05.23 |
|---|---|
| Django CBV (1) - ํ์๊ฐ์ (0) | 2021.05.23 |
| ํ์ด์ฌ ๋ฉ์๋ ์ค๋ฒ๋ผ์ด๋ฉ, ์ค๋ฒ๋ก๋ฉ (2) | 2021.05.18 |
| ํ์ด์ฌ lambda, filter, reduce (0) | 2021.05.18 |
| ํ์ด์ฌ ๊น์ ๋ณต์ฌ, ์์ ๋ณต์ฌ (shallow copy, deep copy) (0) | 2021.05.18 |