Blue Engineering
Wechseln zu: Navigation, Suche

MWTabelle: Unterschied zwischen den Versionen

Zeile 49: Zeile 49:
  
  
−
<div class="portlet">
+
<div class="col-md-12 column sortable ui-sortable pull-right">
 +
            <div class="portlet">
 
                 <div class="panel panel-primary-light-border">
 
                 <div class="panel panel-primary-light-border">
 
                     <div class="panel-heading clearfix">
 
                     <div class="panel-heading clearfix">
Zeile 64: Zeile 65:
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 +
                    <div style="display: block;" class="panel-body">
 +
                    <p class="justify">Portlets are another space saving feature which allows for large blocks of content in a small space in a similar fashio to Nav Tabs, though Portlets come with additional functionality.</p>
 +
                    <p class="justify">Note how Portlets can be dragged and dropped to different locations, or if you select the "x" it will remove a Portlet and the chevrons open and close the panels. Panels can also be set to the desired postion, either open or closed on page load. </p>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
 +
            <div class="portlet">
 +
                <div class="panel panel-primary-light-border">
 +
                    <div class="panel-heading clearfix">
 +
                        <div class="panel-caption">
 +
                            <h3 class="panel-title">Bootstrap Portlet 2</h3>
 +
                        </div>
 +
                        <div class="panel-options dark">
 +
                            <div class="panel-expand">
 +
                                <div class=""><i class="fa fa-chevron-down"></i></div>
 +
                            </div>
 +
                            <div class="panel-remove">
 +
                                <div class=""><i class="fa fa-times"></i></div>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                    <div style="display: none;" class="panel-body panel-hidden">
 +
                            <p class="justify">
 +
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ullamcorper
 +
                                dolor ut urna consectetur, id interdum purus pellentesque. Suspendisse fringilla
 +
                                nunc erat, nec consectetur nisi tristique nec. Etiam dignissim hendrerit vehicula.
 +
                                Cras eu dui vel nulla cursus feugiat. Suspendisse sem purus, molestie quis diam ac,
 +
                                facilisis hendrerit elit. Morbi molestie ligula ut volutpat commodo. Donec ultrices,
 +
                                metus a adipiscing ultrices, risus nibh rutrum nibh, vel interdum quam justo nec
 +
                                nibh. Maecenas non orci a metus sollicitudin sollicitudin.
 +
                            </p>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
 +
<div class="portlet">
 +
                <div class="panel panel-primary-light-border">
 +
                    <div class="panel-heading clearfix">
 +
                        <div class="panel-caption">
 +
                            <h3 class="panel-title">Bootstrap Portlet 3</h3>
 +
                        </div>
 +
                        <div class="panel-options dark">
 +
                            <div class="panel-expand">
 +
                                <div class=""><i class="fa fa-chevron-down"></i></div>
 +
                            </div>
 +
                            <div class="panel-remove">
 +
                                <div class=""><i class="fa fa-times"></i></div>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                    <div style="display: none;" class="panel-body">
 +
                            <p class="justify">
 +
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ullamcorper
 +
                                dolor ut urna consectetur, id interdum purus pellentesque. Suspendisse fringilla
 +
                                nunc erat, nec consectetur nisi tristique nec. Etiam dignissim hendrerit vehicula.
 +
                                Cras eu dui vel nulla cursus feugiat. Suspendisse sem purus, molestie quis diam ac,
 +
                                facilisis hendrerit elit. Morbi molestie ligula ut volutpat commodo. Donec ultrices,
 +
                                metus a adipiscing ultrices, risus nibh rutrum nibh, vel interdum quam justo nec
 +
                                nibh. Maecenas non orci a metus sollicitudin sollicitudin.
 +
                            </p>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
</div>
 +
</div>
 +
 +
<div class="col-md-12">
 +
<div class="panel panel-primary-light-border">
 +
<div class="panel-heading"> <h3 class="panel-title">Useage</h3> </div>
 +
<div class="panel-body">
 +
<div class="bs-example">
 +
<p>Aspects to take note of are;</p>
 +
<pre><div class="panel-options dark"></pre>
 +
<p>Use the above for a light coloured title and the following for a dark colour.</p>
 +
<pre><div class="panel-options"></pre>
 +
<p>Also note the following which determine the open/close states;</p>
 +
<pre>
 +
<div style="display: block;" class="panel-body"> // panel open on page load
 +
