BootstrapTest: Unterschied zwischen den Versionen

Aus OGD Cockpit
Wechseln zu:Navigation, Suche
Keine Bearbeitungszusammenfassung
 
(24 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 20: Zeile 20:


== other tests==
== other tests==
<div class="btn btn-default"  role="button"><span class="navbar-text">[[Default]]</span></div>
<div class="btn btn-default"  role="button">[[Default]]</div>


<div class="btn btn-info" role="button">[[Link]]</div>
<div class="btn btn-info" role="button">[[Link]]</div>
Zeile 29: Zeile 29:




<div class="btn btn-info navbar-link">[http://www.kdz.or.at KDZ]</div>
<div class="btn btn-info">[http://www.kdz.or.at KDZ]</div>


<div class="btn btn-default">
<span class="badge">4</span>
* [[Link1]]
* [[Link2]]
</div>
 
<span class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</span>


== Dropdowns ==
== Dropdowns ==
Zeile 44: Zeile 37:
=== manual ===
=== manual ===
<div class="btn-group">
<div class="btn-group">
   <div class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span>
   <div class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span>
   </div>
   </div>
   <ul class="dropdown-menu list-inline">
   <ul class="dropdown-menu list-inline">
Zeile 57: Zeile 50:
=== with bullets and separator===
=== with bullets and separator===
<div class="btn-group">
<div class="btn-group">
   <div class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span>
   <div class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span>
   </div>
   </div>
   <ul class="dropdown-menu">
   <ul class="dropdown-menu">
Zeile 71: Zeile 64:


<div class="btn-group">
<div class="btn-group">
   <div class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span>
   <div class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span>
   </div>
   </div>
{{#ask:[[Kategorie:Organisationen]]
{{#ask:[[Kategorie:Organisationen]]
Zeile 83: Zeile 76:
<div class="nav nav-tabs">
<div class="nav nav-tabs">
   <li role="presentation" class="dropdown">
   <li role="presentation" class="dropdown">
     <span class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">
     <span class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
       Dropdown <span class="caret"></span>
       Dropdown <span class="caret"></span>
     </span>
     </span>
Zeile 98: Zeile 91:
<div class="nav nav-pills">
<div class="nav nav-pills">
   <li role="presentation" class="dropdown">
   <li role="presentation" class="dropdown">
     <span class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">
     <span class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
       Dropdown <span class="caret"></span>
       Dropdown <span class="caret"></span>
     </span>
     </span>
Zeile 113: Zeile 106:
<div class="nav nav-pills">
<div class="nav nav-pills">
   <li role="presentation" class="dropdown">
   <li role="presentation" class="dropdown">
     <span class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">
     <span class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
       Dropdown <span class="caret"></span>
       Dropdown <span class="caret"></span>
     </span>
     </span>
Zeile 126: Zeile 119:
<div class="navbar navbar-default">
<div class="navbar navbar-default">
   <li role="presentation" class="dropdown list-inline">
   <li role="presentation" class="dropdown list-inline">
     <span class="dropdown-toggle" data-toggle="dropdown" href="Benutzer:Admin" role="button" >
     <span class="dropdown-toggle" data-toggle="dropdown" href="Benutzer:Admin" role="button" aria-haspopup="true" aria-expanded="false">
     Dropdown <span class="caret"></span>
     Dropdown <span class="caret"></span>
     </span>
     </span>
Zeile 141: Zeile 134:
<div class="navbar navbar-default">
<div class="navbar navbar-default">
   <li role="presentation" class="dropdown list-inline">
   <li role="presentation" class="dropdown list-inline">
     <span class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">
     <span class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
       Dropdown <span class="caret"></span>
       Dropdown <span class="caret"></span>
     </span>
     </span>
Zeile 179: Zeile 172:
<p class="bg-warning">[[Warning-Text]]</p>
<p class="bg-warning">[[Warning-Text]]</p>
<p class="bg-danger">[[Danger-Tex]]</p>
<p class="bg-danger">[[Danger-Tex]]</p>
 
== Jumbotron ==
== Progressbar ==
<div class="jumbotron">
<div class="progress">
   <h1>Hello, world!</h1>
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
    60%
</p>
  </div>
</div>
 
== Progressbar 2 ==
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
   <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>
== Progressbar 3 ==
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>
</div>
== Progress bars ==
<div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60% </div></div>

Aktuelle Version vom 18. November 2015, 12:48 Uhr

redlinks

regular links

external links

other tests

No Link


4

Dropdowns

manual

with bullets and separator

Semantic

Tabs

Pills

Semantic Piills

Navbar

Semantic Navbar

Text

Muted Text

Primary Text

Success-Text

Info-Text

Waringn-Text

Danger-Text

Text with Links

Muted Text

Primary Text

Success-Text

Info-Text

Waringn-Text

Danger-Text

Backgrounds

Primary Text

Success-Text

Info-Text

Warning-Text

Danger-Text

Backgrounds with links

Primary Text

Success-Text

Info-Text

Warning-Text

Danger-Tex

Jumbotron

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Progress bars

60%