如何创建带页脚的引导面板？

Bootstrap 是一个免费的开源工具，用于设计现代和响应式网站和 Web 应用程序。它是开发响应迅速且美观的网站的最受欢迎的工具。引导面板是有或没有边框的框。您可能希望将您的内容放在一些盒子中以获得独特的设计。因此，在本文中，我们将学习如何在我们的网站上实现面板以及如何自定义它。

方法：我们将创建一个 div 元素并使用.panel 和 .panel-default类来创建一个面板。 .panel-default创建一个面板，在 div 容器内的内容周围有一个边框。然后我们将分别使用 .panel-title 和 .panel-footer 类来实现标题和页脚。它们将被放置在div容器内。

在我们项目的 header 标签之间导入 Bootstrap CSS CDN。

语法：创建一个 div 元素并使用类 .panel 和 .panel-default。然后在其中放置另一个带有 .panel-body 的 div 元素。

    
Welcome

要更改颜色，我们可以使用其他格式的面板，例如

• 面板默认
• 面板主要
• 小组成功
• 面板警告
• 面板信息
• 面板危险

示例：现在我们将使用 .panel-heading .panel-title 类创建面板标题、面板标题和面板页脚，使用 .panel-footer 类创建页脚。通常，放置元素的层次结构首先是标题，然后是正文和页脚。在面板的主体内，我们放置面板标题和面板内容。

HTML

  

    
    
    

  

    
GeeksforGeeks
    

        
Welcome
        

            
Welcome
            

                GeeksforGeeks is the best
                website for programming.
            
        
        
Footer
    

  

输出：