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

Twitter Bootstrap的更多相关文章

  1. 推荐13款优秀的Twitter Bootstrap JavaScript插件

    Bootstrap是基于HTML,CSS和JavaScript的简洁灵活的流行前端框架及交互组件集,由微博先驱Twitter在2011年8月开源的整套前端解决解决方案,拥有非常完备和详尽的开发文档,有 ...

  2. 12个免费的 Twitter Bootstrap 后台模板

    在互联网上提供很多免费的 Bootstrap 管理后台主题.所有你需要做的就是将它们下载并安装它们,这真的不是什么难事.问题是如何寻找到能够完美符合您的网站需求的主题.当然,你可以自己制作自定义的主题 ...

  3. 推荐15款最好的 Twitter Bootstrap 开发工具

    Twitter Bootstrap 自从2011年最初发布到网上后,迅速成为 Web 领域最流行的响应式前端开发框架之一,是网页设计的优秀实践.Twitter Bootstrap 框架包含了众多的预定 ...

  4. Twitter Bootstrap 3.0 正式发布,更好地支持移动端开发

    Twitter Bootstrap 3.0 终于正式发布了.这是一个圆滑的,直观的和强大的移动优先的前端框架,用于更快,更容易的 Web 开发.几乎一切都已经被重新设计和重建,更好的支持移动端设备. ...

  5. 11款扁平化设计的 Twitter Bootstrap 主题和模板

    扁平化设计和 Bootstrap 框架是2013年网页设计领域的两大设计潮流.把这两者集合起来不是件容易的事情,使用下面这些主题和模板将节省我们的开发时间,因为我们可以修改已有的基础代码,而不是从零开 ...

  6. Twitter Bootstrap深受开发者喜爱的11大理由

    Bootstrap,作为创新技术框架,使开发者.设计者更容易.更快捷.更出色地完成网站及应用的搭建工作.如果你还没有使用Twitter Bootstrap,建议你去了解一下.Bootstrap为开发者 ...

  7. 免费下载!Twitter Bootstrap V3 矢量界面素材

    Bootstrap 3 Vector UI Kit 包含所有矢量格式的 Twitter Bootstrap 3 界面控制元素.Glyphicons 以及额外的一些界面素材,而且基本的图形元素都切好图了 ...

  8. 强大!基于拖放布局的 Twitter Bootstrap 网站生成器

    强大!基于拖放布局的 Twitter Bootstrap 网站生成器 网址如下 http://www.layoutit.com/build http://demo.sc.chinaz.com/File ...

  9. 解决Twitter Bootstrap Tab URL链接问题

    例如这样的一个Tabs 代码: <ul class="nav nav-tabs" id="myTab"> <li class="ac ...

随机推荐

  1. shellinabox基于web浏览器的终端模拟器

    1. Shellinabox介绍 Shellinabox 是一个利用 Ajax 技术构建的基于 Web 浏览器的远程终端模拟器,也就是说安装了该软件之后,服务器端不需要开启 ssh服务,通过 Web  ...

  2. 深入jQuery中的Callbacks()

    引入 初看Callbacks函数很不起眼,但仔细一瞅,发现Callbacks函数是构建jQuery大厦的无比重要的一个基石.jQuery中几乎所有有关异步的操作都会用到Callbacks函数. 为什么 ...

  3. HTTP权威协议笔记-7.集成点:网关、隧道及中继

    .8.1 网关 定义:网关类似与翻译器,它抽象出了一种能够到达资源的方法. 实用:网关可以自动将HTTP流量转换为其他协议,这样使用HTTP协议的一方就不需要了解其他协议,也可实现与其他程序或设备交互 ...

  4. SUID, SGID, SBIT

    基本上SUID有这样的限制与功能: SUID权限仅对二进位程序(binaryprogram)有效,不能用在shellscript上面: 运行者对於该程序需要具有x的可运行权限: 本权限仅在运行该程序的 ...

  5. spring mvc学习笔记二:@RequestMapping

    @RequestMapping RequestMapping是一个用来处理请求地址映射的注解,可用于类或方法上.用于类上,表示类中的所有响应请求的方法都是以该地址作为父路径. @RequestMapp ...

  6. redis的安装和启动

    Windows下Redis的安装及PHP扩展使用 时间 2014-10-28 17:47:09  CSDN博客 原文  http://blog.csdn.net/wyqwclsn/article/de ...

  7. MdZ计算重调和特征值

    >> [eigvH,eigv] = MdZ2grid3d(/,) eigvH = 6.8775e+003 eigv = 5.0224e+003 >> [eigvH,eigv] ...

  8. npm install 出现UNABLE_TO_GET_ISSUER_CERT_LOCALLY

    解决方式 As a workaround you can turn ssl checking off in your .npmrc 执行 npm config set strict-ssl false ...

  9. Camtasia Studio屏幕录像安装与破解

    Camtasia Studio汉化版是一款功能强大的屏幕录像工具,能在任何颜色模式下轻松地记录屏幕动作,包括影像.音效.鼠标移动轨迹.解说声音等.Camtasia Studio具有强大的视频播放和视频 ...

  10. [转]保护眼睛的Windows和IE、Firefox、谷歌等浏览器颜色设置

    保护眼睛的Windows和IE.Firefox.谷歌等浏览器颜色设置  长时间在电脑前工作,窗口和网页上的白色十分刺眼,眼睛很容易疲劳,也容易引起头痛,其实我们可以通过设置Windows窗口和软件的颜 ...