Bootstrap的面板是使用较多的元素,通常可以包含标题、内容、脚注信息。
使用的场景非常广泛,例如使用面板来展示一则新闻的信息,标题部分可以显示新闻的标题,内容部分可以显示新闻的导语,而脚注部分可以显示新闻的发布时间。
2. 基本用法一个完整的面板代码如下:
标题部分
内容部分
对应效果如下:
注意面板也可只显示标题或者内容或者脚注部分。
面板还有一些不同的样式类:
- .panel-default
- .panel-primary
- .panel-success
- .panel-info
- .panel-warning
- .panel-danger
例如我们采用.panel-primary时:
标题部分
内容部分
效果如下:
可见标题栏与边框颜色发生变化,而内容部分和脚注部分样式未变。
面板是Bootstrap中较为常用的组件,使用起来比较灵活,也可以根据情况选用不同样式的面板。



