Andreas/evennia
1
0
Fork 0
mirror of https://github.com/evennia/evennia.git synced 2026-03-16 21:06:30 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions
evennia/docs/6.x/Components/Web-Bootstrap-Framework.html
Griatch 9e122e89ca Update with 6.x branch docs
2026-02-15 19:06:04 +01:00

345 lines
No EOL
24 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 lang="en" data-content_root="../">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap frontend framework &#8212; Evennia latest documentation</title>
<link rel="stylesheet" type="text/css" href="../_static/pygments.css?v=d75fae25" />
<link rel="stylesheet" type="text/css" href="../_static/nature.css?v=279e0f84" />
<link rel="stylesheet" type="text/css" href="../_static/custom.css?v=e4a91a55" />
<script src="../_static/documentation_options.js?v=c6e86fd7"></script>
<script src="../_static/doctools.js?v=9bcbadda"></script>
<script src="../_static/sphinx_highlight.js?v=dc90522c"></script>
<link rel="icon" href="../_static/favicon.ico"/>
<link rel="index" title="Index" href="../genindex.html" />
<link rel="search" title="Search" href="../search.html" />
<link rel="next" title="Core Concepts" href="../Concepts/Concepts-Overview.html" />
<link rel="prev" title="Evennia REST API" href="Web-API.html" />
</head><body>
<div class="related" role="navigation" aria-label="Related">
<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="right" >
<a href="../Concepts/Concepts-Overview.html" title="Core Concepts"
accesskey="N">next</a> |</li>
<li class="right" >
<a href="Web-API.html" title="Evennia REST API"
accesskey="P">previous</a> |</li>
<li class="nav-item nav-item-0"><a href="../index.html">Evennia</a> &#187;</li>
<li class="nav-item nav-item-1"><a href="Components-Overview.html" accesskey="U">Core Components</a> &#187;</li>
<li class="nav-item nav-item-this"><a href="">Bootstrap frontend framework</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-frontend-framework">
<h1>Bootstrap frontend framework<a class="headerlink" href="#bootstrap-frontend-framework" title="Link to this heading"></a></h1>
<p>Evennia’s 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>e, 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>
<section id="grid-system">
<h2>Grid system<a class="headerlink" href="#grid-system" title="Link to this heading"></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>.</p>
<section id="the-container">
<h3>The container<a class="headerlink" href="#the-container" title="Link to this heading"></a></h3>
<p>The first part of the grid 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>
</section>
<section id="the-grid">
<h3>The grid<a class="headerlink" href="#the-grid" title="Link to this heading"></a></h3>
<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>.</p>
<p>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>
I</p>
</section>
</section>
<section id="general-styling-elements">
<h2>General Styling elements<a class="headerlink" href="#general-styling-elements" title="Link to this heading"></a></h2>
<p>Bootstrap provides base styles for your site. These can be customized through CSS, but the default
styles are intended to provide a consistent, clean look for sites.</p>
<section id="color">
<h3>Color<a class="headerlink" href="#color" title="Link to this heading"></a></h3>
<p>Most elements can be styled with default colors. <a class="reference external" href="https://getbootstrap.com/docs/4.0/utilities/colors/">Take a look at the documentation</a> to learn more about these colors</p>
<ul class="simple">
<li><p>suffice to say, adding a class of text-* or bg-*, for instance, text-primary, sets the text color
or background color.</p></li>
</ul>
</section>
<section id="borders">
<h3>Borders<a class="headerlink" href="#borders" title="Link to this heading"></a></h3>
<p>Simply adding a class of ‘border’ to an element adds a border to the element. For more in-depth
info, please <a class="reference external" href="https://getbootstrap.com/docs/4.0/utilities/borders/">read the documentation on borders.</a>.</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="o">&lt;</span><span class="n">span</span> <span class="n">class</span><span class="o">=</span><span class="s2">&quot;border border-dark&quot;</span><span class="o">&gt;&lt;/</span><span class="n">span</span><span class="o">&gt;</span>
</pre></div>
</div>
<p>You can also easily round corners just by adding a class.</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="o">&lt;</span><span class="n">img</span> <span class="n">src</span><span class="o">=</span><span class="s2">&quot;...&quot;</span> <span class="n">class</span><span class="o">=</span><span class="s2">&quot;rounded&quot;</span> <span class="o">/&gt;</span>
</pre></div>
</div>
</section>
<section id="spacing">
<h3>Spacing<a class="headerlink" href="#spacing" title="Link to this heading"></a></h3>
<p>Bootstrap provides classes to easily add responsive margin and padding. Most of the time, you might like to add margins or padding through CSS itself - however these classes are used in the default Evennia site. <a class="reference external" href="https://getbootstrap.com/docs/4.0/utilities/spacing/">Take a look at the docs</a> to
learn more.</p>
</section>
<section id="buttons">
<h3>Buttons<a class="headerlink" href="#buttons" title="Link to this heading"></a></h3>
<p><a class="reference external" href="https://getbootstrap.com/docs/4.0/components/buttons/">Buttons</a> in Bootstrap are very easy to use - button styling can be added to <code class="docutils literal notranslate"><span class="pre">&lt;button&gt;</span></code>, <code class="docutils literal notranslate"><span class="pre">&lt;a&gt;</span></code>, and <code class="docutils literal notranslate"><span class="pre">&lt;input&gt;</span></code> elements.</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>&lt;a class=&quot;btn btn-primary&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;I&#39;m a Button&lt;/a&gt;
&lt;button class=&quot;btn btn-primary&quot; type=&quot;submit&quot;&gt;Me too!&lt;/button&gt;
&lt;input class=&quot;btn btn-primary&quot; type=&quot;button&quot; value=&quot;Button&quot;&gt;
&lt;input class=&quot;btn btn-primary&quot; type=&quot;submit&quot; value=&quot;Also a Button&quot;&gt;
&lt;input class=&quot;btn btn-primary&quot; type=&quot;reset&quot; value=&quot;Button as Well&quot;&gt;
</pre></div>
</div>
</section>
<section id="cards">
<h3>Cards<a class="headerlink" href="#cards" title="Link to this heading"></a></h3>
<p><a class="reference external" href="https://getbootstrap.com/docs/4.0/components/card/">Cards</a> provide a container for other elements
that stands out from the rest of the page. The “Accounts”, “Recently Connected”, and “Database
Stats” on the default webpage are all in cards. Cards provide quite a bit of formatting options -
the following is a simple example, but read the documentation or look at the site’s source for more.</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;card&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;card-body&quot;</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">h4</span> <span class="n">class</span><span class="o">=</span><span class="s2">&quot;card-title&quot;</span><span class="o">&gt;</span><span class="n">Card</span> <span class="n">title</span><span class="o">&lt;/</span><span class="n">h4</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">h6</span> <span class="n">class</span><span class="o">=</span><span class="s2">&quot;card-subtitle mb-2 text-muted&quot;</span><span class="o">&gt;</span><span class="n">Card</span> <span class="n">subtitle</span><span class="o">&lt;/</span><span class="n">h6</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">p</span> <span class="n">class</span><span class="o">=</span><span class="s2">&quot;card-text&quot;</span><span class="o">&gt;</span><span class="n">Fancy</span><span class="p">,</span> <span class="n">isn</span><span class="s1">&#39;t it?&lt;/p&gt;</span>
<span class="o">&lt;</span><span class="n">a</span> <span class="n">href</span><span class="o">=</span><span class="s2">&quot;#&quot;</span> <span class="n">class</span><span class="o">=</span><span class="s2">&quot;card-link&quot;</span><span class="o">&gt;</span><span class="n">Card</span> <span class="n">link</span><span class="o">&lt;/</span><span class="n">a</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>
</section>
<section id="jumbotron">
<h3>Jumbotron<a class="headerlink" href="#jumbotron" title="Link to this heading"></a></h3>
<p><a class="reference external" href="https://getbootstrap.com/docs/4.0/components/jumbotron/">Jumbotrons</a> are useful for featuring an
image or tagline for your game. They can flow with the rest of your content or take up the full
width of the page - Evennia’s base site uses the former.</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;jumbotron jumbotron-fluid&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;container&quot;</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">h1</span> <span class="n">class</span><span class="o">=</span><span class="s2">&quot;display-3&quot;</span><span class="o">&gt;</span><span class="n">Full</span> <span class="n">Width</span> <span class="n">Jumbotron</span><span class="o">&lt;/</span><span class="n">h1</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">p</span> <span class="n">class</span><span class="o">=</span><span class="s2">&quot;lead&quot;</span><span class="o">&gt;</span><span class="n">Look</span> <span class="n">at</span> <span class="n">the</span> <span class="n">source</span> <span class="n">of</span> <span class="n">the</span> <span class="n">default</span> <span class="n">Evennia</span> <span class="n">page</span> <span class="k">for</span> <span class="n">a</span> <span class="n">regular</span> <span class="n">Jumbotron</span><span class="o">&lt;/</span><span class="n">p</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>
</section>
<section id="forms">
<h3>Forms<a class="headerlink" href="#forms" title="Link to this heading"></a></h3>
<p><a class="reference external" href="https://getbootstrap.com/docs/4.0/components/forms/">Forms</a> are highly customizable with Bootstrap.
For a more in-depth look at how to use forms and their styles in your own Evennia site, please read
over <a class="reference internal" href="../Howtos/Web-Character-Generation.html"><span class="std std-doc">the web character gen tutorial.</span></a></p>
</section>
</section>
<section id="further-reading">
<h2>Further reading<a class="headerlink" href="#further-reading" title="Link to this heading"></a></h2>
<p>Bootstrap also provides a huge amount of utilities, as well as styling and content elements. To learn more about them, please [read the Bootstrap docs](<a class="reference external" href="https://getbootstrap.com/docs/4.0/getting-">https://getbootstrap.com/docs/4.0/getting-</a> started/introduction/) 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">
<div class="sphinxsidebarwrapper">
<p class="logo"><a href="../index.html">
<img class="logo" src="../_static/evennia_logo.png" alt="Logo of Evennia"/>
</a></p>
<search 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" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"/>
<input type="submit" value="Go" />
</form>
</div>
</search>
<script>document.getElementById('searchbox').style.display = "block"</script>
<h3><a href="../index.html">Table of Contents</a></h3>
<ul>
<li><a class="reference internal" href="#">Bootstrap frontend framework</a><ul>
<li><a class="reference internal" href="#grid-system">Grid system</a><ul>
<li><a class="reference internal" href="#the-container">The container</a></li>
<li><a class="reference internal" href="#the-grid">The grid</a></li>
</ul>
</li>
<li><a class="reference internal" href="#general-styling-elements">General Styling elements</a><ul>
<li><a class="reference internal" href="#color">Color</a></li>
<li><a class="reference internal" href="#borders">Borders</a></li>
<li><a class="reference internal" href="#spacing">Spacing</a></li>
<li><a class="reference internal" href="#buttons">Buttons</a></li>
<li><a class="reference internal" href="#cards">Cards</a></li>
<li><a class="reference internal" href="#jumbotron">Jumbotron</a></li>
<li><a class="reference internal" href="#forms">Forms</a></li>
</ul>
</li>
<li><a class="reference internal" href="#further-reading">Further reading</a></li>
</ul>
</li>
</ul>
<div>
<h4>Previous topic</h4>
<p class="topless"><a href="Web-API.html"
title="previous chapter">Evennia REST API</a></p>
</div>
<div>
<h4>Next topic</h4>
<p class="topless"><a href="../Concepts/Concepts-Overview.html"
title="next chapter">Core Concepts</a></p>
</div>
<div role="note" aria-label="source link">
<!--h3>This Page</h3-->
<ul class="this-page-menu">
<li><a href="../_sources/Components/Web-Bootstrap-Framework.md.txt"
rel="nofollow">Show Page Source</a></li>
</ul>
</div><h3>Links</h3>
<ul>
<li><a href="https://www.evennia.com/docs/latest/index.html">Documentation Top</a> </li>
<li><a href="https://www.evennia.com">Evennia Home</a> </li>
<li><a href="https://github.com/evennia/evennia">Github</a> </li>
<li><a href="http://games.evennia.com">Game Index</a> </li>
<li>
<a href="https://discord.gg/AJJpcRUhtF">Discord</a> -
<a href="https://github.com/evennia/evennia/discussions">Discussions</a> -
<a href="https://evennia.blogspot.com/">Blog</a>
</li>
</ul>
<h3>Doc Versions</h3>
<ul>
<li>
<a href="https://www.evennia.com/docs/latest/index.html">latest (main branch)</a>
</li>
<li>
<a href="https://www.evennia.com/docs/5.x/index.html">v5.0.0 branch (outdated)</a>
</li>
<li>
<a href="https://www.evennia.com/docs/4.x/index.html">v4.0.0 branch (outdated)</a>
</li>
<li>
<a href="https://www.evennia.com/docs/3.x/index.html">v3.0.0 branch (outdated)</a>
</li>
<li>
<a href="https://www.evennia.com/docs/2.x/index.html">v2.0.0 branch (outdated)</a>
</li>
<li>
<a href="https://www.evennia.com/docs/1.x/index.html">v1.0.0 branch (outdated)</a>
</li>
<li>
<a href="https://www.evennia.com/docs/0.x/index.html">v0.9.5 branch (outdated)</a>
</li>
</ul>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="related" role="navigation" aria-label="Related">
<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="right" >
<a href="../Concepts/Concepts-Overview.html" title="Core Concepts"
>next</a> |</li>
<li class="right" >
<a href="Web-API.html" title="Evennia REST API"
>previous</a> |</li>
<li class="nav-item nav-item-0"><a href="../index.html">Evennia</a> &#187;</li>
<li class="nav-item nav-item-1"><a href="Components-Overview.html" >Core Components</a> &#187;</li>
<li class="nav-item nav-item-this"><a href="">Bootstrap frontend framework</a></li>
</ul>
</div>
<div class="footer" role="contentinfo">
&#169; Copyright 2024, The Evennia developer community.
Created using <a href="https://www.sphinx-doc.org/">Sphinx</a> 8.2.3.
</div>
</body>
</html>
Reference in a new issue View git blame Copy permalink