案例复习飞蝗day05.pdfVIP

复习：

Bootstrap是一个HTML/CSS/JS框架，适用于移动设备优先的响应式网页开发。主要涉及：

HTML：为已有的H5扩展了自定义属性data-*

CSS:Reset+几千个class

JS:十几个jQuery的插件函数$(..).dropdown();

分为五部分：

(1)起步：安装模板Bootlint禁用

(2)全局CSS样式：按钮文本排版表格表单栅格系统

(3)组件：图标字体下拉导航导航条面包屑分页巨幕徽章对象按钮组well警告框进

度条

(4)插件：下拉警告框折叠

(5)定制

1.Bootstrap提供的jQuery插件——介绍

Bootstrap基于jQuery提供了十几个插件函数。一般都有两种调用方法：

(1)编程方式调用(编写JS)

$(...).dropdown();

(2)Bootstrap预定义扩展属性

adata-toggle=dropdown触发/a

2.Bootstrap提供的jQuery插件——页(tab)

ulclass=navnav-tabs

liadata-toggle=tabhref=#p1/a/li

/ul

divclass=tab-content

divclass=tab-paneid=p1/div

/div

3.Bootstrap提供的jQuery插件——几种框

(1)工具提示框data-toggle=tooltip

(2)弹出框data-toggle=popover

(3)警告框data-dismiss=alert关闭警告框

(4)模态框

modal：模态框，父子窗口间可以传递数据，且若子窗口不关闭，父窗口无法获得焦点——这样的子

窗口称为模态窗口。使用div模拟实现模态框必需的结构：

divclass=modal半透明遮罩层——固定定位/全屏

divclass=modal-dialog控制尺寸、定位层

divclass=modal-content边框、背景色、阴影

divclass=modal-header/div头部

divclass=modal-body/div主体

divclass=modal-footer/div尾部

/div

/div

/div

提示：模态框放在body的最后，且作为body的直接子元素

午间练习：完成用户模态框

3.Bootstrap提供的jQuery插件——轮播(Carousel)

最基本机构：

divclass=carouseldata-ride=carousel

divclass=carousel-inner

divclass=itemactiveimg/div

divclass=itemimg/div

/div

/div