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 ...
随机推荐
- Python:常见操作字符串的函数
Python中提供了很多操作字符串的函数: string = "hello, my dear python!" string.capitalize() #将字符串中的第一个字母大写 ...
- Spring+Mybatis多数据源配置
一.配置文件 properties ds1.driverClassName=com.mysql.jdbc.Driver ds1.url=jdbc:mysql://192.168.200.130:330 ...
- 第一部分:C9高校、985和211、双一流
第一部分:C9高校.985和211.双一流 C9高校,包括:清北.复交.浙南.中科大西交大和哈工大.1998年5月4日,时任国家主席江.泽.民在庆祝北京大学建校100周年大会上代表中国共.产.党和中华 ...
- ng-style 的坑 - 对性能的影响
本文地址:http://www.cnblogs.com/jying/p/5633203.html 熟悉 angular 的前端对ng-style 一定不陌生,这个家伙可以绑定一个函数,使得我们可以在函 ...
- XtraBackup安装
1.从官网下载XtraBackup2.4.4. percona-xtrabackup-24-2.4.4-1.el6.x86_64.rpm 2.安装依赖包 yum -y install perl per ...
- asp.net TextBoxWatermark添加水印提示
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...
- centos编译安装apache
1.安装工具和依赖包 yum install unzipyum -y install pcre-develyum groupinstall "Development Tools" ...
- FastJSON 使用
FastJSON是一个Java语言编写的高性能,功能完善,完全支持http://json.org的标准的JSON库.多了不说了,百度一下一大把. 在此,简单的总结一下自己用过,测试过的方法. 如果使用 ...
- centos 安装 maven
1: 下载 maven 我采用的是 apache-maven-3.3.9-bin.tar.gz http://maven.apache.org/download.cgi 2: 解压 tar ...
- mysql 常用查询
1.unix时间戳的使用 unix_timesamp.from_unixtime 函数 和 datatime_format函数. // 从datetime 类型取做整形 unixtime时间戳; se ...