Bootstrap研究.docx
- 文档编号:7592619
- 上传时间:2023-01-25
- 格式:DOCX
- 页数:21
- 大小:611.90KB
Bootstrap研究.docx
《Bootstrap研究.docx》由会员分享,可在线阅读,更多相关《Bootstrap研究.docx(21页珍藏版)》请在冰豆网上搜索。
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.给下拉菜单中的
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.通过
6.
2.3.2:
范例代码
2.4:
输入框组
2.4.1:
使用方法
通过在基于文本的输入框前面,后面或是两边加上文字或按钮,可以扩展对表单的控制。
1.用带有.input-group-addon的.input-group,可以给.form-control前面或后面追加元素。
2.最好避免使用
3.不要直接将.input-group和.form-group混合使用,因为.input-group是一个独立的组件。
4.给.input-group添加标明尺寸的class,它自己和其中的内容都会自动调整尺寸。
一般来说没有必要给每个元素都重复添加尺寸class。
5.可以把复选框或单选框放在输入组里而不是文本前。
输入组的代码实现将在后面给出。
6.在输入组里使用附加按钮时,需要多加一层元素。
要用.input-group-btn包住按钮而不是.input-group-addon。
这是因为默认的浏览器样式不能被覆盖。
7.也可以在此添加带下拉菜单的按钮等,这些组件已在前面介绍。
2.4.2:
范例代码
2.5:
导航
2.5.1:
使用方法
可以实现导航栏,一般用于页面最上方,能够导航到其他链接。
1.Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分。
改变修饰类可以改变样式。
.nav-tabs类需要.nav基类
2.相同的HTML标记,用.nav-pills代替.nav-tabs便可以实现胶囊式标签页。
只要加上.nav-stacked便可以实现垂直排列。
3.在大于768px的屏幕上,通过.nav-justified可以很容易的让标签页或胶囊式标签呈现出同等宽度。
在小屏幕上,导航链接呈现堆叠样式。
4.对任何导航(包括标签页,pills,或列表,加入.disabled使链接为灰色且没有鼠标悬停效果。
5.添加一点额外HTML和JavaScript下拉菜单插件可以实现带下拉菜单的导航和带下拉菜单的胶囊式标签页。
2.5.2:
范例代码
2.6:
导航条
2.6.1:
使用方法
导航条是在您的应用或网站中作为导航标头的响应式元组件。
它们在移动设备上可以折叠(并且可开可关),且在可用的视口宽度增加时变为水平展开模式。
1.根据你所放在导航条上的内容的长度,可以调整导航条进入折叠模式和水平模式的阈值。
通过改变@grid-float-breakpoint变量的值或加入相应的媒体查询CSS代码均可实现这个需求。
2.响应式导航栏需要当前版本的Bootstrap的collapse插件。
3.如果要增强可访问性,一定要在每个导航条上加上role="navigation"。
4.将表单放置于.navbar-form之内可以呈现很好的垂直对齐,并在较窄的viewport中呈现折叠状态。
使用对齐选项可以确定其在导航条上出现的位置。
5.如果没有为输入框添加label标签,屏幕阅读器将会遇到问题。
对于导航条内的表单,可以通过.sr-onlyclass隐藏label标签。
6.对于不包含在
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Bootstrap 研究