Bootstrap研究.docx

资源描述

Bootstrap研究.docx

《Bootstrap研究.docx》由会员分享，可在线阅读，更多相关《Bootstrap研究.docx（21页珍藏版）》请在冰豆网上搜索。

Bootstrap研究.docx

Bootstrap研究

Bootstrap使用研究

第一章：

综述

1.1：

简介

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。

它由Twitter的设计师MarkOtto和JacobThornton合作开发，是一个CSS/HTML框架。

Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目。

一般来说，使用Bootstrap来开发前端，能够使我们付出相对较少的工作而取得更好的效果。

1.2：

Bootstrap的文件形式

如果需要在项目中使用Bootstrap，则第一步是下载它。

Bootstrap提供了两种形式的压缩包，在下载下来的压缩包内可以看到以下目录和文件，这些文件按照类别放到了不同的目录内，并且提供了压缩与未压缩两种版本，可以根据自己的需求选择下载。

也可以下载源代码，一般来说，源代码包含了预先编译的CSS、JavaScript和图标字体文件，并且还有LESS、JavaScript和文档的源码。

1.3：

禁用响应式布局

Bootstrap会自动帮你针对不同的屏幕尺寸调整你的页面，使其在个尺寸屏幕上表现良好。

但有的时候可能不需要这一特性，这就需要我们自己去禁用这一特性，下面列出操作步骤：

1.移除此处提到的（或者不要添加）viewport。

2.通过为.container设置一个width值从而覆盖框架的默认width设置，例如width:

970px!

important;。

请确保这些设置全部放在默认的BootstrapCSS后面。

注意，你也可以略去!

important。

3.如果使用了导航条，需要移除所有导航条的折叠和展开行为。

4.对于栅格布局，额外增加.col-xs-*classe或替换掉.col-md-*和.col-lg-*。

不要担心，针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开。

其中若是针对IE8，则需要额外引入Respond.js文件方可以实现禁用响应式布局。

范例代码：

1.4：

浏览器支持情况

Bootstrap的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。

它对Chrome（Mac、Windows、iOS和Android）、Safari（只支持Mac和iOS版）、Firefox（Mac、Windows）、InternetExplorer、Opera（Mac、Windows）等主流浏览器支持比较好。

第二章：

Bootstrap插件

2.1：

下拉菜单

2.1.1：

使用方法

用于显示链接列表的可切换、有上下文的菜单。

JavaScript下拉菜单插件让它有交互性。

可以实现具有一定特效的下拉菜单。

1.将下拉菜单触发器和下拉菜单都包裹在.dropdown里，或者另一个声明了position:

relative;的元素。

然后添加组成菜单的HTML代码。

2.Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5doctype。

因此必须出现在项目的每个页面的开始部分。

3.bootstrap-dropdown.js为下拉菜单插件，必须被引入。

bootstrap.css为Bootstrap样式库，这是必不可少的。

引入jquery.js，因为Bootstrap插件是jquery插件，依赖于jquery。

4.要想使其真正成为下拉菜单有两种方法：

data属性或者js调用。

其中data属性方法只需要在激活元件上设置 data-toggle="dropdown"即可，而js调用方法则如上述代码所写那样即可。

5.给下拉菜单中的

加上.disabled实现禁用，即无法再被点击。

1.1.2：

范例代码

2.2：

按钮组

2.2.1：

使用方法

用按钮组把一组按钮放在同一行里。

通过可以使按钮插件可以设置为单选框或多选框样式。

1.按钮组中的工具提示和弹出框需要特别的设置：

当为.btn-group中的元素应用工具提示或弹出框时，必须指定container:

'body'选项，这样可以避免不必要的副作用（例如工具提示或弹出框触发时，会让页面元素变宽和/或失去圆角）。

2.把一系列的.btn按钮放入.btn-group便可以形成按钮组效果。

3.把一组组合进一个做成更复杂的组件，实现按钮工具栏。

4.如果需要改变尺寸大小，只需给.btn-group加上.btn-group-*，而不是给组中每个按钮都应用大小类。

5.如果希望把下拉菜单混合到一系列按钮中，就把.btn-group放入另一个.btn-group中便可以实现。

6.让一组按钮竖直显示而不是水平显示，可以通过设置来实现。

7.两端对齐的链接排列：

让一组按钮拉长为相同的尺寸，适应父元素的宽度。

对于按钮组中的按钮下拉菜单也同样适用。

2.2.2：

范例代码

2.2.3：

代码解释

1.默认显示是横向排列，如果希望按钮组纵向排列，则需要将其改为。

2.按钮组里面可以包含下拉菜单，其实现方式与之前介绍的使用方式一致。

2.3：

按钮式下拉菜单

2.3.1：

使用方法

实现按钮组的组成成分为下拉菜单，把任何按钮放入.btn-group然后加入正确的菜单标记，就可以做成下拉菜单触发器。

1.插件需求：

按钮下拉菜单需要你的版本的Bootstrap的下拉菜单插件。

2.主要包括以下2种样式：

单按钮下拉菜单（只要改变一些基本的标记，就能把按钮变成下拉菜单开关）和分裂式下拉菜单（分裂式按钮下拉菜单也需要同样的改变标记，但只要多一个分开的按钮）。

3.下拉菜单按钮适用所有尺寸的按钮，同一个按钮组中的按钮可以拥有不同的大小，只要为每一个按钮项设置不同的尺寸即可。

4.给父元素添加.dropup就能使触发的下拉菜单在元素上方，即向上弹出式菜单。

5.通过可以设置按钮的大小，其中btn-lg表示大、btn-sm表示小、btn-xs表示很小。

6.将最外层的div的class属性加上dropup后便可以实现向上弹出式菜单。

2.3.2：

范例代码

2.4：

输入框组

2.4.1：

使用方法

通过在基于文本的输入框前面，后面或是两边加上文字或按钮，可以扩展对表单的控制。

1.用带有.input-group-addon的.input-group，可以给.form-control前面或后面追加元素。

2.最好避免使用