<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1 Bootstrap — Flask-Maple 0.8 documentation</title>
<link rel="stylesheet" href="_static/alabaster.css" type="text/css" />
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
<script type="text/javascript">
var DOCUMENTATION_OPTIONS = {
URL_ROOT: './',
VERSION: '0.8',
COLLAPSE_INDEX: false,
FILE_SUFFIX: '.html',
HAS_SOURCE: true
};
</script>
<script type="text/javascript" src="_static/jquery.js"></script>
<script type="text/javascript" src="_static/underscore.js"></script>
<script type="text/javascript" src="_static/doctools.js"></script>
<link rel="top" title="Flask-Maple 0.8 documentation" href="index.html" />
<link rel="prev" title="1 Introduction To Flask-Maple" href="introduction.html" />
<link rel="stylesheet" href="_static/custom.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=0.9, maximum-scale=0.9" />
</head>
<body role="document">
<div class="document">
<div class="documentwrapper">
<div class="bodywrapper">
<div class="body" role="main">
<div class="section" id="bootstrap">
<h1>1 Bootstrap<a class="headerlink" href="#bootstrap" title="Permalink to this headline">¶</a></h1>
<div class="section" id="add-css-or-js-file">
<h2>1.1 Add css or js file<a class="headerlink" href="#add-css-or-js-file" title="Permalink to this headline">¶</a></h2>
<p>You can add you .js file or .css file with flask-assets</p>
<div class="highlight-python"><div class="highlight"><pre><span></span><span class="n">maple</span> <span class="o">=</span> <span class="n">Bootstrap</span><span class="p">(</span><span class="n">css</span><span class="o">=</span><span class="p">(</span><span class="s1">'style/xxx.css'</span><span class="p">,),</span><span class="n">js</span><span class="o">=</span><span class="p">(</span><span class="s1">'style/xxx.js'</span><span class="p">,))</span>
<span class="n">maple</span><span class="o">.</span><span class="n">init_app</span><span class="p">(</span><span class="n">app</span><span class="p">)</span>
</pre></div>
</div>
<p>Or you can add js or css in <strong>templates</strong></p>
<div class="highlight-html"><div class="highlight"><pre><span></span>{% block style -%}
{{super()}}
You css file
{% endblock -%}
{% block script -%}
{{super()}}
You js file
{% endblock -%}
</pre></div>
</div>
</div>
<div class="section" id="use-auth-extension">
<h2>1.2 use auth extension<a class="headerlink" href="#use-auth-extension" title="Permalink to this headline">¶</a></h2>
<p>If you want use maple auth extension,you need set</p>
<div class="highlight-python"><div class="highlight"><pre><span></span><span class="n">Bootstrap</span><span class="p">(</span><span class="n">app</span><span class="p">,</span><span class="n">use_auth</span><span class="o">=</span><span class="bp">True</span><span class="p">)</span>
</pre></div>
</div>
<p>But before it,you need register csrf,beacuse ajax need csrf.</p>
<div class="highlight-python"><div class="highlight"><pre><span></span><span class="kn">from</span> <span class="nn">flask_wtf.csrf</span> <span class="kn">import</span> <span class="n">CsrfProtect</span>
<span class="n">csrf</span> <span class="o">=</span> <span class="n">CsrfProtect</span><span class="p">()</span>
<span class="n">csrf</span><span class="o">.</span><span class="n">init_app</span><span class="p">(</span><span class="n">app</span><span class="p">)</span>
</pre></div>
</div>
</div>
<div class="section" id="other-block">
<h2>1.3 Other block<a class="headerlink" href="#other-block" title="Permalink to this headline">¶</a></h2>
<div class="highlight-html"><div class="highlight"><pre><span></span>{% block title -%}
{% endblock -%}
</pre></div>
</div>
</div>
<div class="section" id="custom-footer">
<h2>1.4 Custom footer<a class="headerlink" href="#custom-footer" title="Permalink to this headline">¶</a></h2>
<p>The footer file in <strong>templates/maple/footer.html</strong>,you can custom it.</p>
<div class="highlight-html"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"footer text-center"</span><span class="p">></span>
custom content
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</pre></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sphinxsidebar" role="navigation" aria-label="main navigation">
<div class="sphinxsidebarwrapper">
<h3><a href="index.html">Table Of Contents</a></h3>
<ul>
<li><a class="reference internal" href="#">1 Bootstrap</a><ul>
<li><a class="reference internal" href="#add-css-or-js-file">1.1 Add css or js file</a></li>
<li><a class="reference internal" href="#use-auth-extension">1.2 use auth extension</a></li>
<li><a class="reference internal" href="#other-block">1.3 Other block</a></li>
<li><a class="reference internal" href="#custom-footer">1.4 Custom footer</a></li>
</ul>
</li>
</ul>
<div class="relations">
<h3>Related Topics</h3>
<ul>
<li><a href="index.html">Documentation overview</a><ul>
<li>Previous: <a href="introduction.html" title="previous chapter">1 Introduction To Flask-Maple</a></li>
</ul></li>
</ul>
</div>
<div role="note" aria-label="source link">
<h3>This Page</h3>
<ul class="this-page-menu">
<li><a href="_sources/bootstrap.txt"
rel="nofollow">Show Source</a></li>
</ul>
</div>
<div id="searchbox" style="display: none" role="search">
<h3>Quick search</h3>
<form class="search" action="search.html" method="get">
<input type="text" name="q" />
<input type="submit" value="Go" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="footer">
©2016, honmaple.
|
Powered by <a href="http://sphinx-doc.org/">Sphinx 1.4.1</a>
& <a href="https://github.com/bitprophet/alabaster">Alabaster 0.7.8</a>
|
<a href="_sources/bootstrap.txt"
rel="nofollow">Page source</a>
</div>
</body>
</html>