《响应式页面设计》_项目6-任务6.4.pptxVIP

1、广告大块屏幕(jumbotron);在许多网站的顶部常用大屏幕高亮显示内容的一部分，使用Bootstrap的Jumbotron类很容易做到。也以选择Jumbotron-fluid类创建一个大屏幕，这是一个稍微不同的版本，占用父空间的全部空间，如果想要让广告大屏幕占满当前显示浏览器全屏、不带有圆角、无背景色就使用这个Jumbotron-fluid类，是大屏幕的流动模式，并在里面添加一个.container或.container-fluid即可。两个类的示例代码如下，效果如图6-24所示。

;divclass=container

divclass=jumbotron

h1JavaScript/h1

pclass=leadJavaScript是一种脚本语言,广泛用于Web应用开发,为网页添加各种动态功能。/p

hr

p通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。/p

pclass=lead

ahref=class=btnbtn-primarybtn-lg了解更多/a

/p

;Jumbotron有一个圆形的边缘，而且文本还会缩进一点。如果你想让屏幕上方空开一点距离，可以根据需要添加上外边距，比如mt-4等。

如果想要这个东西全宽，需要把它放在容器container外面，效果如图6-43所示。;jumbotron里边的内容放可以放在容器container（也可以使用container-fluid），其中的内容就会对准网格，如图6-44所示。;列表组可以很好的来设计列表和其他元素，如按钮和链接。列表组父类容器通常是div或ul标记，用.list-group修饰父类。在父类容器中创建一个序列，可以使用列表项创建列表组项，也可以使用按钮或锚标记。在样式方面,列表组项使用.list-group-item类修饰项目,同时可以使用活动样式.active或禁用样式.disabled。

注意，要使链接完全禁用,需要使用额外的JavaScript，禁用样式对按钮不起作用。使用button，也可以使用disabled属性而不是.disabledclass，a不支持disabled属性。

使用a或button来创建具有hover、禁用、悬停和活动状态的列表组，需要使用列表组项操作类.list-group-item-action。

;h2ul列表项/h2

ulclass=list-group

liclass=list-group-itemactiveFirstitem/li

liclass=list-group-itemdisabledSeconditem/li

liclass=list-group-itemThirditem/li

/ul

h2链接列表项/h2

divclass=list-group

ahref=#class=list-group-itemlist-group-item-actionFirstitem/a;可以使用情景式样式来设计具有状态背景和颜色的列表组，列表项目的颜色可以通过以下列来设置：.list-group-item-success,list-group-item-secondary,list-group-item-info,list-group-item-warning,.list-group-item-danger,list-group-item-dark和list-group-item-light。情景式class也可以使用.list-group-item-action样式，注意，在上述示例中，不存在hover样式指示器，事实上它是支持的，而且还支持e.active状态指示--我们可以应用它们在上下文情景列表组的项目上进行活动状态选择指示。;h2多种颜色列表项(使用超链接)/h2

divclass=list-group

ahref=#class=list-group-itemlist-group-item-primarylist-group-item-action主要列表项/a

ahref=#class=list-group-itemlist-group-item-secondary次要列表项/a

……

/div;ulclass=list-group

liclass=list-group-itemd-flexjustify-content-between

列表第1项

spanclass=badgebadge-primarybadge-pill14/span

/li

liclass=list-group-itemd-flexjustify-content-be