📜  如何在 bootstrap 中创建两个色调的横幅?

📅  最后修改于: 2021-10-29 05:55:31             🧑  作者: Mango

Bootstrap 是一个用于设计网页的 CSS 框架。由于其简单和易于实现,它是最广泛使用的 CSS 框架。 Bootstrap 与 HTML 和 JavaScript 一起使用以使网页具有交互性。横幅是网页中需要格外注意的部分。一个网页中可以有多个横幅,并且可以放置在网页的任何位置。 Bootstrap 中的横幅由 jumbotron 类表示。 Jumbotrons 具有预定义的样式,可以用作横幅。创建横幅的另一种方法是自定义样式的容器。 Bootstrap 的容器类也可用于创建任何高度和宽度的横幅。本文介绍了双色调横幅的创建,这意味着横幅由两种不同的颜色组成。以下示例展示了如何创建带有两种色调的横幅。

示例 1:在本示例中,我们使用自定义样式的容器类创建了横幅。容器类进一步分为行和列。该行由大小分别为 2 个单位和 10 个单位的两列组成。大小为 2 个单位的列被赋予一种颜色,另一列被赋予不同的背景颜色。第一列中会添加一个图标,第二列中会显示一条警告消息。在这个例子中,我们使用内联 CSS。这是垂直双色调横幅的示例。

代码实现:

HTML


  

    Banner
    
  
    

  

    
           
            
                                              
                           
                

Action Required

                

                    Your password is about to expire in                      7 days. Please set a new password.                 

               
        
    
                                     


HTML


  

    
  
    

  

    
        
            

Hello World!

            

                Welcome to GeeksForGeeks.             

           
           
            

                Explore our range of courses.                  Avail the exclusive offers!             

           
    
  


输出:

示例 2:在第二个示例中,我们使用了 jumbotron 类。横幅的高度和宽度与大屏幕的高度和宽度相同。 Jumbotron 被分成两个容器。容器高度不同但宽度相同。与下容器相比,上容器具有不同的颜色。对于此示例,我们在 HTML 文档的 head 部分的        

        
            

Hello World!

            

                Welcome to GeeksForGeeks.             

           
           
            

                Explore our range of courses.                  Avail the exclusive offers!             

           
    
  

输出: