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. Python:常见操作字符串的函数

    Python中提供了很多操作字符串的函数: string = "hello, my dear python!" string.capitalize() #将字符串中的第一个字母大写 ...

  2. Spring+Mybatis多数据源配置

    一.配置文件 properties ds1.driverClassName=com.mysql.jdbc.Driver ds1.url=jdbc:mysql://192.168.200.130:330 ...

  3. 第一部分:C9高校、985和211、双一流

    第一部分:C9高校.985和211.双一流 C9高校,包括:清北.复交.浙南.中科大西交大和哈工大.1998年5月4日,时任国家主席江.泽.民在庆祝北京大学建校100周年大会上代表中国共.产.党和中华 ...

  4. ng-style 的坑 - 对性能的影响

    本文地址:http://www.cnblogs.com/jying/p/5633203.html 熟悉 angular 的前端对ng-style 一定不陌生,这个家伙可以绑定一个函数,使得我们可以在函 ...

  5. XtraBackup安装

    1.从官网下载XtraBackup2.4.4. percona-xtrabackup-24-2.4.4-1.el6.x86_64.rpm 2.安装依赖包 yum -y install perl per ...

  6. asp.net TextBoxWatermark添加水印提示

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...

  7. centos编译安装apache

    1.安装工具和依赖包 yum install unzipyum -y install pcre-develyum groupinstall "Development Tools" ...

  8. FastJSON 使用

    FastJSON是一个Java语言编写的高性能,功能完善,完全支持http://json.org的标准的JSON库.多了不说了,百度一下一大把. 在此,简单的总结一下自己用过,测试过的方法. 如果使用 ...

  9. centos 安装 maven

    1: 下载 maven    我采用的是 apache-maven-3.3.9-bin.tar.gz http://maven.apache.org/download.cgi 2:  解压  tar ...

  10. mysql 常用查询

    1.unix时间戳的使用 unix_timesamp.from_unixtime 函数 和 datatime_format函数. // 从datetime 类型取做整形 unixtime时间戳; se ...