<div style="display: none;" class="panel-body"> // panel closed on page load
 +
</pre>
 +
<p>Add the following to your articles and modify as required.</p>
 +
<pre>
 +
<div class="column clearfix">
 +
<div class="col-md-12 column sortable ui-sortable pull-right">
 +
            <div class="portlet">
 +
                <div class="panel panel-primary-light-border">
 +
                    <div class="panel-heading clearfix">
 +
                        <div class="panel-caption">
 +
                            <h3 class="panel-title">Cavila Portlet Overview</h3>
 +
                        </div>
 +
                        <div class="panel-options dark">
 +
                            <div class="panel-collapse">
 +
                                <div class=""><i class="fa fa-chevron-up"></i></div>
 +
                            </div>
 +
                            <div class="panel-remove">
 +
                                <div class=""><i class="fa fa-times"></i></div>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                    <div style="display: block;" class="panel-body">
 +
                    <p class="justify">Note the functionality, while not the same as tabs, it allows for large blocks of content in a
 +
    small space in the same way as tabs, but with additional functionality that would be difficult to accomplish with tabs.
 +
    Personally I prefer porlets to tabs, we've not looked at tabs yet because there were issues with linking, but if you're
 +
    insistent we can look at including them <i class="fa fa-smile-o"></i></p>
 +
    <p style="text-align:justify">As to portlet functionality note how they can be dragged and dropped to different locations, if
 +
    you select the it will remove a portlet and the chevrons open and close the panels. Panels can also be set to the
 +
    desired potion, either open or closed on page load.</p>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
 +
            <div class="portlet">
 +
                <div class="panel panel-primary-light-border">
 +
                    <div class="panel-heading clearfix">
 +
                        <div class="panel-caption">
 +
                            <h3 class="panel-title">Bootstrap Portlet 2</h3>
 +
                        </div>
 +
                        <div class="panel-options dark">
 +
                            <div class="panel-expand">
 +
                                <div class=""><i class="fa fa-chevron-down"></i></div>
 +
                            </div>
 +
                            <div class="panel-remove">
 +
                                <div class=""><i class="fa fa-times"></i></div>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                    <div style="display: none;" class="panel-body">
 +
                            <p class="justify">
 +
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ullamcorper
 +
                                dolor ut urna consectetur, id interdum purus pellentesque. Suspendisse fringilla
 +
                                nunc erat, nec consectetur nisi tristique nec. Etiam dignissim hendrerit vehicula.
 +
                                Cras eu dui vel nulla cursus feugiat. Suspendisse sem purus, molestie quis diam ac,
 +
                                facilisis hendrerit elit. Morbi molestie ligula ut volutpat commodo. Donec ultrices,
 +
                                metus a adipiscing ultrices, risus nibh rutrum nibh, vel interdum quam justo nec
 +
                                nibh. Maecenas non orci a metus sollicitudin sollicitudin.
 +
                            </p>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
 +
<div class="portlet">
 +
                <div class="panel panel-primary-light-border">
 +
                    <div class="panel-heading clearfix">
 +
                        <div class="panel-caption">
 +
                            <h3 class="panel-title">Bootstrap Portlet 3</h3>
 +
                        </div>
 +
                        <div class="panel-options dark">
 +
                            <div class="panel-expand">
 +
                                <div class=""><i class="fa fa-chevron-down"></i></div>
 +
                            </div>
 +
                            <div class="panel-remove">
 +
                                <div class=""><i class="fa fa-times"></i></div>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                    <div style="display: none;" class="panel-body">
 +
                            <p class="justify">
 +
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ullamcorper
 +
                                dolor ut urna consectetur, id interdum purus pellentesque. Suspendisse fringilla
 +
                                nunc erat, nec consectetur nisi tristique nec. Etiam dignissim hendrerit vehicula.
 +
                                Cras eu dui vel nulla cursus feugiat. Suspendisse sem purus, molestie quis diam ac,
 +
                                facilisis hendrerit elit. Morbi molestie ligula ut volutpat commodo. Donec ultrices,
 +
                                metus a adipiscing ultrices, risus nibh rutrum nibh, vel interdum quam justo nec
 +
                                nibh. Maecenas non orci a metus sollicitudin sollicitudin.
 +
                            </p>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
</div>
 +
</div>
 +
</pre>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="col-md-12">
 +
