http://x.9tripod.com/wiki/zh/index.php?action=history&feed=atom&title=BootStrap_PortletsBootStrap Portlets - 版本历史2026-04-19T19:39:10Z本wiki的该页面的版本历史MediaWiki 1.28.0http://x.9tripod.com/wiki/zh/index.php?title=BootStrap_Portlets&diff=289&oldid=prevAdmin：创建页面，内容为“__NOTOC__ <div class="col-md-12 column sortable ui-sortable pull-right"> <div class="portlet"> <div class="panel panel-primary-light-bord...”2016-12-08T03:58:37Z<p>创建页面，内容为“__NOTOC__ <div class="col-md-12 column sortable ui-sortable pull-right"> <div class="portlet"> <div class="panel panel-primary-light-bord...”</p>
<p><b>新页面</b></p><div>__NOTOC__<br />
<div class="col-md-12 column sortable ui-sortable pull-right"><br />
<div class="portlet"><br />
<div class="panel panel-primary-light-border"><br />
<div class="panel-heading clearfix"><br />
<div class="panel-caption"><br />
<h3 class="panel-title">Portlets</h3><br />
</div><br />
<div class="panel-options dark"><br />
<div class="panel-collapse"><br />
<div class=""><i class="fa fa-chevron-up"></i></div><br />
</div><br />
<div class="panel-remove"><br />
<div class=""><i class="fa fa-times"></i></div><br />
</div><br />
</div><br />
</div><br />
<div style="display: block;" class="panel-body"><br />
<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><br />
<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><br />
</div><br />
</div><br />
</div><br />
<div class="portlet"><br />
<div class="panel panel-primary-light-border"><br />
<div class="panel-heading clearfix"><br />
<div class="panel-caption"><br />
<h3 class="panel-title">Bootstrap Portlet 2</h3><br />
</div><br />
<div class="panel-options dark"><br />
<div class="panel-expand"><br />
<div class=""><i class="fa fa-chevron-down"></i></div><br />
</div><br />
<div class="panel-remove"><br />
<div class=""><i class="fa fa-times"></i></div><br />
</div><br />
</div><br />
</div><br />
<div style="display: none;" class="panel-body panel-hidden"><br />
<p class="justify"><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ullamcorper<br />
dolor ut urna consectetur, id interdum purus pellentesque. Suspendisse fringilla<br />
nunc erat, nec consectetur nisi tristique nec. Etiam dignissim hendrerit vehicula.<br />
Cras eu dui vel nulla cursus feugiat. Suspendisse sem purus, molestie quis diam ac,<br />
facilisis hendrerit elit. Morbi molestie ligula ut volutpat commodo. Donec ultrices,<br />
metus a adipiscing ultrices, risus nibh rutrum nibh, vel interdum quam justo nec<br />
nibh. Maecenas non orci a metus sollicitudin sollicitudin. <br />
</p><br />
</div><br />
</div><br />
</div><br />
<div class="portlet"><br />
<div class="panel panel-primary-light-border"><br />
<div class="panel-heading clearfix"><br />
<div class="panel-caption"><br />
<h3 class="panel-title">Bootstrap Portlet 3</h3><br />
</div><br />
<div class="panel-options dark"><br />
<div class="panel-expand"><br />
<div class=""><i class="fa fa-chevron-down"></i></div><br />
</div><br />
<div class="panel-remove"><br />
<div class=""><i class="fa fa-times"></i></div><br />
</div><br />
</div><br />
</div><br />
<div style="display: none;" class="panel-body"><br />
<p class="justify"><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ullamcorper<br />
dolor ut urna consectetur, id interdum purus pellentesque. Suspendisse fringilla<br />
nunc erat, nec consectetur nisi tristique nec. Etiam dignissim hendrerit vehicula.<br />
Cras eu dui vel nulla cursus feugiat. Suspendisse sem purus, molestie quis diam ac,<br />
facilisis hendrerit elit. Morbi molestie ligula ut volutpat commodo. Donec ultrices,<br />
metus a adipiscing ultrices, risus nibh rutrum nibh, vel interdum quam justo nec<br />
nibh. Maecenas non orci a metus sollicitudin sollicitudin. <br />
</p><br />
</div><br />
</div><br />
</div><br />
</div><br />
<div class="col-md-12"> <br />
<h4 class="subtitle-black">Using Portlets</h4> <br />
<p>Aspects to take note of are;</p><br />
<pre><div class="panel-options dark"></pre><br />
<p>Use the above for a light coloured title and the following for a dark colour.</p><br />
<pre><div class="panel-options"></pre><br />
<p>Also note the following which determine the open/close states;</p><br />
<pre><br />
<div style="display: block;" class="panel-body"> // panel open on page load<br />
<div style="display: none;" class="panel-body"> // panel closed on page load<br />
</pre><br />
<p>Add the following to your articles and modify as required.</p><br />
<pre><br />
<div class="column clearfix"> <br />
<div class="col-md-12 column sortable ui-sortable pull-right"><br />
<div class="portlet"><br />
<div class="panel panel-primary-light-border"><br />
<div class="panel-heading clearfix"><br />
<div class="panel-caption"><br />
<h3 class="panel-title">Cavila Portlet Overview</h3><br />
</div><br />
<div class="panel-options dark"><br />
<div class="panel-collapse"><br />
<div class=""><i class="fa fa-chevron-up"></i></div><br />
</div><br />
<div class="panel-remove"><br />
<div class=""><i class="fa fa-times"></i></div><br />
</div><br />
</div><br />
</div><br />
<div style="display: block;" class="panel-body"><br />
<p class="justify">Note the functionality, while not the same as tabs, it allows for large blocks of content in a<br />
small space in the same way as tabs, but with additional functionality that would be difficult to accomplish with tabs.<br />
Personally I prefer porlets to tabs, we've not looked at tabs yet because there were issues with linking, but if you're<br />
insistent we can look at including them <i class="fa fa-smile-o"></i></p><br />
<p style="text-align:justify">As to portlet functionality note how they can be dragged and dropped to different locations, if<br />
you select the it will remove a portlet and the chevrons open and close the panels. Panels can also be set to the<br />
desired potion, either open or closed on page load.</p><br />
</div><br />
</div><br />
</div><br />
<div class="portlet"><br />
<div class="panel panel-primary-light-border"><br />
<div class="panel-heading clearfix"><br />
<div class="panel-caption"><br />
<h3 class="panel-title">Bootstrap Portlet 2</h3><br />
</div><br />
<div class="panel-options dark"><br />
<div class="panel-expand"><br />
<div class=""><i class="fa fa-chevron-down"></i></div><br />
</div><br />
<div class="panel-remove"><br />
<div class=""><i class="fa fa-times"></i></div><br />
</div><br />
</div><br />
</div><br />
<div style="display: none;" class="panel-body"><br />
<p class="justify"><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ullamcorper<br />
dolor ut urna consectetur, id interdum purus pellentesque. Suspendisse fringilla<br />
nunc erat, nec consectetur nisi tristique nec. Etiam dignissim hendrerit vehicula.<br />
Cras eu dui vel nulla cursus feugiat. Suspendisse sem purus, molestie quis diam ac,<br />
facilisis hendrerit elit. Morbi molestie ligula ut volutpat commodo. Donec ultrices,<br />
metus a adipiscing ultrices, risus nibh rutrum nibh, vel interdum quam justo nec<br />
nibh. Maecenas non orci a metus sollicitudin sollicitudin. <br />
</p><br />
</div><br />
</div><br />
</div><br />
<div class="portlet"><br />
<div class="panel panel-primary-light-border"><br />
<div class="panel-heading clearfix"><br />
<div class="panel-caption"><br />
<h3 class="panel-title">Bootstrap Portlet 3</h3><br />
</div><br />
<div class="panel-options dark"><br />
<div class="panel-expand"><br />
<div class=""><i class="fa fa-chevron-down"></i></div><br />
</div><br />
<div class="panel-remove"><br />
<div class=""><i class="fa fa-times"></i></div><br />
</div><br />
</div><br />
</div><br />
<div style="display: none;" class="panel-body"><br />
<p class="justify"><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ullamcorper<br />
dolor ut urna consectetur, id interdum purus pellentesque. Suspendisse fringilla<br />
nunc erat, nec consectetur nisi tristique nec. Etiam dignissim hendrerit vehicula.<br />
Cras eu dui vel nulla cursus feugiat. Suspendisse sem purus, molestie quis diam ac,<br />
facilisis hendrerit elit. Morbi molestie ligula ut volutpat commodo. Donec ultrices,<br />
metus a adipiscing ultrices, risus nibh rutrum nibh, vel interdum quam justo nec<br />
nibh. Maecenas non orci a metus sollicitudin sollicitudin. <br />
</p><br />
</div><br />
</div><br />
</div><br />
</div><br />
</div><br />
</pre><br />
</div></div>Admin