Line 84: |
Line 84: |
| <div class="panel-heading clearfix"> | | <div class="panel-heading clearfix"> |
| <div class="panel-caption"> | | <div class="panel-caption"> |
| <h3 class="panel-title">Portlet Overview</h3> | | <h4 class="panel-title">INTRODUCTION TO THE LOW IMPACT DEVELOPMENT PLANNING AND DESIGN GUIDE</h4> |
| </div> | | </div> |
| <div class="panel-options dark"> | | <div class="panel-options dark"> |
| <div class="panel-collapse"> | | <div class="panel-expand"> |
| <div class="pointer"><i class="fa fa-chevron-up"></i></div> | | <div class="pointer"><i class="fa fa-chevron-down"></i></div> |
| </div> | | </div> |
| </div> | | </div> |
| </div> | | </div> |
| <div style="display: block;" class="panel-body"> | | <div style="display: none;" class="panel-body"> |
| <p class="justify">Note the functionality, while not the same as tabs, it allows for large blocks of content in a | | <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. | | small space in the same way as tabs, but with additional functionality that would be difficult to accomplish with tabs. |
Line 106: |
Line 106: |
| <div class="panel-heading clearfix"> | | <div class="panel-heading clearfix"> |
| <div class="panel-caption"> | | <div class="panel-caption"> |
| <h3 class="panel-title">Portlet Overview</h3> | | <h4 class="panel-title">INTEGRATING STORMWATER MANAGEMENT INTO THE PLANNING PROCESS</h4> |
| </div> | | </div> |
| <div class="panel-options dark"> | | <div class="panel-options dark"> |
| <div class="panel-collapse"> | | <div class="panel-expand"> |
| <div class="pointer"><i class="fa fa-chevron-up"></i></div> | | <div class="pointer"><i class="fa fa-chevron-down"></i></div> |
| </div> | | </div> |
| </div> | | </div> |
| </div> | | </div> |
| <div style="display: block;" class="panel-body"> | | <div style="display: none;" class="panel-body"> |
| <p class="justify">Note the functionality, while not the same as tabs, it allows for large blocks of content in a | | <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. | | small space in the same way as tabs, but with additional functionality that would be difficult to accomplish with tabs. |
Line 128: |
Line 128: |
| <div class="panel-heading clearfix"> | | <div class="panel-heading clearfix"> |
| <div class="panel-caption"> | | <div class="panel-caption"> |
| <h3 class="panel-title">Portlet Overview</h3> | | <h4 class="panel-title">THE LOW IMPACT DEVELOPMENT APPROACH</h4> |
| </div> | | </div> |
| <div class="panel-options dark"> | | <div class="panel-options dark"> |
| <div class="panel-collapse"> | | <div class="panel-expand"> |
| <div class="pointer"><i class="fa fa-chevron-up"></i></div> | | <div class="pointer"><i class="fa fa-chevron-down"></i></div> |
| </div> | | </div> |
| </div> | | </div> |
| </div> | | </div> |
| <div style="display: block;" class="panel-body"> | | <div style="display: none;" class="panel-body"> |
| <p class="justify">Note the functionality, while not the same as tabs, it allows for large blocks of content in a | | <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. | | small space in the same way as tabs, but with additional functionality that would be difficult to accomplish with tabs. |
Line 150: |
Line 150: |
| <div class="panel-heading clearfix"> | | <div class="panel-heading clearfix"> |
| <div class="panel-caption"> | | <div class="panel-caption"> |
| <h3 class="panel-title">Portlet Overview</h3> | | <h4 class="panel-title">DESIGN OF STRUCTURAL LOW IMPACT DEVELOPMENT PRACTICES FOR STORMWATER MANAGEMENT</h4> |
| </div> | | </div> |
| <div class="panel-options dark"> | | <div class="panel-options dark"> |
| <div class="panel-collapse"> | | <div class="panel-expand"> |
| <div class="pointer"><i class="fa fa-chevron-up"></i></div> | | <div class="pointer"><i class="fa fa-chevron-down"></i></div> |
| </div> | | </div> |
| </div> | | </div> |
| </div> | | </div> |
| <div style="display: block;" class="panel-body"> | | <div style="display: none;" class="panel-body"> |
| <p class="justify">Note the functionality, while not the same as tabs, it allows for large blocks of content in a | | <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. | | small space in the same way as tabs, but with additional functionality that would be difficult to accomplish with tabs. |
Line 168: |
Line 168: |
| </div> | | </div> |
| </div> | | </div> |
| <div class="portlet">
| | <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"> |
| <div class="panel-caption"> | | <div class="panel-caption"> |
| <h3 class="panel-title">Portlet Overview</h3> | | <h4 class="panel-title">MONITORING</h4> |
| </div> | | </div> |
| <div class="panel-options dark"> | | <div class="panel-options dark"> |
| <div class="panel-collapse"> | | <div class="panel-expand"> |
| <div class="pointer"><i class="fa fa-chevron-up"></i></div> | | <div class="pointer"><i class="fa fa-chevron-down"></i></div> |
| </div> | | </div> |
| </div> | | </div> |
| </div> | | </div> |
| <div style="display: block;" class="panel-body"> | | <div style="display: none;" class="panel-body"> |
| <p class="justify">Note the functionality, while not the same as tabs, it allows for large blocks of content in a | | <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. | | small space in the same way as tabs, but with additional functionality that would be difficult to accomplish with tabs. |
Line 189: |
Line 189: |
| </div> | | </div> |
| </div> | | </div> |
|
| | </div> |
| | |
| <div class="portlet"> | | <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"> |
| <div class="panel-caption"> | | <div class="panel-caption"> |
| <h3 class="panel-title">Bootstrap Portlet 2</h3> | | <h4 class="panel-title">TOOLS</h4> |
| </div> | | </div> |
| <div class="panel-options dark"> | | <div class="panel-options dark"> |
Line 201: |
Line 200: |
| <div class="pointer"><i class="fa fa-chevron-down"></i></div> | | <div class="pointer"><i class="fa fa-chevron-down"></i></div> |
| </div> | | </div> |
| <div class="panel-remove">
| | </div> |
| <div class="pointer"><i class="fa fa-times"></i></div>
| |
| </div>
| |
| </div>
| |
| </div> | | </div> |
| <div style="display: none;" class="panel-body"> | | <div style="display: none;" class="panel-body"> |
| <p class="justify">
| | <p class="justify">Note the functionality, while not the same as tabs, it allows for large blocks of content in a |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ullamcorper
| | small space in the same way as tabs, but with additional functionality that would be difficult to accomplish with tabs. |
| dolor ut urna consectetur, id interdum purus pellentesque. Suspendisse fringilla
| | Personally I prefer porlets to tabs.</p> |
| nunc erat, nec consectetur nisi tristique nec. Etiam dignissim hendrerit vehicula.
| | <p style="text-align:justify">As to portlet functionality note how they can be dragged and dropped to different locations, if |
| Cras eu dui vel nulla cursus feugiat. Suspendisse sem purus, molestie quis diam ac,
| | you select the <i class="fa fa-chevron-up"></i> it will close the portlet, selecting the <i class="fa fa-times"></i> will remove a portlet, whereas the <i class="fa fa-chevron-down"></i> will close the porlet. Panels can also be set to the |
| facilisis hendrerit elit. Morbi molestie ligula ut volutpat commodo. Donec ultrices,
| | desired potion, either open or closed on page load.</p> |
| 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 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="pointer"><i class="fa fa-chevron-down"></i></div>
| |
| </div>
| |
| <div class="panel-remove">
| |
| <div class="pointer"><i class="fa fa-times"></i></div>
| |
| </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> |