221V
/
maple-bbs


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
							<!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 &mdash; 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">&#39;style/xxx.css&#39;</span><span class="p">,),</span><span class="n">js</span><span class="o">=</span><span class="p">(</span><span class="s1">&#39;style/xxx.js&#39;</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">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;footer text-center&quot;</span><span class="p">&gt;</span>
custom content
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</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">
      &copy;2016, honmaple.
      
      |
      Powered by <a href="http://sphinx-doc.org/">Sphinx 1.4.1</a>
      &amp; <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>