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

Bootstrap提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。应用场景有博客评论、微博等。要创建一个多媒体对象，可以在容器元素上添加.media类，然后将多媒体内容放到子容器上，子容器需要添加.media-body类，然后添加外边距，内边距等效果。下面是一个基础的多媒体对象的应用代码，效果如图6-65所示。任务实施<divclass="media"> <imgsrc="../img/lanhuasmall01.jpg"class="mr-3"width="60px"> <divclass="media-body"> <h5>紫灵</h5>紫灵仙子是四季兰，叶子油绿，花大浓香。绿色的叶片配上紫色的花朵，别具新意。 </div></div>多媒体对象还可以进行嵌套，一个多媒体对象中包含另外一个多媒体对象，可以把新的.media容器放到.media-body容器中，代码如下，效果如图所示。<divclass="mediaborder"> <imgsrc="../img/lanhuasmall01.jpg"class="mr-3"width="60px"> <divclass="media-body"> <h5>紫灵</h5>紫灵仙子是四季兰，叶子油绿，花大浓香。绿色的叶片配上紫色的花朵，别具新意。 <divclass="mediaborder"> <imgsrc="../img/lanhuasmall02.jpg"class="mr-3"width="60px"> <divclass="media-body"> <h5>虞美人</h5>虞美人花朵艳丽，呈现深紫红色，很有观赏价值。 </div> </div> </div></div>

想将头像图片显示在右侧，可以media-body容器后添加图片

媒体对象中的媒体可以与flexbox流式布局一样，实现对齐到顶部、中间、底部，自由便利，只要在img对象加上.align-self-start/center/end等属性，就可以设置多媒体对象的图片显示位置。下面两张图予以演示。

媒体对象的结构要求很少，还可以在列表元素上使用这些类，在<ul>或者<ol>添加.list-unstyled从而删除浏览器默认列表样式，然后在li中添加.media元素块，也可以根据自己的需要进行间距调整。<ulclass="list-unstyled"> <liclass="media"> <imgsrc="../img/lanhuasmall01.jpg"class="mr-3"width="64"> <divclass="media-body"> <h5>紫灵</h5>紫灵仙子是四季兰，叶子油绿，花大浓香。 </div> </li> <liclass="mediamy-4"> <imgsrc="../img/lanhuasmall01.jpg"class="mr-3"width="64"> <divclass="media-body"> <h5>紫灵</h5>紫灵仙子是四季兰，叶子油绿，花大浓香。 </div> </li> <liclass="media"> <imgsrc="../img/lanhuasmall01.jpg"class="mr-3"width="64"> <divclass="media-body"> <h5>紫灵</h5>紫灵仙子是四季兰，叶子油绿，花大浓香。 </div> </li>·</ul>任务总结

媒体对象图文混排在页面中被广泛应用，通过本次任务的学习，知道了可以利用media、.media-body等实现，同时可以设置媒体的对齐方式，还可以在列表元素上使用这些类，从而达到多场合的布局效果。任务描述

利用Bootstrap的组件完成加关闭按钮的警告框效果。任务6.9使用alert实现警告提示框警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供常见的上下反馈信息和提示,具有特殊的上下文样式。它们可以随意删除，并且可以有任何种类的标记。设置警报非常简单，从基本的alert类开始,有一些上下文类，可以使用的颜色有成功、信息、警告和危险等，如图所示。有几个类可用于内部内容,比如标题和链接。任务实施<divclass="alertalert-primary">这是一个主要警报</div><divclass="alertalert-secondary">这是次要警报</div><divclass="alertalert-success">这是成功警报</div><divclass="alertalert-danger">这是危险警报</div><divclass="alertalert-warning">这是警告警报</div><divclass="alertalert-info">这是信息警报</div><divclass="alertalert-light">Thisisalightalert</div><divclass="alertalert-dark">Thisisadarkalert</div>尽管上面的这些类可以对信息进行着色以提供视觉指示，但是这些指示不会传达给辅助技术的用户，例如屏幕阅读器。因此如果某些内容很重要，请直接加入正文中，或者通过其他方式引用，例如使用.sr-only类隐藏这些必要的内容。在这些警报中如果带有超链接，使用.alert-link类可以为带颜色的警告文本框中的链接添加加粗设置font-weight:700。下面以进行示例演示，效果如图6-72所示。<divclass="alertalert-primary">

这是一个主要警报，并带有一个超链接

<ahref="#"class="alert-link">警报中带有alert-link的超链接</a></div>

在一个警示框中可以增加额外的HTML元素，比如标题、段落以及分隔线，标题可以使用alert-heading类修饰，比如下面的示例，效果如图6-73所示。<divclass="alertalert-success"> <h4class="alert-heading">标准体检</h4> <p>我们的标准体检提供超声波、x光和牙齿清洁。</p> <hr> <pclass="mb-0">更多信息</p></div>警报不需要的时候，可以选择关闭警报，使用.alert结合JavaScript，可以实现关闭效果。因为要结合JavaScript，所以先将<scriptsrc="jquery.min.js"type="text/javascript"></script>和<scriptsrc="bootstrap.js"type="text/javascript"></script>引入网页。在容器中添加一个.close关闭按钮，使用<button>元素，以确保在所有设备上都能获得正确的行为响应，按钮上要增加data-dismiss="alert"触发JavaScript动作，<buttontype=“button”class="close"data-dismiss="alert">×</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="button"class="close"data-dismiss="alert">×</button></div>任务总结

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

利用Bootstrap的.badge完成各种徽章效果。任务6.10应用徽章（badge）.badge可以嵌在标题中，并通过标题样式来适配其元素大小，如图6-75所示。因为其本身是通过相对字体大小和em做单位的，所以有良好的弹性。任务实施<h1>夏季清爽运动鞋<spanclass="badgebadge-secondary">New</span></h1><h2>夏季清爽运动鞋<spanclass="badgebadge-secondary">New</span></h2><h3>夏季清爽运动鞋<spanclass="badgebadge-secondary">New</span></h3><h4>夏季清爽运动鞋<spanclass="badgebadge-secondary">New</span></h4><h5>夏季清爽运动鞋<spanclass="badgebadge-secondary">New</span></h5><h6>夏季清爽运动鞋<spanclass="badgebadge-secondary">New</span></h6>徽章可用作链接或按钮的一部分，以提供统计数字样式。<buttontype=“button”class="btnbtn-primary">

通知<spanclass="badgebadge-light">6</span></button><ahref="#"class="btnbtn-primary">

通知<spanclass="badgebadge-light">6</span></a>加入以下的Class样式来定义.badge颜色、大小等的变化，如图6-76所示。<spanclass="badgebadge-primary">Primary</span><spanclass="badgebadge-secondary">Secondary</span><spanclass="badgebadge-success">Success</span><spanclass="badgebadge-danger">Danger</span><spanclass="badgebadge-warning">Warning</span><spanclass="badgebadge-info">Info</span><spanclass="badgebadge-light">Light</span><spanclass="badgebadge-dark">Dark</span>

使用.badge-pill样式，可以使标签更加圆润（具体有较大的border-radius边框半径和水平padding），形成椭圆形胶囊标签，如图6-77所示。<spanclass="badgebadge-pillbadge-primary">Primary</span><spanclass="badgebadge-pillbadge-secondary">Secondary</span><spanclass="badgebadge-pillbadge-success">Success</span><spanclass="badgebadge-pillbadge-danger">Danger</span><spanclass="badgebadge-pillbadge-warning">Warning</span><spanclass="badgebadge-pillbadge-info">Info</span><spanclass="badgebadge-pillbadge-light">Light</span><spanclass="badge