Twitter Bootstrap

Twitter 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预定义扩展属性

<a data-toggle="dropdown">触发</a>

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

<ul class="nav nav-tabs">

<li><a data-toggle="tab" href="#p1"></a></li>

</ul>

<div class="tab-content">

<div class="tab-pane" id="p1"></div>

</div>

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

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

(2)弹出框              data-toggle="popover"

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

(4)模态框

modal：模态框，父子窗口间可以传递数据，且若子窗口不关闭，父窗口无法获得焦点——这样的子窗口称为模态窗口。使用div模拟实现模态框必需的结构：

<div class="modal"> 半透明遮罩层——固定定位/全屏

<div class="modal-dialog"> 控制尺寸、定位层

<div class="modal-content"> 边框、背景色、阴影

<div class="modal-header"></div> 头部

<div class="modal-body"></div> 主体

<div class="modal-footer"></div> 尾部

</div>

</div>

</div>

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

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

最基本核心机构：

<div class="carousel" data-ride="carousel">

<div class="carousel-inner">

<div class="item active">img</div>

<div class="item">img</div>

</div>

</div>

易维（深圳）科技有限公司

多维你的世界

微信：EVisYOJOY

微博：http://weibo.com/EVisYOJOY

官网：http://www.evister.com/

联系&投稿：service@evister.com