Django之Form应用Bootstrap样式

应用Bootstrap样式示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
  <title>login</title>
</head>
<body>
<div class="container">
  <div class="row">
    <form action="/login2/" method="post" novalidate class="form-horizontal">
      {% csrf_token %}
      <div class="form-group">
        <label for="{{ form_obj.username.id_for_label }}"
               class="col-md-2 control-label">{{ form_obj.username.label }}</label>
        <div class="col-md-10">
          {{ form_obj.username }}
          <span class="help-block">{{ form_obj.username.errors.0 }}</span>
        </div>
      </div>
      <div class="form-group">
        <label for="{{ form_obj.pwd.id_for_label }}" class="col-md-2 control-label">{{ form_obj.pwd.label }}</label>
        <div class="col-md-10">
          {{ form_obj.pwd }}
          <span class="help-block">{{ form_obj.pwd.errors.0 }}</span>
        </div>
      </div>
      <div class="form-group">
      <label class="col-md-2 control-label">{{ form_obj.gender.label }}</label>
        <div class="col-md-10">
          <div class="radio">
            {% for radio in form_obj.gender %}
              <label for="{{ radio.id_for_label }}">
                {{ radio.tag }}{{ radio.choice_label }}
              </label>
            {% endfor %}
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
          <button type="submit" class="btn btn-default">注册</button>
        </div>
      </div>
    </form>
  </div>
</div>

<script src="/static/jquery-3.2.1.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

批量添加样式可通过重写form类的init方法来实现

