bootstrap panel用法 bootstrappanel|Bootstrap教程

本文概述

Boostrap面板示例

在Bootstrap中，面板是带边框的框，其元素周围有一些填充。当你要将DOM组件放在一个盒子中时，将使用面板组件。
< div> 元素中使用类.panel创建Bootstrap面板。面板内的内容具有.panel-body类。
通常，面板包含三个部分：

面板头
面板内容
面板页脚

Boostrap面板示例

< !DOCTYPE html> < html lang="en"> < head> < title>Panel< /title> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> < /head> < body>< div class="container"> < h1>Panel Example< /h1>< div class="panel panel-primary"> < div class="panel-heading"> < h3 class="panel-title">< strong>Panel title< /strong>< /h3> < /div> < div class="panel-body"> Panel content < /div> < div class="panel-footer"> < strong>Panel footer< /strong> < /div> < /div>< /div>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1512245R9-1.jpg">< /script> < /body> < /html>

Boostrap面板组
面板组用于将多个面板组合在一起。
对于面板组，你必须在其周围包裹一个< div> 和类.panel-group。
.panel-group类清除每个面板的底边距。
请参阅以下示例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Case< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/151224B45-3.jpg">< /script> < /head> < body> < div class="container"> < h2>Panel Group< /h2> < p>The panel-group class clears the bottom-margin. Try to remove the class and see what happens.< /p> < div class="panel-group"> < div class="panel panel-default"> < div class="panel-heading">Panel Header< /div> < div class="panel-body">Panel Content< /div> < /div> < div class="panel panel-default"> < div class="panel-heading">Panel Header< /div> < div class="panel-body">Panel Content< /div> < /div> < div class="panel panel-default"> < div class="panel-heading">Panel Header< /div> < div class="panel-body">Panel Content< /div> < /div> < /div> < /div>< /body> < /html>

具有上下文类的Bootstrap面板
上下文类（.panel-default，.panel-primary，.panel-success，.panel-info，.panel-warning或.panel-danger）用于为面板着色。
【bootstrap panel用法】例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Case< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/151224B45-3.jpg">< /script> < /head> < body> < div class="container"> < h2>Panels with Contextual Classes< /h2> < div class="panel-group"> < div class="panel panel-default"> < div class="panel-heading">Panel with panel-default class< /div> < div class="panel-body">Panel Content< /div> < /div>< div class="panel panel-primary"> < div class="panel-heading">Panel with panel-primary class< /div> < div class="panel-body">Panel Content< /div> < /div>< div class="panel panel-success"> < div class="panel-heading">Panel with panel-success class< /div> < div class="panel-body">Panel Content< /div> < /div>< div class="panel panel-info"> < div class="panel-heading">Panel with panel-info class< /div> < div class="panel-body">Panel Content< /div> < /div>< div class="panel panel-warning"> < div class="panel-heading">Panel with panel-warning class< /div> < div class="panel-body">Panel Content< /div> < /div>< div class="panel panel-danger"> < div class="panel-heading">Panel with panel-danger class< /div> < div class="panel-body">Panel Content< /div> < /div> < /div> < /div>< /body> < /html>