BootstrapComponents/Panel
De Semantic MediaWiki - Sandbox
Révision datée du 13 février 2018 à 11:11 par Oetterer (discussion | contributions)
→ Back to Bootstrap Components overview
Description
A panel in bootstrap is a bordered box with some padding around its content.
For available options to this component, please see the documentation on github.
Examples
Always visible
<bootstrap_panel heading="This is the panel headline" footer="And some footer text" color="danger">Lorem...</bootstrap_panel>
This is the panel headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim tempus augue ac dignissim. Suspendisse potenti. Vivamus tincidunt turpis ex, sed varius nisl vehicula vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam ut pulvinar ante. Duis pellentesque porttitor posuere. Praesent diam nisi, aliquet gravida tellus ac, dictum ultricies odio. Nullam quam dolor, venenatis iaculis elementum in, molestie in nulla. Mauris ut vehicula mi. Curabitur mollis sit amet nisl id tristique. Fusce semper feugiat urna, vitae efficitur ex aliquet ac. Duis nec posuere eros. Donec ex velit, pellentesque non lobortis blandit, congue at mi.
Collapsible
<bootstrap_panel collapsible heading="This is the panel headline" footer="And some footer text" color="success">Lorem...</bootstrap_panel>
This is the panel headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim tempus augue ac dignissim. Suspendisse potenti. Vivamus tincidunt turpis ex, sed varius nisl vehicula vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam ut pulvinar ante. Duis pellentesque porttitor posuere. Praesent diam nisi, aliquet gravida tellus ac, dictum ultricies odio. Nullam quam dolor, venenatis iaculis elementum in, molestie in nulla. Mauris ut vehicula mi. Curabitur mollis sit amet nisl id tristique. Fusce semper feugiat urna, vitae efficitur ex aliquet ac. Duis nec posuere eros. Donec ex velit, pellentesque non lobortis blandit, congue at mi.
Color variants
Panels support the following coler codes:
- default
- primary
- success
- info
- warning
- danger
This is a panel with color default
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim tempus augue ac dignissim. Suspendisse potenti. Vivamus tincidunt turpis ex, sed varius nisl vehicula vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam ut pulvinar ante. Duis pellentesque porttitor posuere. Praesent diam nisi, aliquet gravida tellus ac, dictum ultricies odio. Nullam quam dolor, venenatis iaculis elementum in, molestie in nulla. Mauris ut vehicula mi. Curabitur mollis sit amet nisl id tristique. Fusce semper feugiat urna, vitae efficitur ex aliquet ac. Duis nec posuere eros. Donec ex velit, pellentesque non lobortis blandit, congue at mi.
This is a panel with color primary
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim tempus augue ac dignissim. Suspendisse potenti. Vivamus tincidunt turpis ex, sed varius nisl vehicula vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam ut pulvinar ante. Duis pellentesque porttitor posuere. Praesent diam nisi, aliquet gravida tellus ac, dictum ultricies odio. Nullam quam dolor, venenatis iaculis elementum in, molestie in nulla. Mauris ut vehicula mi. Curabitur mollis sit amet nisl id tristique. Fusce semper feugiat urna, vitae efficitur ex aliquet ac. Duis nec posuere eros. Donec ex velit, pellentesque non lobortis blandit, congue at mi.
This is a panel with color success
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim tempus augue ac dignissim. Suspendisse potenti. Vivamus tincidunt turpis ex, sed varius nisl vehicula vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam ut pulvinar ante. Duis pellentesque porttitor posuere. Praesent diam nisi, aliquet gravida tellus ac, dictum ultricies odio. Nullam quam dolor, venenatis iaculis elementum in, molestie in nulla. Mauris ut vehicula mi. Curabitur mollis sit amet nisl id tristique. Fusce semper feugiat urna, vitae efficitur ex aliquet ac. Duis nec posuere eros. Donec ex velit, pellentesque non lobortis blandit, congue at mi.
This is a panel with color info
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim tempus augue ac dignissim. Suspendisse potenti. Vivamus tincidunt turpis ex, sed varius nisl vehicula vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam ut pulvinar ante. Duis pellentesque porttitor posuere. Praesent diam nisi, aliquet gravida tellus ac, dictum ultricies odio. Nullam quam dolor, venenatis iaculis elementum in, molestie in nulla. Mauris ut vehicula mi. Curabitur mollis sit amet nisl id tristique. Fusce semper feugiat urna, vitae efficitur ex aliquet ac. Duis nec posuere eros. Donec ex velit, pellentesque non lobortis blandit, congue at mi.
This is a panel with color warning
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim tempus augue ac dignissim. Suspendisse potenti. Vivamus tincidunt turpis ex, sed varius nisl vehicula vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam ut pulvinar ante. Duis pellentesque porttitor posuere. Praesent diam nisi, aliquet gravida tellus ac, dictum ultricies odio. Nullam quam dolor, venenatis iaculis elementum in, molestie in nulla. Mauris ut vehicula mi. Curabitur mollis sit amet nisl id tristique. Fusce semper feugiat urna, vitae efficitur ex aliquet ac. Duis nec posuere eros. Donec ex velit, pellentesque non lobortis blandit, congue at mi.
This is a panel with color danger
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim tempus augue ac dignissim. Suspendisse potenti. Vivamus tincidunt turpis ex, sed varius nisl vehicula vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam ut pulvinar ante. Duis pellentesque porttitor posuere. Praesent diam nisi, aliquet gravida tellus ac, dictum ultricies odio. Nullam quam dolor, venenatis iaculis elementum in, molestie in nulla. Mauris ut vehicula mi. Curabitur mollis sit amet nisl id tristique. Fusce semper feugiat urna, vitae efficitur ex aliquet ac. Duis nec posuere eros. Donec ex velit, pellentesque non lobortis blandit, congue at mi.
