列表组组件,面板组件,响应式嵌入组件

一、列表组组件

列表组组件用于显示一组列表的组件

基本实例:

		
  • 我是第一行
  • 我是第二行
  • 我是第三行
  • 我是第四行

列表组组件,面板组件,响应式嵌入组件_第1张图片

列表项加上勋章

		
  • 我是第一行 10
  • 我是第二行

列表 链接和首选

		

第一行为首选状态

列表组组件,面板组件,响应式嵌入组件_第2张图片

第三行是鼠标悬停在上面的时候的状态

按钮式列表

		

样式和超链接的列表类似。

情景类

		
  • 我是第一行
  • 我是第二行

可以设置的颜色: success , warning,danger,info

自定义内容

			

我是标题

我是一段文本

二、面板组件

面板组件是一个存放内容的容器组件

基本实例:panel

		
这里是内容区域

列表组组件,面板组件,响应式嵌入组件_第3张图片

带标题的面板:panel-heading

		
这个是标题啊
这里是内容区域

列表组组件,面板组件,响应式嵌入组件_第4张图片

设置标题元素:panel-title

		

这是标题

这里是内容区域

和以上效果类似,标题字体大一号而已

带注脚的面板:panel-footer

		
这是标题
这里是内容区域

列表组组件,面板组件,响应式嵌入组件_第5张图片

情景效果

panel panel- default / success / warning / danger / info / primary 

表格类面板

		
这是标题
这里是内容区域
1 2 3
1 2 3

列表组组件,面板组件,响应式嵌入组件_第6张图片

列表类面板

		
这是标题
这里是内容区域
  • 1
  • 2
  • 3
  • 4
  • 5

列表组组件,面板组件,响应式嵌入组件_第7张图片

二、响应式嵌入组件

根据被嵌入内容的外部容器的宽度,自动创建一个固定的比例,从而让浏览器自动确定内容的尺寸,能够在各种设备上缩放

这些规则可以直接适用于