Django中的Bootstrap样式

AJ

大多数情况是在引导程序中看到CSS / HTML,我们遇到了以下模板。

    <div class="row">
      <div class="col-sm-6">
        # Add image/ or data you want
      </div>
      <div class="col-sm-6">
        # Add image/ or data you want
      </div>
    </div>

    # Second row

    <div class="row">
      <div class="col-sm-6">
        # Add image/ or data you want
      </div>
      <div class="col-sm-6">
        # Add image/ or data you want
      </div>
    </div>

我们如何在Django模板中实现此行为?我的意思是,当我们遍历值列表时,如何跟踪我们需要启动一个新值.row

脏溶液

检查循环迭代计数并进行整数操作以检查是否.row应启动元素。

有什么想法吗?

解复用器

创建一个模板过滤器,用于将列表拆分为多个块:

from django import template

register = template.Library()

@register.filter
def chunks(l, n):
    n = max(1, int(n))
    return (l[i:i+n] for i in xrange(0, len(l), n))

用法:

{% for chunk in images|chunks:2 %}
    <div class="row">
        {% for image in chunk %}
            <div class="col-sm-6">
                # Add image/ or data you want
            </div>
        {% endfor %}
    </div>
{% endfor %}

您还可以在将列表发送到模板之前将其拆分为多个块。

有关如何将列表拆分成块的更多信息,请参见:如何将列表拆分成均匀大小的块?

填充列表的自定义过滤器:

@register.filter
def ljust_list(l, n):
    """
    ljust_list([1, 2], 4) -> [1, 2, None, None]
    """
    return l + [None] * (n - len(l))

@register.filter
def rjust_list(l, n):
    """
    rjust_list([1, 2], 4) -> [None, None, 1, 2]
    """
    return [None] * (n - len(l)) + l

用法:

{% for chunk in images|chunks:2 %}
    <div class="row">
        {% for image in chunk|ljust_list:2 %}
            <div class="col-sm-6">
                # Add image/ or data you want
            </div>
        {% endfor %}
    </div>
{% endfor %}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用Django和Bootstrap样式化表单

来自分类Dev

CSS / Bootstrap 3:从链接中删除样式

来自分类Dev

Bootstrap中样式折叠的导航栏

来自分类Dev

JavaFx应用程序中的Bootstrap样式?

来自分类Dev

Bootstrap CSS中没有样式

来自分类Dev

在Bootstrap导航列表中还原列表样式

来自分类Dev

Bootstrap 如何更改表格中链接的样式?

来自分类Dev

如何覆盖 Bootstrap3 中的样式?

来自分类Dev

使用Bootstrap向django.forms控件添加样式

来自分类Dev

在Django中从视图更改CSS样式

来自分类Dev

无法在Django中应用内联样式

来自分类Dev

Bootstrap输入字段中的样式jQuery自动完成

来自分类Dev

Twitter Bootstrap中的所有按钮都悬停样式

来自分类Dev

在HTML / CSS / Bootstrap 4.0中设置计算器样式

来自分类Dev

Ruby on Rails中的Bootstrap 3按钮的自定义样式

来自分类Dev

在Liferay Portal 6.2中调用twitter bootstrap样式的CSS

来自分类Dev

Bootstrap链接样式指向div中的所有文本

来自分类Dev

Twitter Bootstrap中的所有按钮都悬停样式

来自分类Dev

在Bootstrap UI中设置Typeahead下拉菜单的样式

来自分类Dev

重新设置Bootstrap 3中的复选框的样式

来自分类Dev

如何使用Bootstrap的帮助类在表中设置链接样式?

来自分类Dev

如何在 Bootstrap 中覆盖主按钮的样式

来自分类Dev

Django中的Bootstrap Carousel实现

来自分类Dev

Bootstrap CSS样式问题

来自分类Dev

Bootstrap CSS样式问题

来自分类Dev

如何样式Bootstrap?

来自分类Dev

如何删除Bootstrap样式?

来自分类Dev

Bootstrap 菜单样式

来自分类Dev

加载 Reactjs Bootstrap 样式