<div class="btn btn-default"><i class="fa fa-angle-double-left"></i> [[Features Guides|Back to Guides]]</div>
 +
</div>
 +
<div class="thumbnail and img-thumbnail" style="cursor: pointer;border:none;" data-toggle="modal" data-target="#bssCommercial">http://mediawikibootstrapskin.co.uk/images/bootstrapskin-commercial-skin.png</div>
 +
<div id="bssCommercial" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 +
      <div class="modal-dialog">
 +
        <div class="modal-content">
 +
          <div class="modal-header">
 +
            <div class="close" data-dismiss="modal" aria-hidden="true">×</div>
 +
            <h4 class="modal-title" id="myModalLabel">Our Commercial Skins</h4>
 +
          </div>
 +
          <div class="col-md-12">
 +
            <p class="text-justify" style="margin-top:10px;">We have two ultra smooth commercial skins - Nexus and Halcyon - which are available free of charge to applicable organisations or by making a donation of just £20 (approx $32/&euro;26) per skin.</p>
 +
          <p class="text-justify">View demo's of [http://www.mediawikibootstrapskin.co.uk/halcyon/index.php?title=Main_Page Halcyon] and [http://www.mediawikibootstrapskin.co.uk/nexus/index.php?title=Main_Page Nexus].</p>
 +
<div class="col-md-6 pull-left">
 +
<div class="thumbnail img-thumbnail" style="border:none;float:left;">http://images-cdn.ecwid.com/images/738455/244138447.jpg</div></div>
 +
<div class="col-md-6 pull-right">
 +
