'css' 태그의 글 목록

css

[Django CSS] Bootstrap Templates 2018.09.07
[Django CSS] Bootstrap Dropdowns 2018.09.06
[Django CSS] 장고 CSS로 테이블 꾸미기 2018.08.31

[Django CSS] Bootstrap Templates

2018. 9. 7. 15:12

장고 bootstrap templates 활용해서 아이템 이쁘게 정돈하기

1. modulus (%) 연산 함수를 정의

vi templatetags/utils.py

# -*- coding: utf-8 -*-

from django.template.defaulttags import register

@register.filter

def mod( value, arg ):

return value % arg

* templatetags 디렉토리 안에 __init__.py 파일 생성

2. 기본 html 수정

{% extends "brand/basic_frame.html" %}

{% block content %}

{% load utils %}

{% if contacts.has_previous %}

{% endif %}

<li><a href="#"> Page {{ contacts.number }} of {{ contacts.paginator.num_pages }}. </a></li>

{% if contacts.has_next %}

{% endif %}

</ul>

</span>

</div>

{% for d in contacts %}

{% ifequal forloop.counter|mod:3 0 %}

{% endifequal %}

<div class="panel-heading"> {{forloop.counter}} {{d.pname}}</div>

<div class="panel-footer">{{d.brand}}</div>

</div>

{% ifequal forloop.counter|mod:3 0 %}

</div>

{% endifequal %}

{% endfor %}

</div><br>

{% endblock %}

3. 기본 html에서 동작 확인

vi templatetags/utils.py

- Reference

https://www.w3schools.com/bootstrap/bootstrap_templates.asp

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

[Django DataBase] json 파일 데이터 베이스(DB) 생성하기 (0)	2018.09.07
[Django CSS] Bootstrap Pagination (0)	2018.09.06
[Django CSS] Bootstrap Dropdowns (0)	2018.09.06
[Django CSS] 장고 CSS로 테이블 꾸미기 (0)	2018.08.31
[Django Paginator] 장고 paginator로 페이지 생성 (0)	2018.07.12

[Django CSS] Bootstrap Dropdowns

2018. 9. 6. 16:50

1. 기본 프레임 html에 드롭다운 생성

cd demo ($app_name)

vi templates/demo/basic_frame.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="#">Brand Demo</a>

</div>

</nav>

<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Category

</ul>

</div>

{% block content %}{% endblock %}

</div>

</body>

</html>

2. 기본 html 작성

vi templates/demo/basic.html

{% extends "brand/basic_frame.html" %}

{% block content %}

{% for d in data%}

</div>

<h4> {{d.pname}} </h4>

<p> {{d.brand}} </p>

</div>

{% endfor %}

</div>

{% endblock %}

3. 드롭다운에서 얻는 카테고리 id (href="/basic/000004") url 주소로 파싱

vi urls.py

from django.conf.urls import url

from . import views

urlpatterns = [

url(r'^basic/$',views.basic.as_view(), name='basic'),

url(r'^basic/(?P<catid>[-\w]+)/$',views.basic.as_view(), name='basic'),

]

4. url 주소에서 얻은 카테고리 id의 데이터 반영

vi views.py

# -*- coding: utf-8 -*-

from __future__ import unicode_literals

from django.shortcuts import render

from django.views import View

from .models import *

# Create your views here.

class basic(View):

def get(self, request, *args, **kwargs):

#data = Product.objects.all()

catid = '000006'

if 'catid' in kwargs:

catid = kwargs['catid']

data = Product.objects.filter(cat1id=catid)

return render(request, 'brand/basic.html', context={'catid':catid,'data':data})

5. 드롭다운 동작 확인

https://~:8080/basic

- Reference

https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp

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

[Django CSS] Bootstrap Templates (0)	2018.09.07
[Django CSS] Bootstrap Pagination (0)	2018.09.06
[Django CSS] 장고 CSS로 테이블 꾸미기 (0)	2018.08.31
[Django Paginator] 장고 paginator로 페이지 생성 (0)	2018.07.12
[Django Templatetags] 장고 템플릿태그 함수 생성 및 활용 (0)	2018.07.12

[Django CSS] 장고 CSS로 테이블 꾸미기

2018. 8. 31. 11:37

1. html 에서 css 정의하여 사용하기

vi templates/demo/base.html

<!doctype html>

<head>

<title>MyDjangoApp</title>

</head>

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="#">Django Pagination</a>

</div>

</nav>

{% block content %}{% endblock %}

</div>

</body>

</html>

vi templates/demo/home.html

{% extends "demo/base.html" %}

{% block content %}

{% csrf_token %}

</form>

</select>

<label>Search Keyword: </label>

</div>

</article>

<thead>

<tr>

<th>Image</th>

<th>Brand</th>

</tr>

</thead>

{% for d in data %}

<tr>

<td> {{d.pname}} </td>

<td> {{d.brand}} </td>

</tr>

{% endfor %}

</tbody>

</table>

</div>

{% endblock %}

2. 기본 홈페이지에서 확인

http://~:8080/home

- Reference -

Python – Django AJAX Pagination with Search and Sort [Tutorial]

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

[Django CSS] Bootstrap Pagination (0)	2018.09.06
[Django CSS] Bootstrap Dropdowns (0)	2018.09.06
[Django Paginator] 장고 paginator로 페이지 생성 (0)	2018.07.12
[Django Templatetags] 장고 템플릿태그 함수 생성 및 활용 (0)	2018.07.12
[Django Web Frame] 장고 프로젝트 웹 프레임 활용 (0)	2018.07.11

PREV 1 NEXT

poorman

css

[Django CSS] Bootstrap Templates

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

[Django CSS] Bootstrap Dropdowns

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

[Django CSS] 장고 CSS로 테이블 꾸미기

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

+ Recent posts

티스토리툴바