栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > Bootstrap教程

Bootstrap教程(6)--使用面板

Bootstrap教程(6)--使用面板

1. 概述

Bootstrap的面板是使用较多的元素,通常可以包含标题、内容、脚注信息。

使用的场景非常广泛,例如使用面板来展示一则新闻的信息,标题部分可以显示新闻的标题,内容部分可以显示新闻的导语,而脚注部分可以显示新闻的发布时间。

2. 基本用法

一个完整的面板代码如下:

  				
标题部分
内容部分

对应效果如下:

注意面板也可只显示标题或者内容或者脚注部分。

3. 面板的不同样式

面板还有一些不同的样式类:

  • .panel-default
  • .panel-primary
  • .panel-success
  • .panel-info
  • .panel-warning
  • .panel-danger

例如我们采用.panel-primary时:

			
标题部分
内容部分

效果如下:

可见标题栏与边框颜色发生变化,而内容部分和脚注部分样式未变。

4. 小结

面板是Bootstrap中较为常用的组件,使用起来比较灵活,也可以根据情况选用不同样式的面板。

转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号