📜  如何在引导中创建两个音调的横幅?

📅  最后修改于: 2021-05-25 11:12:55             🧑  作者: Mango

Bootstrap是用于设计网页的CSS框架。由于它的简单性和易于实现性,它一直是使用最广泛的CSS框架。 Bootstrap与HTML和JavaScript一起使用,以使网页具有交互性。标语是网页中需要特别注意的部分。网页中可以有多个横幅,并且可以放置在网页中的任何位置。 Bootstrap中的标语由jumbotron类表示。巨无霸具有预定义的样式,可以用作横幅。创建横幅的另一种方法是自定义样式的容器。 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:在第二个示例中,我们利用了超大型飞机类。横幅的高度和宽度与超大副的高度和宽度相等。巨无霸分为两个容器。容器的高度不同但宽度相同。与下部容器相比,上部容器具有不同的颜色。对于此示例,我们在HTML文档的头部的        

        
            

Hello World!

            

                Welcome to GeeksForGeeks.             

           
           
            

                Explore our range of courses.                  Avail the exclusive offers!             

           
    
  

输出: