Django with Twitter Bootstrap3 and Themes



我已经研究了很长时间,并进行了实验,但我似乎找不到实现这一目标的最佳方法。我知道我做错了,所以一些澄清以及一些快速的例子会有很大帮助。

我想知道使用bootstrap3主题从https://wrapbootstrap.com/与Django。我研究了django-bootstrap3和django- bootstrapthemes包。在django-bootstrap-themes的github页面上,它说它与bootswatch兼容。我不喜欢他们的主题,所以我想知道它是否与wrapbootstrap.com主题兼容。我从wrapbootstrap.com中选择的主题是响应式HTML主题。我想知道,如果出于个人经验,是否有人知道这些包中哪个最适合与django一起使用wrapbootstrap.com的主题。

我理解这是可能的,只是从主题的样式表,脚本,把它们放在各自的文件夹中,静态,并把HTML基础变成一个基础模板,以及其他页面。然后从CDN安装bootstrap。我知道这在django-bootstrap3中也是可能的。但是我在任何地方都找不到将这些主题和twitterbootstrap3集成到Django网站中的最佳方法,并提供了一些快速的示例。

软件包django-bootstrap3是一个很好的实用程序应用程序,它允许您在模板中生成更少的HTML标记,否则将需要引导工作。它使用了一些额外的模板标签来达到这个目的。

我发现这个包很好,有时我会使用它,但通常是在你很好地参与到bootstrap之后,你才会欣赏它。

django-bootstrap-themes似乎是一个应用程序,它也提供了一些模板标签像前一个包,但显然更少。但它也允许你轻松地将Bootswatch中的主题集成到你的Django模板中,如果你觉得这些模板很吸引人,这是很好的。除此之外,我个人找不到其他使用它的理由。但是,如果适合的话,这两个包可以一起使用。

一些例子:

为了在没有任何其他包的情况下在模板中启动bootstrap,您必须在基本html文件中包含以下内容:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
{# HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries #}
{# WARNING: Respond.js doesn't work if you view the page via file:// #}
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

在底部:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

使用django-bootstrap3这变成:

{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}

但是其他一些标记得到了非常简化。例如,一个引导表单(参见官方文档示例)将变得很容易:

<form action="/url/to/submit/" method="post" class="form">
  {% csrf_token %}
  {% bootstrap_form form %}
  {% buttons %}
    <button type="submit" class="btn btn-primary">
      {% bootstrap_icon "star" %} Submit
    </button>
  {% endbuttons %}
</form>
django-bootstrap-themes:
{% load bootstrap_themes %}
{% bootstrap_script use_min=True %}

显然这就是你如何使用bootswatch中的一个主题:

{% bootstrap_styles theme='cosmo' type='min.css' %}

总而言之,如果您希望在模板中使用任何其他现成的引导主题,您仍然需要使用您在问题中描述的标准方法,可能使用上面的一些工具。

最新更新