ch10-缩略图和警告框组件.ppt

第10章缩略图和警告框组件巨幕组件(jumbotron)页头组件缩略图组件警告框组件教学内容巨幕组件(jumbotron)一、巨幕组件(jumbotron)：巨幕组件主要是展示网站的关键性区域。1.在固定的范围内，有圆角divclass=container divclass=jumbotron h3案例1/h3 p案例1的内容/p /div/div巨幕组件(jumbotron)2.100%全屏，没有圆角divclass=jumbotron divclass=container h3案例2/h3 p案例2的内容/p /div /div?页头组件二、页头组件：增加一些空间。divclass=header h1网页标题的效果/h1/div缩略图组件三、缩略图组件：1.缩略图配合响应式布局说明：改变浏览器窗口宽度大小以显示响应式的特点，显示器屏幕显示4张，平板屏幕显示3张，手机屏幕显示2张。divclass=container divclass=row divclass=col-md-3col-sm-4col-xs-6 divclass=thumbnail ahref=#imgsrc=img/hippo1.jpg//a /div /div divclass=col-md-3col-sm-4col-xs-6 divclass=thumbnail imgsrc=img/hippo1.jpg/ /div /div divclass=col-md-3col-sm-4col-xs-6 divclass=thumbnail imgsrc=img/hippo1.jpg/ /div /div divclass=col-md-3col-sm-4col-xs-6 divclass=thumbnail imgsrc=img/hippo1.jpg/ /div /div/div/div2.添加自定义内容divclass=container divclass=row divclass=col-md-3col-sm-4col-xs-6 divclass=thumbnail ahref=#imgsrc=img/hippo1.jpg//a divclass=caption h3图片/h3 p图片的介绍信息/p /div /div /div divclass=col-md-3col-sm-4col-xs-6 divclass=thumbnail imgsrc=img/hippo1.jpg/ divclass=caption h3图片/h3 p图片的介绍信息/p /div /div/div divclass=col-md-3col-sm-4col-xs-6 divclass=thumbnail imgsrc=img/hippo1.jpg/ divclass=caption h3图片/h3 p图片的介绍信息/p /div /div/div divclass=col-md-3col-sm-4col-xs-6 divclass=thumbnail imgsrc=img/hippo1.jpg/ divclass=caption h3图片/h3 p图片的介绍信息/p /div /div /div/div/div?警告框组件四、警告框组件：警告框组件是一组预定义消息。1.基本警告框divclass=alertalert-success 这是一个警告框信息 /div2.带关闭按钮的警告框?Bootstrap?警告框（Alert）插件警告框（Alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息。使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能。用法可以有以下两种方式启用警告框的可取消（dismissal）功能：1）通过data属性：通过数据API（DataAPI）添加可取消功能，只需要向关闭按钮添加?data-dismiss=alert，就会自动为警告框添加关闭功能。2）通过JavaScript：通过JavaScript添加可取消功能：$(.alert).al