Bootstrap 3 中的面板是什么？

面板是引导程序中的一个组件，它基本上是一个框架或容器，由文本、列表或表格等形式的一些内容组成，周围有一些填充。

面板支持多种内容。通过使用引导程序提供的不同类，也可以将标题、页脚或上下文替代项添加到面板中。

bootstrap 中一些主要的面板类如下：

• .panel-heading –向面板添加标题容器。
• .panel-footer –向面板添加页脚容器。
• .panel-group -它清除每个面板的底部边距。
• .card-body -它在面板中创建一个填充部分。

基本面板：基本引导面板可以通过使用需要创建面板的 HTML 代码的 div 标签中的.panel 类来创建，并且面板内的内容或正文应该在.panel-body 类中基本上在内容周围创建填充。此外，将.panel-default 类添加到面板的 div 标记中以设置面板的样式并制作实心边框。

    

        Panel content
    

在代码中包含以下样式表链接，以向面板添加基本样式和结构。

示例 1：在此示例中，我们使用 Bootstrap 创建一个基本面板。

HTML

 

 

    
 
    

 

    

        

            GeeksforGeeks
        
         
        

            

                Panel content 1
            
        
    

 

输出：

正如您在输出中看到的那样，已经创建了一个具有默认样式并在其内容周围有填充的基本面板。

示例 2：在此示例中，我们正在创建一个具有页眉和页脚容器的面板。

HTML

 

    
 
    

 

    

        

            GeeksforGeeks
        
         
        

            

                Panel Heading Container
            
            

                Panel content 1
            
            

                Panel content 2
            
            

                Panel content 3
            
            

                Panel Footer Container
            
        
    
 

 

输出：

正如您在输出中看到的那样，已经创建了一个面板，其中包含一个标题和页脚容器，内容周围有填充，即文本，并具有默认样式。

向面板添加上下文替代方案

我们可以使我们的面板对使用上下文类的用户更具吸引力和意义。

句法：

完整代码：

HTML

 

    
    
    
    
    Document

 

    Panels in Bootstrap 
    
        This the panel heading
        
            This is the Panel content
        
    
    
        This the panel heading
        
            This is the Panel content
        
    
    
        This the panel heading
        
            This is the Panel content
        
    
    
        This the panel heading
        
            This is the Panel content
        
    
    
        This the panel heading
        
            This is the Panel content
        
    
    

 

输出：

带桌子的面板

我们还可以在面板内添加表格，使其具有无缝设计。下面给出了一段类似的代码：

代码：

HTML

 

    
    
    
    
    Document

 

    Panels in Bootstrap 
    
        This the panel heading
        
            This is the Panel content
            
                
                    
                    
                    
                
                
                    
                    
                    
                
                
                    
                    
                    
                
                
                    
                    
                    
                
 
            CompanyProductCountryAppleIphoneUnited States of AmericaTataSteelIndiaSamsungElectronics GoodsKorea
        
 
    
 
    

 

输出：

支持的浏览器：

• 谷歌浏览器
• 微软边缘
• 苹果浏览器
• 勇敢的浏览器
• 火狐浏览器
• 歌剧