Az oldalon a Joomlart Typo / Uber templates kapcsolatát mutatom be.

Alul található a forrás: itt


 

A <h1 ..h6> ek <small> közötti részt lehet így alakítani </small> </h1..h6>

Ötlet: Hozzon létre egy másodlagos szöveget a fejlécek között a <small> .... </small> tagok között.


Szövegkiemelésre példa

Ez az osztály a következőt jeleníti meg <p class="text-mute">...</p>

Ez az osztály a következőt jeleníti meg <p class="text-primary"...</p>

Ez az <p> osztály a következőt jeleníti meg <p class="text-warning"...</p>

Ez az <p> osztály a következőt jeleníti meg <p class="text-danger"...</p>

Ez az <p> osztály a következőt jeleníti meg <p class="text-success"...</p>

Ez az <p> osztály a következőt jeleníti meg <p class="text-info"...</p>

Ez az <p> osztály a következőt jeleníti meg <p class="text-left"...</p>

Ez az <p> osztály a következőt jeleníti meg <p class="text-right"...</p>

Ez az <p> osztály a következőt jeleníti meg <p class="text-center"...</p>

Ez az <p> osztály a következőt jeleníti meg <p class="text-justify"...</p> Ez az osztály a következőt jeleníti meg. Ez az osztály a következőt jeleníti meg


Tab fülekre példa

 


 


 

Nyomógombra példa


 

Nyomógomb 2 példa


 

Szinek példa (ami nem úgy viselkedik mint az oldalon)

#039be5
Brand Primary
#259b24
Brand Secondary
#e67e22
Brand Warning
#d9534f
Brand Danger
#5bc0de
Brand Info
#5cb85c
Brand Success

Beviteli mezőre a példa


 

Példa formátum

Legend
A longer block of help text that breaks onto a new line and may extend beyond one line.


 


 

Labels példa

DefaultPrimarySuccessInfoWarningDanger

Lista példa

List groups

  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • Morbi leo risus
  • 1 Morbi leo risus
  • 2 Dapibus ac facilisis in

List group item heading

Donec id elit non mi porta gravida at eget metus risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus.

List group item heading

Donec id elit non mi porta gravida at eget metus.


 

Panelekre példa

Panel heading
Panel content

Panel primary

Panel content

Panel success

Panel content

Panel warning

Panel content

Panel danger

Panel content

Panel info

Panel content

Wells

Look, I'm in a small well!
Look, I'm in a well!
Look, I'm in a large well!

 