<div class="thumbnail img-thumbnail" style="border:none;float:left;">http://images-cdn.ecwid.com/images/738455/244138487.jpg</div></div>
 +
          </div>
 +
          <div class="modal-footer" style="border-top: transparent;">
 +
            <div class="btn btn-primary">[http://www.mediawikibootstrapskin.co.uk/index.php?title=Special:SpecialShop#!/Halcyon-Skin/p/41528627/category=10721547 Purchase Halcyon]</div>
 +
            <div class="btn btn-primary">[http://www.mediawikibootstrapskin.co.uk/index.php?title=Special:SpecialShop#!/Nexus-Skin/p/41220409/category=10721547 Purchase Nexus]</div>
 +
            <div class="btn btn-default" data-dismiss="modal">Close</div>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
<div class="col-md-12">
 +
<div class="text-center hidden-xs" style="margin-left:30%;margin-bottom:20px;"><div class="fb-follow" style="margin-right:5px;" data-href="https://www.facebook.com/bootstrapskin" data-colorscheme="light" data-layout="button" data-show-faces="false"></div><div class="fb-like" data-href="http://www.mediawikibootstrapskin.co.uk/" data-layout="standard" data-action="like" data-show-faces="false" data-share="true" data-colorscheme="light"></div></div>
  
 
<div class="btn btn-lg btn-info" data-toggle="popover" data-placement="right" title="Pop Over" data-content="And here's some amazing content. It's very engaging. right?" role="button" data-original-title="A Title">Click to toggle popover</div>
 
<div class="btn btn-lg btn-info" data-toggle="popover" data-placement="right" title="Pop Over" data-content="And here's some amazing content. It's very engaging. right?" role="button" data-original-title="A Title">Click to toggle popover</div>

Version vom 27. August 2015, 20:44 Uhr

Zeit

Ziel

Inhalt

Methode

00. Minute

T1-A0 Studierende benennen und reflektieren die aus ihrer Sicht relevanten Faktoren, die bei der Gestaltung von Technik zu berücksichtigen sind.
T4-A3 Studierende analysieren und bewerten Methoden zum Umgang mit Risiken, Gefahren und Unsicherheiten auf Grund unvollständiger und überkomplexer Informationen über das Wechselverhältnis von Technik, Natur, Individuen und Gesellschaft.

Die Studierenden schreiben auf Zettel Faktoren auf, die aus ihrer persönlichen Sicht bei der Gestaltung von Technik beachtet werden sollten. HIerfür kann der Aufgabenzettel genutzt werden.

Für diese Aufgabe wird ein Zettel ausgefüllt. Für diese Aufgabe wird ein Zettel ausgefüllt. Für diese Aufgabe wird ein Zettel ausgefüllt. Für diese Aufgabe wird ein Zettel ausgefüllt. Für diese Aufgabe wird ein Zettel ausgefüllt. Für diese Aufgabe wird ein Zettel ausgefüllt.

20. Minute

T1-A0 Studierende benennen und reflektieren die aus ihrer Sicht relevanten Faktoren, die bei der Gestaltung von Technik zu berücksichtigen sind.
T4-A3 Studierende analysieren und bewerten Methoden zum Umgang mit Risiken, Gefahren und Unsicherheiten auf Grund unvollständiger und überkomplexer Informationen über das Wechselverhältnis von Technik, Natur, Individuen und Gesellschaft.
T4-A3 Studierende analysieren und bewerten Methoden zum Umgang mit Risiken, Gefahren und Unsicherheiten auf Grund unvollständiger und überkomplexer Informationen über das Wechselverhältnis von Technik, Natur, Individuen und Gesellschaft.
T4-A3 Studierende analysieren und bewerten Methoden zum Umgang mit Risiken, Gefahren und Unsicherheiten auf Grund unvollständiger und überkomplexer Informationen über das Wechselverhältnis von Technik, Natur, Individuen und Gesellschaft.
T4-A3 Studierende analysieren und bewerten Methoden zum Umgang mit Risiken, Gefahren und Unsicherheiten auf Grund unvollständiger und überkomplexer Informationen über das Wechselverhältnis von Technik, Natur, Individuen und Gesellschaft.
T4-A3 Studierende analysieren und bewerten Methoden zum Umgang mit Risiken, Gefahren und Unsicherheiten auf Grund unvollständiger und überkomplexer Informationen über das Wechselverhältnis von Technik, Natur, Individuen und Gesellschaft.

Die Studierenden schreiben auf Zettel Faktoren auf, die aus ihrer persönlichen Sicht bei der Gestaltung von Technik beachtet werden sollten. HIerfür kann der Aufgabenzettel genutzt werden.

Für diese Aufgabe wird ein Zettel ausgefüllt.

30. Minute

T1-A0 Studierende benennen und reflektieren die aus ihrer Sicht relevanten Faktoren, die bei der Gestaltung von Technik zu berücksichtigen sind.
T4-A3 Studierende analysieren und bewerten Methoden zum Umgang mit Risiken, Gefahren und Unsicherheiten auf Grund unvollständiger und überkomplexer Informationen über das Wechselverhältnis von Technik, Natur, Individuen und Gesellschaft.
T4-A3 Studierende analysieren und bewerten Methoden zum Umgang mit Risiken, Gefahren und Unsicherheiten auf Grund unvollständiger und überkomplexer Informationen über das Wechselverhältnis von Technik, Natur, Individuen und Gesellschaft.

Die Studierenden schreiben auf Zettel Faktoren auf, die aus ihrer persönlichen Sicht bei der Gestaltung von Technik beachtet werden sollten. HIerfür kann der Aufgabenzettel genutzt werden.

Für diese Aufgabe wird ein Zettel ausgefüllt. Die Studierenden schreiben auf Zettel Faktoren auf, die aus ihrer persönlichen Sicht bei der Gestaltung von Technik beachtet werden sollten. HIerfür kann der Aufgabenzettel genutzt werden.

40. Minute

Ziel

  • T1-A0 Studierende benennen und reflektieren die aus ihrer Sicht relevanten Faktoren, die bei der Gestaltung von Technik zu berücksichtigen sind.
  • T4-A3 Studierende analysieren und bewerten Methoden zum Umgang mit Risiken, Gefahren und Unsicherheiten auf Grund unvollständiger und überkomplexer Informationen über das Wechselverhältnis von Technik, Natur, Individuen und Gesellschaft.
  • T4-A3 Studierende analysieren und bewerten Methoden zum Umgang mit Risiken, Gefahren und Unsicherheiten auf Grund unvollständiger und überkomplexer Informationen über das Wechselverhältnis von Technik, Natur, Individuen und Gesellschaft.
  • T4-A3 Studierende analysieren und bewerten Methoden zum Umgang mit Risiken, Gefahren und Unsicherheiten auf Grund unvollständiger und überkomplexer Informationen.

Inhalt

Die Studierenden schreiben auf Zettel Faktoren auf, die aus ihrer persönlichen Sicht bei der Gestaltung von Technik beachtet werden sollten. HIerfür kann der Aufgabenzettel genutzt werden. Die Studierenden schreiben auf Zettel Faktoren auf, die aus ihrer persönlichen Sicht bei der Gestaltung von Technik beachtet werden sollten. HIerfür kann der Aufgabenzettel genutzt werden.

Methode

Für diese Aufgabe wird ein Zettel ausgefüllt. Für diese Aufgabe wird ein Zettel ausgefüllt. Für diese Aufgabe wird ein Zettel ausgefüllt. Für diese Aufgabe wird ein Zettel ausgefüllt. ür diese Aufgabe wird ein Zettel ausgefüllt. Für diese Aufgabe wird ein Zettel ausgefüllt.

A

50. Minute

Lernziel

T1-A0 Studierende benennen und reflektieren die aus ihrer Sicht relevanten Faktoren, die bei der Gestaltung von Technik zu berücksichtigen sind.
T4-A3 Studierende analysieren und bewerten Methoden zum Umgang mit Risiken, Gefahren und Unsicherheiten auf Grund unvollständiger und überkomplexer Informationen über das Wechselverhältnis von Technik, Natur, Individuen und Gesellschaft.
T4-A3 Studierende analysieren und bewerten Methoden zum Umgang mit Risiken, Gefahren und Unsicherheiten auf Grund unvollständiger und überkomplexer Informationen über das Wechselverhältnis von Technik, Natur, Individuen und Gesellschaft.

Inhalt

Die Studierenden schreiben auf Zettel Faktoren auf, die aus ihrer persönlichen Sicht bei der Gestaltung von Technik beachtet werden sollten. HIerfür kann der Aufgabenzettel genutzt werden. Die Studierenden schreiben auf Zettel Faktoren auf, die aus ihrer persönlichen Sicht bei der Gestaltung von Technik beachtet werden sollten. HIerfür kann der Aufgabenzettel genutzt werden.

Methode

Für diese Aufgabe wird ein Zettel ausgefüllt. Für diese Aufgabe wird ein Zettel ausgefüllt. Für diese Aufgabe wird ein Zettel ausgefüllt. Für diese Aufgabe wird ein Zettel ausgefüllt. ür diese Aufgabe wird ein Zettel ausgefüllt. Für diese Aufgabe wird ein Zettel ausgefüllt.





130. Minute

Lernziel

T1-A0 Studierende benennen und reflektieren die aus ihrer Sicht relevanten Faktoren, die bei der Gestaltung von Technik zu berücksichtigen sind.
T4-A3 Studierende analysieren und bewerten Methoden zum Umgang mit Risiken, Gefahren und Unsicherheiten auf Grund unvollständiger und überkomplexer Informationen über das Wechselverhältnis von Technik, Natur, Individuen und Gesellschaft.
T4-A3 Studierende analysieren und bewerten Methoden zum Umgang mit Risiken, Gefahren und Unsicherheiten auf Grund unvollständiger und überkomplexer Informationen über das Wechselverhältnis von Technik, Natur, Individuen und Gesellschaft.

Inhalt

Die Studierenden schreiben auf Zettel Faktoren auf, die aus ihrer persönlichen Sicht bei der Gestaltung von Technik beachtet werden sollten. HIerfür kann der Aufgabenzettel genutzt werden. Die Studierenden schreiben auf Zettel Faktoren auf, die aus ihrer persönlichen Sicht bei der Gestaltung von Technik beachtet werden sollten. HIerfür kann der Aufgabenzettel genutzt werden.

Methode

Für diese Aufgabe wird ein Zettel ausgefüllt. Für diese Aufgabe wird ein Zettel ausgefüllt. Für diese Aufgabe wird ein Zettel ausgefüllt. Für diese Aufgabe wird ein Zettel ausgefüllt. ür diese Aufgabe wird ein Zettel ausgefüllt. Für diese Aufgabe wird ein Zettel ausgefüllt.


Portlets

Portlets are another space saving feature which allows for large blocks of content in a small space in a similar fashio to Nav Tabs, though Portlets come with additional functionality.

Note how Portlets can be dragged and dropped to different locations, or if you select the "x" it will remove a Portlet and the chevrons open and close the panels. Panels can also be set to the desired postion, either open or closed on page load.

Bootstrap Portlet 2

Bootstrap Portlet 3

</div>

Useage

Aspects to take note of are;

<div class="panel-options dark">

Use the above for a light coloured title and the following for a dark colour.

<div class="panel-options">

Also note the following which determine the open/close states;

<div style="display: block;" class="panel-body"> // panel open on page load
<div style="display: none;" class="panel-body"> // panel closed on page load

Add the following to your articles and modify as required.

<div class="column clearfix"> 
<div class="col-md-12 column sortable ui-sortable pull-right">
            <div class="portlet">
                <div class="panel panel-primary-light-border">
                    <div class="panel-heading clearfix">
                        <div class="panel-caption">
                            <h3 class="panel-title">Cavila Portlet Overview</h3>
                        </div>
                        <div class="panel-options dark">
                            <div class="panel-collapse">
                                <div class=""><i class="fa fa-chevron-up"></i></div>
                            </div>
                            <div class="panel-remove">
                                <div class=""><i class="fa fa-times"></i></div>
                            </div>
                        </div>
                    </div>
                    <div style="display: block;" class="panel-body">
                    <p class="justify">Note the functionality, while not the same as tabs, it allows for large blocks of content in a
    small space in the same way as tabs, but with additional functionality that would be difficult to accomplish with tabs.
    Personally I prefer porlets to tabs, we've not looked at tabs yet because there were issues with linking, but if you're
    insistent we can look at including them <i class="fa fa-smile-o"></i></p>
    <p style="text-align:justify">As to portlet functionality note how they can be dragged and dropped to different locations, if
    you select the it will remove a portlet and the chevrons open and close the panels. Panels can also be set to the
    desired potion, either open or closed on page load.</p>
                    </div>
                </div>
             </div>

            <div class="portlet">
                <div class="panel panel-primary-light-border">
                    <div class="panel-heading clearfix">
                        <div class="panel-caption">
                            <h3 class="panel-title">Bootstrap Portlet 2</h3>
                        </div>
                        <div class="panel-options dark">
                            <div class="panel-expand">
                                <div class=""><i class="fa fa-chevron-down"></i></div>
                            </div>
                            <div class="panel-remove">
                                <div class=""><i class="fa fa-times"></i></div>
                            </div>
                        </div>
                    </div>
                    <div style="display: none;" class="panel-body">
                            <p class="justify">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ullamcorper
                                dolor ut urna consectetur, id interdum purus pellentesque. Suspendisse fringilla
                                nunc erat, nec consectetur nisi tristique nec. Etiam dignissim hendrerit vehicula.
                                Cras eu dui vel nulla cursus feugiat. Suspendisse sem purus, molestie quis diam ac,
                                facilisis hendrerit elit. Morbi molestie ligula ut volutpat commodo. Donec ultrices,
                                metus a adipiscing ultrices, risus nibh rutrum nibh, vel interdum quam justo nec
                                nibh. Maecenas non orci a metus sollicitudin sollicitudin. 
                            </p>
                        </div>
                    </div>
                </div>

<div class="portlet">
                <div class="panel panel-primary-light-border">
                    <div class="panel-heading clearfix">
                        <div class="panel-caption">
                            <h3 class="panel-title">Bootstrap Portlet 3</h3>
                        </div>
                        <div class="panel-options dark">
                            <div class="panel-expand">
                                <div class=""><i class="fa fa-chevron-down"></i></div>
                            </div>
                            <div class="panel-remove">
                                <div class=""><i class="fa fa-times"></i></div>
                            </div>
                        </div>
                    </div>
                    <div style="display: none;" class="panel-body">
                            <p class="justify">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ullamcorper
                                dolor ut urna consectetur, id interdum purus pellentesque. Suspendisse fringilla
                                nunc erat, nec consectetur nisi tristique nec. Etiam dignissim hendrerit vehicula.
                                Cras eu dui vel nulla cursus feugiat. Suspendisse sem purus, molestie quis diam ac,
                                facilisis hendrerit elit. Morbi molestie ligula ut volutpat commodo. Donec ultrices,
                                metus a adipiscing ultrices, risus nibh rutrum nibh, vel interdum quam justo nec
                                nibh. Maecenas non orci a metus sollicitudin sollicitudin. 
                            </p>
                        </div>
                    </div>
                </div>
</div>
</div>
Back to Guides
http://mediawikibootstrapskin.co.uk/images/bootstrapskin-commercial-skin.png
Click to toggle popover
Von „http://www.blue-engineering.org/index.php?title=MWTabelle&oldid=2610“