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!