class LoginForm(forms.Form):
    username = forms.CharField(
        min_length=8,
        label="用户名",
        initial="张三",
        error_messages={
            "required": "不能为空",
            "invalid": "格式错误",
            "min_length": "用户名最短8位"
        }
    ...

    def __init__(self, *args, **kwargs):
        super(LoginForm, self).__init__(*args, **kwargs)
        for field in iter(self.fields):
            self.fields[field].widget.attrs.update({
                'class': 'form-control'
            })

views.py如book表的添加和数据展示

from django.shortcuts import render,HttpResponse,redirect
from app01 import models
from django import forms
# Create your views here.

class BookForm(forms.Form):
    title = forms.CharField(
        max_length=16,
        label='书名:',
        initial='zhang',
        # widget = forms.widgets.PasswordInput(attrs={'class': 'form-control'},render_value=True),
        widget = forms.widgets.TextInput(attrs={'class': 'form-control'},),

    )
    # title2 = forms.CharField(
    #     max_length=16,
    #     label='书名:',
    #     initial='zhang',
    #     # widget = forms.widgets.PasswordInput(attrs={'class': 'form-control'},render_value=True),
    #     widget=forms.widgets.TextInput(attrs={'class': 'form-control'}, ),
    #
    # )
    sex = forms.ChoiceField(
        choices=(
            ('1','男'),
            ('2','女'),
        )
        ,
        label='性别:',
        # widget=forms.widgets.RadioSelect(),
        # widget=forms.widgets.RadioSelect(),
        # widget=forms.widgets.SelectMultiple(attrs={'class':'form-control'}),
        widget=forms.widgets.Select(attrs={'class':'form-control'}),
        # widget=forms.widgets.CheckboxInput(),
        # widget=forms.widgets.CheckboxSelectMultiple(),
    )
    publishDate = forms.DateField(
        label='出版日期:',
        widget=forms.widgets.TextInput(attrs={'type':'date','class':'form-control'}),
    )
    price=forms.DecimalField(
        max_digits=5,
        decimal_places=2,
        label='书籍的价格:',
        widget=forms.widgets.NumberInput(attrs={'class': 'form-control'}
    ))

    # publish = forms.ModelChoiceField(
    #     label='出版社:',
    #     queryset=models.Publish.objects.all(),
    #     widget=forms.widgets.Select(attrs={'class': 'form-control'}
    # ))
    publish_id = forms.ChoiceField(
        label='出版社:',
        widget=forms.widgets.Select(attrs={'class': 'form-control'}
    ))
    authors = forms.ModelMultipleChoiceField(

        queryset=models.Author.objects.all(),
        widget = forms.widgets.SelectMultiple(attrs={'class': 'form-control'}
    ))

    def __init__(self,*args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['publish_id'].choices = models.Publish.objects.values_list('pk','name')


def index(request):
    if request.method == 'GET':
        form_obj = BookForm()

        return render(request,'index.html',{'form_obj':form_obj})

    else:
        print(request.POST)
        form_obj = BookForm(request.POST)
        print(form_obj.is_valid())
        print(form_obj.errors)
        if form_obj.is_valid():
            print(form_obj.cleaned_data)
            authors_obj = form_obj.cleaned_data.pop('authors')
            new_book_obj = models.Book.objects.create(**form_obj.cleaned_data)
            new_book_obj.authors.add(*authors_obj)
            return redirect('show')

        else:
            print(form_obj.errors)
            return render(request,'index.html',{'form_obj':form_obj})


def show(request):

    book_objs = models.Book.objects.all()

    return render(request,'show.html',{'book_objs':book_objs})

def edit_book(request,n):


    return HttpResponse('欢迎来到编辑页面')


def delete_book(request,n):
    return HttpResponse('欢迎来到删除页面')

内容如下

urls.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index/', views.index,name='index'),
    url(r'^show/', views.show,name='show'),
    url(r'^edit_book/(\d+)/', views.edit_book,name='edit_book'),
    url(r'^delete_book/(\d+)/', views.delete_book,name='delete_book'),
]

index.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.0-dist/dist/css/bootstrap.min.css' %}">
</head>
<body>

<h1>展示页面</h1>
{#<div>#}
{#    {{ form_obj.as_p }}#}
{##}
{#</div>#}

{#{% for field in form_obj %}#}
{#    <div>#}
{#        {{ field }}#}
{#    </div>#}
{##}
{#{% endfor %}#}

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form action="" novalidate method="post">
                {% for field in form_obj %}
                    <div class="form-group {% if field.errors.0 %}has-error{% endif %}">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        {{ field }}
                        <span class="text-danger">{{ field.errors.0 }}</span>
                    </div>
                {% endfor %}


                {#                <div class="form-group">#}
                {#                    <label for="{{ form_obj.sex.id_for_label }}">{{ form_obj.sex.label }}</label>#}
                {#                    {{ form_obj.sex }}#}
                {#                    {{ form_obj.sex.errors.0 }}#}
                {#                </div>#}
                {#            <div class="form-group">#}
                {#                    <label for="{{ form_obj.publishDate.id_for_label }}">{{ form_obj.publishDate.label }}</label>#}
                {#                    {{ form_obj.publishDate }}#}
                {#                    {{ form_obj.publishDate.errors.0 }}#}
                {#                </div>#}
                {#                <div class="form-group">#}
                {#                    <label for="{{ form_obj.price.id_for_label }}">{{ form_obj.price.label }}</label>#}
                {#                    {{ form_obj.price }}#}
                {#                    <span class="text-danger">{{ form_obj.price.errors.0 }}</span>#}
                {#                </div>#}
                {#            <div class="form-group">#}
                {#                    <label for="{{ form_obj.publish.id_for_label }}">{{ form_obj.publish.label }}</label>#}
                {#                    {{ form_obj.publish }}#}
                {#                    <span class="text-danger">{{ form_obj.publish.errors.0 }}</span>#}
                {#                </div>#}
                {#            <div class="form-group">#}
                {#                    <label for="{{ form_obj.authors.id_for_label }}">{{ form_obj.authors.label }}</label>#}
                {#                    {{ form_obj.authors }}#}
                {#                    <span class="text-danger">{{ form_obj.authors.errors.0 }}</span>#}
                {#                </div>#}
                <input type="submit">
            </form>
        </div>
    </div>
</div>


<div>


</div>


</body>
<script src="{% static 'bootstrap-3.3.0-dist/dist/jQuery/jquery-3.1.1.js' %}"></script>
<script src="{% static 'bootstrap-3.3.0-dist/dist/js/bootstrap.min.js' %}"></script>
</html>

show.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.0-dist/dist/css/bootstrap.min.css' %}">
</head>
<body>

<h1>数据展示</h1>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <table class="table">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>title</th>
                        <th>性别</th>
                        <th>出版日期</th>
                        <th>出版社</th>
                        <th>作者</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for book_obj in book_objs %}
                         <tr>
                            <td>{{ book_obj.pk }}</td>
                            <td>{{ book_obj.title }}</td>
                            <td>{{ book_obj.get_sex_display }}</td>
                            <td>{{ book_obj.publishDate|date:'Y-d-m' }}</td>
                            <td>{{ book_obj.publish.name }}</td>
                            <td>
                                {% for author in book_obj.authors.all %}
                                    {{ author.name }}
                                {% endfor %}

                            </td>
                            <td>
                                <a class="btn btn-warning" href="{% url 'edit_book' book_obj.pk  %}">编辑</a>
                                <a class="btn btn-danger" href="{% url 'delete_book' book_obj.pk  %}">删除</a>
                            </td>
                         </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

</div>

</body>
<script src="{% static 'bootstrap-3.3.0-dist/dist/jQuery/jquery-3.1.1.js' %}"></script>
<script src="{% static 'bootstrap-3.3.0-dist/dist/js/bootstrap.min.js' %}"></script>
</html>

settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR,'statics'),
]

models.py

from django.db import models

# Create your models here.


from django.db import models

# Create your models here.


class Author(models.Model):
    nid = models.AutoField(primary_key=True)
    name=models.CharField( max_length=32)
    age=models.IntegerField()
    authorDetail=models.OneToOneField(to="AuthorDetail",to_field="nid")
    def __str__(self):
        return self.name
class AuthorDetail(models.Model):

    nid = models.AutoField(primary_key=True)
    birthday=models.DateField()
    telephone=models.BigIntegerField()
    addr=models.CharField( max_length=64)

class Publish(models.Model):
    nid = models.AutoField(primary_key=True)
    name=models.CharField( max_length=32)
    city=models.CharField( max_length=32)
    email=models.EmailField()
    def __str__(self):
        return self.name

class Book(models.Model):

    nid = models.AutoField(primary_key=True)
    title = models.CharField( max_length=32)
    sex_choice = (
        (1,'男'),
        (2,'女'),
    )
    sex = models.IntegerField(choices=sex_choice,default=1)
    publishDate=models.DateField()
    price=models.DecimalField(max_digits=5,decimal_places=2)
    publish=models.ForeignKey(to="Publish",to_field="nid")
    authors=models.ManyToManyField(to='Author',)
    def __str__(self):
        return self.title

在项目下创建一个名为statics的文件夹,将Bookstrap文件和jQuery.js文件放在该文件夹里面

原文地址:https://www.cnblogs.com/ghh520/p/11979803.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自己重新定义class类即可,主要样式要随具体情况而定包括位置任何带有class.btn的元素都会继承圆角灰色按钮的默认外观。但是Bootstrap提供了一些选项来定义按钮的样式。<buttontype="button"class="btn">基本
起步导入:<linkrel="stylesheet"href="bootstrap-3.3.7-dist/css/bootstrap.css"><scriptsrc="js/jquery-3.3.1.js"></script><scriptsrc="bootstrap-3.3.7-dist/js/bootstrap.js"></script>屏幕
(1)modal声明一个模态框(2)modal-dialog定义模态框尺寸(3)modal-lg定义大尺寸模态框(4)modal-sm定义小尺寸模态框(5)modal-header(6)modal-body(7)modal-footer<!doctypehtml><html><head><metacharset="utf-8"><title>模态框<itle><linkrel=&quo
图片在Bootstrap版本3中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width:100%;、 height:auto; 和 display:block; 属性,从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive 类的图片水平居
<inputtype="text"class="form-controldatepicker"style="padding:0.375rem0.75rem;"placeholder="开始时间"readonly="true" id="start_time"name="start_time"> $(".datepicke
目录bootstrap-treeview使用小记零、写在前面的话一、功能说明二、特性简述三、实战3.1依赖环境3.2数据源格式3.3Options选项3.4Methods方法3.5Events事件N-2、番外N-1、本文demoN、参考资料bootstrap-treeview使用小记零、写在前面的话p.s.bootst
  一、应用http://www.bootcss.com/进入bootstrap4或bootstrap3中文网,想要快速地将Bootstrap应用到你的项目中,有以下两种办法: 1、bootstrap可以在线引用,方法如下:A、CSS将引入Bootstrap样式表的 <link> 标签复制并粘贴到 <head> 中,并放在所有其他样式表之前。<!
第87节:Java中的Bootstrap基础与SQL入门前言复习什么是JQ?:writelessdomore写更少的代码,做更多的事找出所有兄弟:$("div").siblings()基本过滤器:选择器:过滤器$("div:first"):first:找到第一个元素:last:找到最后一个元素:even:找出偶数索引:odd:找出奇叔索引
1.bootstrap表单(1)form声明一个表单域(2)form-inline内联表单域(3)form-horizontal水平排列表单域(4)form-group表单组、包括表单文字和表单控件(5)form-control文本输入框、下拉列表控件样式(6)checkboxcheck-inline多选框样式(7)radioradio-inline单选框样式(8)input-group表单控件组
<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>首页<itle><
嗯。。。以前做ssh。应该是stratusspringhibernate。 然后现在来了一个新的需求。 要用java,bootstrap,oracle,springboot,jquery,mybatis。 开始,我也挺心虚的,但是后来一看,,,其实本没有必要这么虚。。。毕竟。。。这些东西,写的有问题。。。问题在于没有逻辑。 bootstrap,j
表格基本实例为任意 <table> 标签添加 .table 类可以为其赋予基本的样式—少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来。
1、问题背景   一般情况下,查询列表有查询条件、查询按钮和重置按钮,输入查询条件,点击查询按钮查询列表等数据;点击重置按钮会将查询条件恢复到原始状态 2、实现源码 <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>Bootstrap-查询按钮和重置按钮<
Bootstrap简介什么是Bootstrap?Bootstrap官网框架:库liblibraryjQuery作为一个框架来讲,提供一套比较便捷的操作DOM的方式把大家都需要的功能预先写好到一些文件这就是一个框架Bootstrap让我们的Web开发更简单,更快捷;注意是Bootstrap不是BootStrap!这是一个词,不是
1.bootstrap图片img-responsive声明响应式图片2.bootstrap字体图标通过字体代替图标,font文件夹需要和css文件夹在同一目录3.bootst导航条(1)navbar声明导航条(2)navbar-default声明默认的导航条样式(3)navbar-inverse声明反白的导航条样式(4)navbar-static-top去掉导航条的圆角(5)n
1.路径导航<!doctypehtml><html><head><metacharset="utf-8"><title>路径导航<itle><linkrel="stylesheet"type="text/css"href="css/bootstrap.min.css"><scripttype="text/ja
问题描述:最近在学习BootStrap,过程中遇到引用glyphicon图标无法显示的问题,经过在百度后该问题已解决。1、首先看一下图标显示失败的页面:2、经过参考大佬们的经验,我找到了解决办法。首先我的BootStrap的css样式表是经过下载之后直接拷贝了其中一个文件到编译器中使用的,没有把所有
BootStrap布局一、BootStrap布局CSS组件主要包括栅格系统、列表组、进度条、icon图标、导航栏等组件。JavaScript插件主要有动画效果、窗体模式、下拉菜单、选项卡等二、网格系统Bootstrap内置了一套响应式、移动优先的流式栅格系统,随着屏幕设备或可视窗口(viewport)尺寸的
1引入所需要的文件2用法
想让bootstrap的table列内容超出部分省略号,要在table上加table-layout:fixed和word-break:break-all,然后在头部thead的th加上宽度百分比,最后在列里加个标签如span,在这个span加上单行超出部分省略号的css:display:inline-block,overflow:hidden,white-space:nowrap,text-overflow:e