mirror of
https://github.com/evennia/evennia.git
synced 2026-03-19 14:26:30 +01:00
303 lines
No EOL
14 KiB
HTML
303 lines
No EOL
14 KiB
HTML
|
||
|
||
<!DOCTYPE html>
|
||
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
|
||
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
|
||
<head>
|
||
<meta charset="utf-8">
|
||
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
<title>Bootstrap Components and Utilities — Evennia 1.0-dev documentation</title>
|
||
|
||
|
||
|
||
|
||
<link rel="shortcut icon" href="_static/favicon.ico"/>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="_static/css/theme.css" type="text/css" />
|
||
|
||
|
||
|
||
|
||
|
||
<link rel="index" title="Index"
|
||
href="genindex.html"/>
|
||
<link rel="search" title="Search" href="search.html"/>
|
||
<link rel="top" title="Evennia 1.0-dev documentation" href="index.html"/>
|
||
|
||
|
||
<script src="_static/js/modernizr.min.js"></script>
|
||
|
||
</head>
|
||
|
||
<body class="wy-body-for-nav" role="document">
|
||
|
||
|
||
<div class="wy-grid-for-nav">
|
||
|
||
|
||
<nav data-toggle="wy-nav-shift" class="wy-nav-side">
|
||
<div class="wy-side-scroll">
|
||
<div class="wy-side-nav-search">
|
||
|
||
|
||
|
||
<a href="index.html" class="icon icon-home"> Evennia
|
||
|
||
|
||
|
||
</a>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div role="search">
|
||
<form id="rtd-search-form" class="wy-form" action="search.html" method="get">
|
||
<input type="text" name="q" placeholder="Search docs" />
|
||
<input type="hidden" name="check_keywords" value="yes" />
|
||
<input type="hidden" name="area" value="default" />
|
||
</form>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
|
||
|
||
|
||
|
||
<!-- Local TOC -->
|
||
<div class="local-toc"><ul>
|
||
<li><a class="reference internal" href="#">Bootstrap Components and Utilities</a><ul>
|
||
<li><a class="reference internal" href="#general-styling">General Styling</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>
|
||
</ul>
|
||
</li>
|
||
<li><a class="reference internal" href="#components">Components</a><ul>
|
||
<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>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
|
||
|
||
|
||
<nav class="wy-nav-top" role="navigation" aria-label="top navigation">
|
||
|
||
<i data-toggle="wy-nav-top" class="fa fa-bars"></i>
|
||
<a href="index.html">Evennia</a>
|
||
|
||
</nav>
|
||
|
||
|
||
|
||
<div class="wy-nav-content">
|
||
<div class="rst-content">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div role="navigation" aria-label="breadcrumbs navigation">
|
||
|
||
<ul class="wy-breadcrumbs">
|
||
|
||
<li><a href="index.html">Docs</a> »</li>
|
||
|
||
<li>Bootstrap Components and Utilities</li>
|
||
|
||
|
||
<li class="wy-breadcrumbs-aside">
|
||
|
||
|
||
<a href="_sources/Bootstrap-Components-and-Utilities.md.txt" rel="nofollow"> View page source</a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<hr/>
|
||
</div>
|
||
<div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
|
||
<div itemprop="articleBody">
|
||
|
||
<div class="section" id="bootstrap-components-and-utilities">
|
||
<h1>Bootstrap Components and Utilities<a class="headerlink" href="#bootstrap-components-and-utilities" title="Permalink to this headline">¶</a></h1>
|
||
<p>Bootstrap provides many utilities and components you can use when customizing Evennia’s web presence. We’ll go over a few examples here that you might find useful.</p>
|
||
<blockquote>
|
||
<div><p>Please take a look at either <a class="reference internal" href="Add-a-simple-new-web-page.html"><span class="doc">the basic web tutorial</span></a> or <a class="reference internal" href="Web-Character-View-Tutorial.html"><span class="doc">the web character view tutorial</span></a>
|
||
to get a feel for how to add pages to Evennia’s website to test these examples.</p>
|
||
</div></blockquote>
|
||
<div class="section" id="general-styling">
|
||
<h2>General Styling<a class="headerlink" href="#general-styling" title="Permalink to this headline">¶</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>
|
||
<div class="section" id="color">
|
||
<h3>Color<a class="headerlink" href="#color" title="Permalink to this headline">¶</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 - suffice to say, adding a class of text-* or bg-*, for instance, text-primary, sets the text color or background color.</p>
|
||
</div>
|
||
<div class="section" id="borders">
|
||
<h3>Borders<a class="headerlink" href="#borders" title="Permalink to this headline">¶</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"><</span><span class="n">span</span> <span class="n">class</span><span class="o">=</span><span class="s2">"border border-dark"</span><span class="o">></</span><span class="n">span</span><span class="o">></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"><</span><span class="n">img</span> <span class="n">src</span><span class="o">=</span><span class="s2">"..."</span> <span class="n">class</span><span class="o">=</span><span class="s2">"rounded"</span> <span class="o">/></span>
|
||
</pre></div>
|
||
</div>
|
||
</div>
|
||
<div class="section" id="spacing">
|
||
<h3>Spacing<a class="headerlink" href="#spacing" title="Permalink to this headline">¶</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>
|
||
</div>
|
||
</div>
|
||
<hr class="docutils" />
|
||
<div class="section" id="components">
|
||
<h2>Components<a class="headerlink" href="#components" title="Permalink to this headline">¶</a></h2>
|
||
<div class="section" id="buttons">
|
||
<h3>Buttons<a class="headerlink" href="#buttons" title="Permalink to this headline">¶</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"><button></span></code>, <code class="docutils literal notranslate"><span class="pre"><a></span></code>, and <code class="docutils literal notranslate"><span class="pre"><input></span></code> elements.</p>
|
||
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><a class="btn btn-primary" href="#" role="button">I'm a Button</a>
|
||
<button class="btn btn-primary" type="submit">Me too!</button>
|
||
<input class="btn btn-primary" type="button" value="Button">
|
||
<input class="btn btn-primary" type="submit" value="Also a Button">
|
||
<input class="btn btn-primary" type="reset" value="Button as Well">
|
||
</pre></div>
|
||
</div>
|
||
</div>
|
||
<div class="section" id="cards">
|
||
<h3>Cards<a class="headerlink" href="#cards" title="Permalink to this headline">¶</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"><</span><span class="n">div</span> <span class="n">class</span><span class="o">=</span><span class="s2">"card"</span><span class="o">></span>
|
||
<span class="o"><</span><span class="n">div</span> <span class="n">class</span><span class="o">=</span><span class="s2">"card-body"</span><span class="o">></span>
|
||
<span class="o"><</span><span class="n">h4</span> <span class="n">class</span><span class="o">=</span><span class="s2">"card-title"</span><span class="o">></span><span class="n">Card</span> <span class="n">title</span><span class="o"></</span><span class="n">h4</span><span class="o">></span>
|
||
<span class="o"><</span><span class="n">h6</span> <span class="n">class</span><span class="o">=</span><span class="s2">"card-subtitle mb-2 text-muted"</span><span class="o">></span><span class="n">Card</span> <span class="n">subtitle</span><span class="o"></</span><span class="n">h6</span><span class="o">></span>
|
||
<span class="o"><</span><span class="n">p</span> <span class="n">class</span><span class="o">=</span><span class="s2">"card-text"</span><span class="o">></span><span class="n">Fancy</span><span class="p">,</span> <span class="n">isn</span><span class="s1">'t it?</p></span>
|
||
<span class="o"><</span><span class="n">a</span> <span class="n">href</span><span class="o">=</span><span class="s2">"#"</span> <span class="n">class</span><span class="o">=</span><span class="s2">"card-link"</span><span class="o">></span><span class="n">Card</span> <span class="n">link</span><span class="o"></</span><span class="n">a</span><span class="o">></span>
|
||
<span class="o"></</span><span class="n">div</span><span class="o">></span>
|
||
<span class="o"></</span><span class="n">div</span><span class="o">></span>
|
||
</pre></div>
|
||
</div>
|
||
</div>
|
||
<div class="section" id="jumbotron">
|
||
<h3>Jumbotron<a class="headerlink" href="#jumbotron" title="Permalink to this headline">¶</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"><</span><span class="n">div</span> <span class="n">class</span><span class="o">=</span><span class="s2">"jumbotron jumbotron-fluid"</span><span class="o">></span>
|
||
<span class="o"><</span><span class="n">div</span> <span class="n">class</span><span class="o">=</span><span class="s2">"container"</span><span class="o">></span>
|
||
<span class="o"><</span><span class="n">h1</span> <span class="n">class</span><span class="o">=</span><span class="s2">"display-3"</span><span class="o">></span><span class="n">Full</span> <span class="n">Width</span> <span class="n">Jumbotron</span><span class="o"></</span><span class="n">h1</span><span class="o">></span>
|
||
<span class="o"><</span><span class="n">p</span> <span class="n">class</span><span class="o">=</span><span class="s2">"lead"</span><span class="o">></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"></</span><span class="n">p</span><span class="o">></span>
|
||
<span class="o"></</span><span class="n">div</span><span class="o">></span>
|
||
<span class="o"></</span><span class="n">div</span><span class="o">></span>
|
||
</pre></div>
|
||
</div>
|
||
</div>
|
||
<div class="section" id="forms">
|
||
<h3>Forms<a class="headerlink" href="#forms" title="Permalink to this headline">¶</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="Web-Character-Generation.html"><span class="doc">the web character gen tutorial.</span></a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
<footer>
|
||
|
||
|
||
<hr/>
|
||
|
||
<div role="contentinfo">
|
||
<p>
|
||
© Copyright 2020, The Evennia developer community.
|
||
|
||
</p>
|
||
</div>
|
||
Built with <a href="http://sphinx-doc.org/">Sphinx</a> and ❤️ using a custom <a href="https://github.com/LinxiFan/Sphinx-theme">theme</a> based on <a href="https://readthedocs.org">Read the Docs</a>.
|
||
|
||
</footer>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
<script type="text/javascript">
|
||
var DOCUMENTATION_OPTIONS = {
|
||
URL_ROOT:'./',
|
||
VERSION:'1.0-dev',
|
||
COLLAPSE_INDEX:false,
|
||
FILE_SUFFIX:'.html',
|
||
HAS_SOURCE: true,
|
||
SOURCELINK_SUFFIX: '.txt'
|
||
};
|
||
</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>
|
||
<script type="text/javascript" src="_static/language_data.js"></script>
|
||
|
||
|
||
|
||
|
||
|
||
<script type="text/javascript" src="_static/js/theme.js"></script>
|
||
|
||
|
||
|
||
|
||
<script type="text/javascript">
|
||
jQuery(function () {
|
||
SphinxRtdTheme.StickyNav.enable();
|
||
});
|
||
</script>
|
||
|
||
|
||
</body>
|
||
</html> |