Andreas/evennia
1
0
Fork 0
mirror of https://github.com/evennia/evennia.git synced 2026-03-18 22:06:30 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions
evennia/docs/0.9.5/Bootstrap-&-Evennia.html
Griatch e34f258a92 Revert "Updated HTML docs." 
This reverts commit 51d5840b8b.
2022-11-14 22:43:45 +01:00

219 lines
No EOL
13 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="generator" content="Docutils 0.17.1: http://docutils.sourceforge.net/" />
<title>Bootstrap &amp; Evennia &#8212; Evennia 0.9.5 documentation</title>
<link rel="stylesheet" href="_static/nature.css" type="text/css" />
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
<script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
<script src="_static/jquery.js"></script>
<script src="_static/underscore.js"></script>
<script src="_static/doctools.js"></script>
<script src="_static/language_data.js"></script>
<script async="async" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/latest.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">MathJax.Hub.Config({"tex2jax": {"processClass": "tex2jax_process|mathjax_process|math|output_area"}})</script>
<link rel="shortcut icon" href="_static/favicon.ico"/>
<link rel="index" title="Index" href="genindex.html" />
<link rel="search" title="Search" href="search.html" />
</head><body>
<div class="related" role="navigation" aria-label="related navigation">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index"
accesskey="I">index</a></li>
<li class="right" >
<a href="py-modindex.html" title="Python Module Index"
>modules</a> |</li>
<li class="nav-item nav-item-0"><a href="index.html">Evennia 0.9.5</a> &#187;</li>
<li class="nav-item nav-item-this"><a href="">Bootstrap &amp; Evennia</a></li>
</ul>
</div>
<div class="document">
<div class="documentwrapper">
<div class="bodywrapper">
<div class="body" role="main">
<section class="tex2jax_ignore mathjax_ignore" id="bootstrap-evennia">
<h1>Bootstrap &amp; Evennia<a class="headerlink" href="#bootstrap-evennia" title="Permalink to this headline"></a></h1>
</section>
<section class="tex2jax_ignore mathjax_ignore" id="what-is-bootstrap">
<h1>What is Bootstrap?<a class="headerlink" href="#what-is-bootstrap" title="Permalink to this headline"></a></h1>
<p>Evennia’s new default web page uses a framework called <a class="reference external" href="https://getbootstrap.com/">Bootstrap</a>. This
framework is in use across the internet - you’ll probably start to recognize its influence once you
learn some of the common design patterns. This switch is great for web developers, perhaps like
yourself, because instead of wondering about setting up different grid systems or what custom class
another designer used, we have a base, a bootstrap, to work from. Bootstrap is responsive by
default, and comes with some default styles that Evennia has lightly overrode to keep some of the
same colors and styles you’re used to from the previous design.</p>
<p>For your reading pleasure, a brief overview of Bootstrap follows. For more in-depth info, please
read <a class="reference external" href="https://getbootstrap.com/docs/4.0/getting-started/introduction/">the documentation</a>.</p>
<hr class="docutils" />
<section id="the-layout-system">
<h2>The Layout System<a class="headerlink" href="#the-layout-system" title="Permalink to this headline"></a></h2>
<p>Other than the basic styling Bootstrap includes, it also includes <a class="reference external" href="https://getbootstrap.com/docs/4.0/layout/overview/">a built in layout and grid
system</a>.
The first part of this system is <a class="reference external" href="https://getbootstrap.com/docs/4.0/layout/overview/#containers">the
container</a>.</p>
<p>The container is meant to hold all your page content. Bootstrap provides two types: fixed-width and
full-width.
Fixed-width containers take up a certain max-width of the page - they’re useful for limiting the
width on Desktop or Tablet platforms, instead of making the content span the width of the page.</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>&lt;div class=&quot;container&quot;&gt;
&lt;!--- Your content here --&gt;
&lt;/div&gt;
</pre></div>
</div>
<p>Full width containers take up the maximum width available to them - they’ll span across a wide-
screen desktop or a smaller screen phone, edge-to-edge.</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>&lt;div class=&quot;container-fluid&quot;&gt;
&lt;!--- This content will span the whole page --&gt;
&lt;/div&gt;
</pre></div>
</div>
<p>The second part of the layout system is <a class="reference external" href="https://getbootstrap.com/docs/4.0/layout/grid/">the grid</a>.
This is the bread-and-butter of the layout of Bootstrap - it allows you to change the size of
elements depending on the size of the screen, without writing any media queries. We’ll briefly go
over it - to learn more, please read the docs or look at the source code for Evennia’s home page in
your browser.</p>
<blockquote>
<div><p>Important! Grid elements should be in a .container or .container-fluid. This will center the
contents of your site.</p>
</div></blockquote>
<p>Bootstrap’s grid system allows you to create rows and columns by applying classes based on
breakpoints. The default breakpoints are extra small, small, medium, large, and extra-large. If
you’d like to know more about these breakpoints, please <a class="reference external" href="https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints">take a look at the documentation for
them.</a></p>
<p>To use the grid system, first create a container for your content, then add your rows and columns
like so:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="o">&lt;</span><span class="n">div</span> <span class="n">class</span><span class="o">=</span><span class="s2">&quot;container&quot;</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">div</span> <span class="n">class</span><span class="o">=</span><span class="s2">&quot;row&quot;</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">div</span> <span class="n">class</span><span class="o">=</span><span class="s2">&quot;col&quot;</span><span class="o">&gt;</span>
<span class="mi">1</span> <span class="n">of</span> <span class="mi">3</span>
<span class="o">&lt;/</span><span class="n">div</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">div</span> <span class="n">class</span><span class="o">=</span><span class="s2">&quot;col&quot;</span><span class="o">&gt;</span>
<span class="mi">2</span> <span class="n">of</span> <span class="mi">3</span>
<span class="o">&lt;/</span><span class="n">div</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">div</span> <span class="n">class</span><span class="o">=</span><span class="s2">&quot;col&quot;</span><span class="o">&gt;</span>
<span class="mi">3</span> <span class="n">of</span> <span class="mi">3</span>
<span class="o">&lt;/</span><span class="n">div</span><span class="o">&gt;</span>
<span class="o">&lt;/</span><span class="n">div</span><span class="o">&gt;</span>
<span class="o">&lt;/</span><span class="n">div</span><span class="o">&gt;</span>
</pre></div>
</div>
<p>This layout would create three equal-width columns.</p>
<p>To specify your sizes - for instance, Evennia’s default site has three columns on desktop and
tablet, but reflows to single-column on smaller screens. Try it out!</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="o">&lt;</span><span class="n">div</span> <span class="n">class</span><span class="o">=</span><span class="s2">&quot;container&quot;</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">div</span> <span class="n">class</span><span class="o">=</span><span class="s2">&quot;row&quot;</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">div</span> <span class="n">class</span><span class="o">=</span><span class="s2">&quot;col col-md-6 col-lg-3&quot;</span><span class="o">&gt;</span>
<span class="mi">1</span> <span class="n">of</span> <span class="mi">4</span>
<span class="o">&lt;/</span><span class="n">div</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">div</span> <span class="n">class</span><span class="o">=</span><span class="s2">&quot;col col-md-6 col-lg-3&quot;</span><span class="o">&gt;</span>
<span class="mi">2</span> <span class="n">of</span> <span class="mi">4</span>
<span class="o">&lt;/</span><span class="n">div</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">div</span> <span class="n">class</span><span class="o">=</span><span class="s2">&quot;col col-md-6 col-lg-3&quot;</span><span class="o">&gt;</span>
<span class="mi">3</span> <span class="n">of</span> <span class="mi">4</span>
<span class="o">&lt;/</span><span class="n">div</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">div</span> <span class="n">class</span><span class="o">=</span><span class="s2">&quot;col col-md-6 col-lg-3&quot;</span><span class="o">&gt;</span>
<span class="mi">4</span> <span class="n">of</span> <span class="mi">4</span>
<span class="o">&lt;/</span><span class="n">div</span><span class="o">&gt;</span>
<span class="o">&lt;/</span><span class="n">div</span><span class="o">&gt;</span>
<span class="o">&lt;/</span><span class="n">div</span><span class="o">&gt;</span>
</pre></div>
</div>
<p>This layout would be 4 columns on large screens, 2 columns on medium screens, and 1 column on
anything smaller.</p>
<p>To learn more about Bootstrap’s grid, please <a class="reference external" href="https://getbootstrap.com/docs/4.0/layout/grid/">take a look at the
docs</a></p>
</section>
<hr class="docutils" />
<section id="more-bootstrap">
<h2>More Bootstrap<a class="headerlink" href="#more-bootstrap" title="Permalink to this headline"></a></h2>
<p>Bootstrap also provides a huge amount of utilities, as well as styling and content elements. To
learn more about them, please <a class="reference external" href="https://getbootstrap.com/docs/4.0/getting-started/introduction/">read the Bootstrap docs</a> or read one of our other web tutorials.</p>
</section>
</section>
<div class="clearer"></div>
</div>
</div>
</div>
<div class="sphinxsidebar" role="navigation" aria-label="main navigation">
<div class="sphinxsidebarwrapper">
<p class="logo"><a href="index.html">
<img class="logo" src="_static/evennia_logo.png" alt="Logo"/>
</a></p>
<div id="searchbox" style="display: none" role="search">
<h3 id="searchlabel">Quick search</h3>
<div class="searchformwrapper">
<form class="search" action="search.html" method="get">
<input type="text" name="q" aria-labelledby="searchlabel" />
<input type="submit" value="Go" />
</form>
</div>
</div>
<script>$('#searchbox').show(0);</script>
<p><h3><a href="index.html">Table of Contents</a></h3>
<ul>
<li><a class="reference internal" href="#">Bootstrap &amp; Evennia</a></li>
<li><a class="reference internal" href="#what-is-bootstrap">What is Bootstrap?</a><ul>
<li><a class="reference internal" href="#the-layout-system">The Layout System</a></li>
<li><a class="reference internal" href="#more-bootstrap">More Bootstrap</a></li>
</ul>
</li>
</ul>
<div role="note" aria-label="source link">
<!--h3>This Page</h3-->
<ul class="this-page-menu">
<li><a href="_sources/Bootstrap-&amp;-Evennia.md.txt"
rel="nofollow">Show Page Source</a></li>
</ul>
</div><h3>Links</h3>
<ul>
<li><a href="https://www.evennia.com">Home page</a> </li>
<li><a href="https://github.com/evennia/evennia">Evennia Github</a> </li>
<li><a href="http://games.evennia.com">Game Index</a> </li>
<li><a href="http://webchat.freenode.net/?channels=evennia&uio=MT1mYWxzZSY5PXRydWUmMTE9MTk1JjEyPXRydWUbb">IRC</a> -
<a href="https://discord.gg/NecFePw">Discord</a> -
<a href="https://groups.google.com/forum/#%21forum/evennia">Forums</a>
</li>
<li><a href="http://evennia.blogspot.com/">Evennia Dev blog</a> </li>
</ul>
<h3>Versions</h3>
<ul>
<li><a href="../1.0-dev/index.html">1.0-dev (develop branch)</a></li>
<li><a href="Bootstrap-&-Evennia.html">0.9.5 (v0.9.5 branch)</a></li>
</ul>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="related" role="navigation" aria-label="related navigation">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index"
>index</a></li>
<li class="right" >
<a href="py-modindex.html" title="Python Module Index"
>modules</a> |</li>
<li class="nav-item nav-item-0"><a href="index.html">Evennia 0.9.5</a> &#187;</li>
<li class="nav-item nav-item-this"><a href="">Bootstrap &amp; Evennia</a></li>
</ul>
</div>
<div class="footer" role="contentinfo">
&#169; Copyright 2020, The Evennia developer community.
Created using <a href="https://www.sphinx-doc.org/">Sphinx</a> 3.2.1.
</div>
</body>
</html>
Reference in a new issue View git blame Copy permalink