<h3>Az oldalon a Joomlart Typo / Uber templates kapcsolatát mutatom be.</h3>
<h3>Alul található a forrás:</h3>
<hr />
<p> </p>
<h4>A &lt;h1 ..h6&gt; ek <small>&lt;small&gt; közötti részt lehet így alakítani &lt;/small&gt; </small>&lt;/h1..h6&gt;</h4>
<div class="alert alert-warning">
<p><strong>Ötlet:</strong> Hozzon létre egy másodlagos szöveget a fejlécek között a &lt;small&gt; .... &lt;/small&gt; tagok között.</p>
</div>
<hr />
<h3 class="text-mute">Szövegkiemelésre példa</h3>
<p class="text-mute">Ez az osztály a következőt jeleníti meg &lt;p class="text-mute"&gt;...&lt;/p&gt;</p>
<p class="text-primary">Ez az osztály a következőt jeleníti meg &lt;p class="text-primary"...&lt;/p&gt;</p>
<p class="text-warning">Ez az &lt;p&gt; osztály a következőt jeleníti meg &lt;p class="text-warning"...&lt;/p&gt;</p>
<p class="text-danger">Ez az &lt;p&gt; osztály a következőt jeleníti meg &lt;p class="text-danger"...&lt;/p&gt;</p>
<p class="text-success">Ez az &lt;p&gt; osztály a következőt jeleníti meg &lt;p class="text-success"...&lt;/p&gt;</p>
<p class="text-info">Ez az &lt;p&gt; osztály a következőt jeleníti meg &lt;p class="text-info"...&lt;/p&gt;</p>
<p class="text-left">Ez az &lt;p&gt; osztály a következőt jeleníti meg &lt;p class="text-left"...&lt;/p&gt;</p>
<p class="text-right">Ez az &lt;p&gt; osztály a következőt jeleníti meg &lt;p class="text-right"...&lt;/p&gt;</p>
<p class="text-center">Ez az &lt;p&gt; osztály a következőt jeleníti meg &lt;p class="text-center"...&lt;/p&gt;</p>
<p class="text-justify">Ez az &lt;p&gt; osztály a következőt jeleníti meg &lt;p class="text-justify"...&lt;/p&gt; Ez az osztály a következőt jeleníti meg. Ez az osztály a következőt jeleníti meg</p>
<hr />
<h3>Tab fülekre példa</h3>
<ul class="nav nav-tabs">
<li class="active"><a href="/index.php?amp;view=article&amp;id=2&amp;catid=9&amp;lang=de-DE&amp;Itemid=101" hreflang="de">Kezdőlap</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li class="disabled"><a>Kikapcsolt</a></li>
<li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown"> Almenüs példa </a>
<ul class="dropdown-menu">
<li><a href="#dropdown1" data-toggle="tab">Action</a></li>
<li><a href="#dropdown2" data-toggle="tab">Another action</a></li>
<li><a href="#dropdown2" data-toggle="tab">Another action</a></li>
</ul>
</li>
</ul>
<p> </p>
<hr />
<p> </p>
<div class="col-lg-4">
<h3>Vertikális menüre példa</h3>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Active Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li class="disabled"><a href="#">Disabled Menu Item</a></li>
<li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown"> Dropdown </a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<hr />
<p> </p>
<h3>Nyomógombra példa</h3>
<div class="row example-row example-forms example-buttons">
<div class="col-md-3"><a class="btn btn-block btn-default" href="#">Default Button</a></div>
<div class="col-md-3"><a class="btn btn-block btn-primary" href="#">Primary Button</a></div>
<div class="col-md-3"><a class="btn btn-block btn-success" href="#">Success Button</a></div>
<div class="col-md-3"><a class="btn btn-block btn-inverse" href="#">Inverse Button</a></div>
</div>
<div class="row example-row example-forms example-buttons">
<div class="col-md-3"><a class="btn btn-block btn-info" href="#">Info Button</a></div>
<div class="col-md-3"><a class="btn btn-block btn-warning" href="#">Warning Button</a></div>
<div class="col-md-3"><a class="btn btn-block btn-danger" href="#">Danger Button</a></div>
<div class="col-md-3"><a class="btn btn-block btn-default disabled" href="#">Disabled Button</a></div>
</div>
<hr />
<p> </p>
<h3>Nyomógomb 2 példa</h3>
<div class="row example-row example-forms example-buttons">
<div class="col-md-4"><a class="btn btn-primary btn-sm" href="#">Small Button</a></div>
<div class="col-md-4"><a class="btn btn-primary btn-rounded" href="#">Rounded Button</a></div>
<div class="col-md-4"><a class="btn btn-primary btn-border" href="#">Border Button</a></div>
</div>
<div class="row example-row example-forms example-buttons">
<div class="col-md-4"><a class="btn btn-primary btn-lg" href="#">Large Button</a></div>
<div class="col-md-4"><a class="btn btn-primary btn-lg btn-inverse" href="#">Large Inverse Button</a></div>
<div class="col-md-4"><a class="btn btn-primary btn-lg btn-border-inverse" href="#">Border Inverse Button</a></div>
</div>
<hr />
<p> </p>
<h3>Szinek példa (ami nem úgy viselkedik mint az oldalon)</h3>
<div class="row example-row example-colors">
<div class="col-xs-6 col-md-4 col-lg-2">
<div class="swatch-item color-brand-primary">
<dl>
<dt>#039be5</dt>
<dd>Brand Primary</dd>
</dl>
</div>
</div>
<div class="col-xs-6 col-md-4 col-lg-2">
<div class="swatch-item color-brand-secondary">
<dl>
<dt>#259b24</dt>
<dd>Brand Secondary</dd>
</dl>
</div>
</div>
<div class="col-xs-6 col-md-4 col-lg-2">
<div class="swatch-item color-brand-warning">
<dl>
<dt>#e67e22</dt>
<dd>Brand Warning</dd>
</dl>
</div>
</div>
<div class="col-xs-6 col-md-4 col-lg-2">
<div class="swatch-item color-brand-danger">
<dl>
<dt>#d9534f</dt>
<dd>Brand Danger</dd>
</dl>
</div>
</div>
<div class="col-xs-6 col-md-4 col-lg-2">
<div class="swatch-item color-brand-info">
<dl>
<dt>#5bc0de</dt>
<dd>Brand Info</dd>
</dl>
</div>
</div>
<div class="col-xs-6 col-md-4 col-lg-2">
<div class="swatch-item color-brand-success">
<dl>
<dt>#5cb85c</dt>
<dd>Brand Success</dd>
</dl>
</div>
</div>
</div>
<hr />
<h3>Beviteli mezőre a példa</h3>
<div class="row example-row example-forms example-inputs">
<div class="col-md-3">
<div class="form-group has-success"><label class="control-label" for="inputSuccess">Input success</label> <input id="inputSuccess" class="form-control" type="text" /></div>
</div>
<div class="col-md-3">
<div class="form-group has-error"><label class="control-label" for="inputError">Input error</label> <input id="inputError" class="form-control" type="text" /></div>
</div>
<div class="col-md-3">
<div class="form-group has-warning"><label class="control-label" for="inputWarning">Input warning</label> <input id="inputWarning" class="form-control" type="text" /></div>
</div>
<div class="col-md-3">
<div class="form-group"><label class="control-label" for="disabledInput">Disabled input</label> <input id="disabledInput" class="form-control" disabled="disabled" type="text" /></div>
</div>
</div>
<div class="row example-row example-forms">
<div class="col-lg-12"><hr />
<h3> </h3>
<h3>Példa formátum</h3>
<div class="well"><form class="form-horizontal"><fieldset><legend>Legend</legend>
<div class="form-group"><label class="col-lg-2 control-label" for="inputEmail">Email</label>
<div class="col-lg-10"><input id="inputEmail" class="form-control" type="text" /></div>
</div>
<div class="form-group"><label class="col-lg-2 control-label" for="inputPassword">Password</label>
<div class="col-lg-10"><input id="inputPassword" class="form-control" type="password" />
<div class="checkbox"><label> <input type="checkbox" /> Checkbox </label></div>
</div>
</div>
<div class="form-group"><label class="col-lg-2 control-label" for="textArea">Textarea</label>
<div class="col-lg-10"><textarea id="textArea" class="form-control" rows="3"></textarea> <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span></div>
</div>
<div class="form-group"><label class="col-lg-2 control-label">Radios</label>
<div class="col-lg-10">
<div class="radio"><label> <input id="optionsRadios1" checked="checked" name="optionsRadios" type="radio" value="option1" /> Option one is this </label></div>
<div class="radio"><label> <input id="optionsRadios2" name="optionsRadios" type="radio" value="option2" /> Option two can be something else </label></div>
</div>
</div>
<div class="form-group"><label class="col-lg-2 control-label" for="select">Selects</label>
<div class="col-lg-10"><select id="select" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select><br /><select class="form-control" multiple="multiple">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select></div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2"><button class="btn btn-default">Cancel</button> <button class="btn btn-primary" type="submit">Submit</button></div>
</div>
</fieldset></form></div>
</div>
</div>
<hr />
<p> </p>
<div class="row example-row example-indicators">
<div class="col-lg-6">
<h3>Badges példa</h3>
<div class="example">
<ul class="nav nav-pills">
<li class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li><a href="#">Profile </a></li>
<li><a href="#">Messages <span class="badge">25</span></a></li>
<li><a href="#">Notices <span class="badge">2</span></a></li>
</ul>
</div>
</div>
<div class="col-lg-6"><hr />
<h3> </h3>
<h3>Labels példa</h3>
<div class="example"><span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span></div>
</div>
</div>
<hr />
<h3>Lista példa</h3>
<div class="docs-section">
<div class="page-header">
<h1 id="example-misc">Other useful components</h1>
</div>
<!-- List Groups -->
<h3>List groups</h3>
<div class="row example-row example-misc">
<div class="col-lg-4">
<ul class="list-group">
<li class="list-group-item"><span class="badge">14</span> Cras justo odio</li>
<li class="list-group-item"><span class="badge">2</span> Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item"><span class="badge">1</span> Morbi leo risus</li>
<li class="list-group-item"><span class="badge">2</span> Dapibus ac facilisis in</li>
</ul>
</div>
<div class="col-lg-4">
<div class="list-group"><a class="list-group-item active" href="#"><span class="badge">9</span> Cras justo odio</a> <a class="list-group-item" href="#">Dapibus ac facilisis in</a> <a class="list-group-item" href="#">Morbi leo risus</a> <a class="list-group-item" href="#">Porta ac consectetur ac</a> <a class="list-group-item" href="#">Vestibulum at eros</a></div>
</div>
<div class="col-lg-4">
<div class="list-group">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus risus varius blandit.</p>
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus.</p>
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>
</div>
<!-- //List Groups --> <!-- Panels --><hr />
<h3> </h3>
<h3>Panelekre példa</h3>
<div class="row example-row example-misc">
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">Panel content</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel primary</h3>
</div>
<div class="panel-body">Panel content</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Panel success</h3>
</div>
<div class="panel-body">Panel content</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Panel warning</h3>
</div>
<div class="panel-body">Panel content</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Panel danger</h3>
</div>
<div class="panel-body">Panel content</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel info</h3>
</div>
<div class="panel-body">Panel content</div>
</div>
</div>
</div>
<!-- //Panels --> <!-- Wells -->
<h3>Wells</h3>
<div class="row example-row example-misc">
<div class="col-lg-4">
<div class="well well-sm">Look, I'm in a small well!</div>
</div>
<div class="col-lg-4">
<div class="well">Look, I'm in a well!</div>
</div>
<div class="col-lg-4">
<div class="well well-lg">Look, I'm in a large well!</div>
</div>
</div>
<!-- //Wells --></div>

 



Kérem látogasson vissza később!

Köszönjük a Türelmét!