Panels
While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.
Basic Sample
By default, all the .panel
does is apply some basic border and padding to contain some content.
Panel with heading
Easily add a heading container to your panel with .panel-heading
.
Panel title
Panel with footer
Wrap buttons or secondary text in .panel-footer
.
Header & Footer
Responsive panel sample, with features.
Panel title
Aliquam et ex accumsan, maximus nibh ac, sagittis magna. Nam et ante facilisis, venenatis ligula eleifend, convallis est. Vestibulum in pretium turpis. Nullam tincidunt turpis lacus, id convallis quam molestie quis. Quisque urna magna, vulputate et neque a, ullamcorper vestibulum enim. Pellentesque eros sapien, consectetur ac libero in, tincidunt placerat mauris. Morbi vel mi mollis, lobortis felis eget, mattis dui. Ut ultricies tortor non posuere egestas. Sed vestibulum feugiat sapien. Donec laoreet ex quis mi pellentesque ultrices. Suspendisse porta, elit sed gravida facilisis, leo lectus suscipit neque, at ullamcorper nibh nunc vel orci. Proin rutrum elit ante, at laoreet ante cursus a. Morbi ante nisi, rutrum eu turpis vel, dapibus ullamcorper sapien. Aenean in enim sed dui tincidunt interdum vulputate in sapien. Donec vitae sapien auctor, lobortis urna placerat, blandit odio.
Buttons
Use default buttons in ul.panel-btn
to get great styled panel buttons.
Aliquam et ex accumsan, maximus nibh ac, sagittis magna. Nam et ante facilisis, venenatis ligula eleifend, convallis est. Vestibulum in pretium turpis. Nullam tincidunt turpis lacus, id convallis quam molestie quis. Quisque urna magna, vulputate et neque a, ullamcorper vestibulum enim. Pellentesque eros sapien, consectetur ac libero in, tincidunt placerat mauris. Morbi vel mi mollis, lobortis felis eget, mattis dui. Ut ultricies tortor non posuere egestas. Sed vestibulum feugiat sapien. Donec laoreet ex quis mi pellentesque ultrices. Suspendisse porta, elit sed gravida facilisis, leo lectus suscipit neque, at ullamcorper nibh nunc vel orci. Proin rutrum elit ante, at laoreet ante cursus a. Morbi ante nisi, rutrum eu turpis vel, dapibus ullamcorper sapien. Aenean in enim sed dui tincidunt interdum vulputate in sapien. Donec vitae sapien auctor, lobortis urna placerat, blandit odio.
Collapse Panel
Use class handler .panel-collapse
to collapse panel.
Delete Panel
Use function dev_panel_remove(panel,callback);
to delete panel.