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
联系&投稿:service@evister.com
Twitter Bootstrap的更多相关文章
- 推荐13款优秀的Twitter Bootstrap JavaScript插件
Bootstrap是基于HTML,CSS和JavaScript的简洁灵活的流行前端框架及交互组件集,由微博先驱Twitter在2011年8月开源的整套前端解决解决方案,拥有非常完备和详尽的开发文档,有 ...
- 12个免费的 Twitter Bootstrap 后台模板
在互联网上提供很多免费的 Bootstrap 管理后台主题.所有你需要做的就是将它们下载并安装它们,这真的不是什么难事.问题是如何寻找到能够完美符合您的网站需求的主题.当然,你可以自己制作自定义的主题 ...
- 推荐15款最好的 Twitter Bootstrap 开发工具
Twitter Bootstrap 自从2011年最初发布到网上后,迅速成为 Web 领域最流行的响应式前端开发框架之一,是网页设计的优秀实践.Twitter Bootstrap 框架包含了众多的预定 ...
- Twitter Bootstrap 3.0 正式发布,更好地支持移动端开发
Twitter Bootstrap 3.0 终于正式发布了.这是一个圆滑的,直观的和强大的移动优先的前端框架,用于更快,更容易的 Web 开发.几乎一切都已经被重新设计和重建,更好的支持移动端设备. ...
- 11款扁平化设计的 Twitter Bootstrap 主题和模板
扁平化设计和 Bootstrap 框架是2013年网页设计领域的两大设计潮流.把这两者集合起来不是件容易的事情,使用下面这些主题和模板将节省我们的开发时间,因为我们可以修改已有的基础代码,而不是从零开 ...
- Twitter Bootstrap深受开发者喜爱的11大理由
Bootstrap,作为创新技术框架,使开发者.设计者更容易.更快捷.更出色地完成网站及应用的搭建工作.如果你还没有使用Twitter Bootstrap,建议你去了解一下.Bootstrap为开发者 ...
- 免费下载!Twitter Bootstrap V3 矢量界面素材
Bootstrap 3 Vector UI Kit 包含所有矢量格式的 Twitter Bootstrap 3 界面控制元素.Glyphicons 以及额外的一些界面素材,而且基本的图形元素都切好图了 ...
- 强大!基于拖放布局的 Twitter Bootstrap 网站生成器
强大!基于拖放布局的 Twitter Bootstrap 网站生成器 网址如下 http://www.layoutit.com/build http://demo.sc.chinaz.com/File ...
- 解决Twitter Bootstrap Tab URL链接问题
例如这样的一个Tabs 代码: <ul class="nav nav-tabs" id="myTab"> <li class="ac ...
随机推荐
- shellinabox基于web浏览器的终端模拟器
1. Shellinabox介绍 Shellinabox 是一个利用 Ajax 技术构建的基于 Web 浏览器的远程终端模拟器,也就是说安装了该软件之后,服务器端不需要开启 ssh服务,通过 Web ...
- 深入jQuery中的Callbacks()
引入 初看Callbacks函数很不起眼,但仔细一瞅,发现Callbacks函数是构建jQuery大厦的无比重要的一个基石.jQuery中几乎所有有关异步的操作都会用到Callbacks函数. 为什么 ...
- HTTP权威协议笔记-7.集成点:网关、隧道及中继
.8.1 网关 定义:网关类似与翻译器,它抽象出了一种能够到达资源的方法. 实用:网关可以自动将HTTP流量转换为其他协议,这样使用HTTP协议的一方就不需要了解其他协议,也可实现与其他程序或设备交互 ...
- SUID, SGID, SBIT
基本上SUID有这样的限制与功能: SUID权限仅对二进位程序(binaryprogram)有效,不能用在shellscript上面: 运行者对於该程序需要具有x的可运行权限: 本权限仅在运行该程序的 ...
- spring mvc学习笔记二:@RequestMapping
@RequestMapping RequestMapping是一个用来处理请求地址映射的注解,可用于类或方法上.用于类上,表示类中的所有响应请求的方法都是以该地址作为父路径. @RequestMapp ...
- redis的安装和启动
Windows下Redis的安装及PHP扩展使用 时间 2014-10-28 17:47:09 CSDN博客 原文 http://blog.csdn.net/wyqwclsn/article/de ...
- MdZ计算重调和特征值
>> [eigvH,eigv] = MdZ2grid3d(/,) eigvH = 6.8775e+003 eigv = 5.0224e+003 >> [eigvH,eigv] ...
- 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 ...
- Camtasia Studio屏幕录像安装与破解
Camtasia Studio汉化版是一款功能强大的屏幕录像工具,能在任何颜色模式下轻松地记录屏幕动作,包括影像.音效.鼠标移动轨迹.解说声音等.Camtasia Studio具有强大的视频播放和视频 ...
- [转]保护眼睛的Windows和IE、Firefox、谷歌等浏览器颜色设置
保护眼睛的Windows和IE.Firefox.谷歌等浏览器颜色设置 长时间在电脑前工作,窗口和网页上的白色十分刺眼,眼睛很容易疲劳,也容易引起头痛,其实我们可以通过设置Windows窗口和软件的颜 ...