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

Bootstrap提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。应用场景有博客评论、微博等。;多媒体对象还可以进行嵌套，一个多媒体对象中包含另外一个多媒体对象，可以把新的.media容器放到.media-body容器中，代码如下，效果如图所示。; 想将头像图片显示在右侧，可以media-body容器后添加图片; 媒体对象的结构要求很少，还可以在列表元素上使用这些类，在ul或者ol添加.list-unstyled从而删除浏览器默认列表样式，然后在li中添加.media元素块，也可以根据自己的需要进行间距调整。;任务总结;任务描述

利用Bootstrap的组件完成加关闭按钮的警告框效果。;警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供常见的上下反馈信息和提示,具有特殊的上下文样式。它们可以随意删除，并且可以有任何种类的标记。设置警报非常简单，从基本的alert类开始,有一些上下文类，可以使用的颜色有成功、信息、警告和危险等，如图所示。有几个类可用于内部内容,比如标题和链接。;尽管上面的这些类可以对信息进行着色以提供视觉指示，但是这些指示不会传达给辅助技术的用户，例如屏幕阅读器。因此如果某些内容很重要，请直接加入正文中，或者通过其他方式引用，例如使用.sr-only类隐藏这些必要的内容。

在这些警报中如果带有超链接，使用.alert-link类可以为带颜色的警告文本框中的链接添加加粗设置font-weight:700。下面以进行示例演示，效果如图6-72所示。; 在一个警示框中可以增加额外的HTML元素，比如标题、段落以及分隔线，标题可以使用alert-heading类修饰，比如下面的示例，效果如图6-73所示。;警报不需要的时候，可以选择关闭警报，使用.alert结合JavaScript，可以实现关闭效果。因为要结合JavaScript，所以先将scriptsrc=jquery.min.jstype=text/javascript/script和scriptsrc=bootstrap.jstype=text/javascript/script引入网页。

在容器中添加一个.close关闭按钮，使用button元素，以确保在所有设备上都能获得正确的行为响应，按钮上要增加data-dismiss=alert触发JavaScript动作，buttontype=“button”class=closedata-dismiss=alerttimes;/button。在右上角定义一个关闭按钮效果，则需要在容器中引用.alert-dismissible类。

.alert-dismissible.close{

position:absolute;

top:0;

right:0;

padding:0.75rem1.25rem;

color:inherit;

};如果想要要在关闭警报时有一些动画，请确保添加.fade和.show样式，如图6-74所示。

divclass=alertalert-successalert-dismissiblefadeshow

h4class=alert-heading标准体检/h4

p我们的标准体检提供超声波、x光和牙齿清洁。/p

hr

pclass=mb-0更多信息/p

buttontype=buttonclass=closedata-dismiss=alerttimes;/button

/div;任务总结

通过本次任务，我们知道设置警报用alert类再配合情景如成功、信息、警告和危险等一起使用，为用户提供上下文反馈信息。;任务描述

利用Bootstrap的.badge完成各种徽章效果。;.badge可以嵌在标题中，并通过标题样式来适配其元素大小，如图6-75所示。因为其本身是通过相对字体大小和em做单位的，所以有良好的弹性。;徽章可用作链接或按钮的一部分，以提供统计数字样式。

buttontype=“button”class=btnbtn-primary

通知spanclass=badgebadge-light6/span

/button

ahref=#class=btnbtn-primary

通知spanclass=badgebadge-light6/span

/a; 使用.badge-pill样式，可以使标签更加圆润（具体有较大的border-radius边框半径和水平padding），形成椭圆形胶囊标签，如图6-77所示。;.badge-*也可以在a元素上使用，实现悬停、焦点、状态等效果，如图6-78所示。;任务总结