📌  相关文章
📜  Bootstrap-面板

📅  最后修改于: 2020-10-27 06:16:39             🧑  作者: Mango

 

本章将讨论Bootstrap面板。当您要将DOM组件放在一个盒子中时，使用面板组件。要获得基本面板，只需将类.panel添加到

元素中。还将类.panel-default添加到此元素，如以下示例所示-

现场演示

   

      This is a Basic panel

带标题的面板

有两种添加面板标题的方法-

  • 使用.panel-heading类可轻松将标题容器添加到面板中。
  • 将任何

    -

    与.panel-title类一起使用以添加预样式的标题。

以下示例演示了两种方式-

现场演示

   

      Panel heading without title
   

   
   

      Panel content
   






   

      

         Panel With title
      

   

   
   

      Panel content

带页脚的面板

您可以通过在包含类.panel-footer的

中包装按钮或辅助文本来向面板添加页脚。下面的示例演示了这一点。

现场演示

   

      This is a Basic panel
   

   
   
Panel footer

面板页脚在使用上下文变体时不会继承颜色和边框，因为它们并不意味着出现在前景中。

小组上下文替代

使用上下文状态类，例如panel-primary，panel-success，panel-info，panel-warning，panel-danger ，可以使panel对特定上下文更有意义。

现场演示

   

      
Panel title

   

   
   

      This is a Basic panel
   






   

      
Panel title

   

   
   

      This is a Basic panel
   






   

      
Panel title

   

   
   

      This is a Basic panel
   






   

      
Panel title

   

   
   

      This is a Basic panel
   






   

      
Panel title

   

   
   

      This is a Basic panel

桌子面板

要在面板中获取无边界表，请在面板中使用类.table 。假设存在一个包含.panel-body的

，我们在表格顶部添加一个额外的边框以进行分离。如果没有包含.panel-body的
，则组件将从面板标题移至表格而不会中断。

以下示例演示了这一点-

现场演示

   

      
Panel title

   

   
   

      This is a Basic panel
   

   
   

      

         Product
         Price 
      

      
      

         Product A
         200
      

      
      

         Product B
         400
      

   






   
Panel Heading

   
   

      

         Product
         Price 
      

      
      

         Product A
         200
      

      
      

         Product B
         400

具有列表组的面板

您可以在任何面板中包括列表组。通过将类.panel添加到

元素来创建面板。还将class .panel-default添加到此元素。现在，在此面板中包括您的列表组。您可以从“列表组”一章中学习创建列表组。

现场演示

   
Panel heading

   
   

      
This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content.

   

   
   
    
      
  • Free Domain Name Registration
    • 
      
  • Free Window Space hosting
    • 
      
  • Number of Images
    • 
      
  • 24*7 support
    • 
      
  • Renewal cost per year
    •