引导面板

📌 相关文章

📜 引导面板

📅 最后修改于: 2020-12-19 02:49:20 🧑 作者: Mango

在Bootstrap中，面板是带边框的框，其元素周围有一些填充。当您要将DOM组件放在一个盒子中时，将使用面板组件。

元素中使用类.panel创建Bootstrap面板。面板内的内容具有.panel-body类。

通常，面板包含三个部分：

面板头
面板内容
面板页脚

引导面板示例



  
     Panel
     
  
  


  Panel Example


  
    Panel title
  
  
    Panel content
  
  
    Panel footer

引导面板组

面板组用于将多个面板组合在一起。

对于面板组，您必须在其周围包裹一个

和类.panel-group。

.panel-group类清除每个面板的底边距。

请参阅以下示例：




  Bootstrap Case
  
  
  
  
  


 

  Panel Group
  The panel-group class clears the bottom-margin. Try to remove the class and see what happens.
  
    
      Panel Header
      Panel Content
    
    
      Panel Header
      Panel Content
    
    
      Panel Header
      Panel Content

具有上下文类的Bootstrap面板

上下文类(.panel-default，.panel-primary，.panel-success，.panel-info，.panel-warning或.panel-danger)用于为面板着色。

例：

 


  Bootstrap Case
  
  
  
  
  


 

  Panels with Contextual Classes
  
    
      Panel with panel-default class
      Panel Content
    

    
      Panel with panel-primary class
      Panel Content
    

    
      Panel with panel-success class
      Panel Content
    

    
      Panel with panel-info class
      Panel Content
    

    
      Panel with panel-warning class
      Panel Content
    

    
      Panel with panel-danger class
      Panel Content