《bootstrap中文手册指南解析.pdf》由会员分享，可在线阅读，更多相关《bootstrap中文手册指南解析.pdf（9页珍藏版）》请在三一文库上搜索。
1、Bootstrap简易指南 看完使用手册后所作的笔记，可以当做简易使用指南使用。 1.框架 1.1 全局样式 使用 HTML5 的 doctype ，scaffolding.less中定义全局样式，从2开始使用normalize.css， 并使用 reset.less 进行简化 1.2 默认栅格系统 940px 宽12列栅格，使用 row 与 spanNUM 的 class 来控制，使用 offsetNUM 来控制偏移， 于 non-fluid 可以直接嵌套，提供了四种响应式方案 1.3 流动栅格系统 基于百分比，将row 改为 row-fluid 即可使用，内嵌注意宽度是按照父列的百分比进行
2、计算 的 1.4 自定义栅格 于 variables.css中改变变量，默认列12，宽 60px ，间隔 20px ，要保证响应性还得修改 responsive.less中内容 1.5 布局 container 为940px 居中， container-fluid则为流体布局 1.6 响应式设计 responsive.less中提供了一组media query ： 智能手机 =480px ；流式列，非固定宽度 垂直平板 =767px ；流式列，非固定宽度 水平平板 =768px ；42px 20px 默认 =980px ； ? ? ?60px ?20px 大分辨率 =1200px ； 70px
3、 30px 要求添加 meta 标签， 有诸如 .visible-phone等支持类 2.基础 CSS 2.1 排版 整个排版单位基于variables.less中baseFontSize与baseLineHeight两个变量； 强调： string 加粗， em 倾斜， abbr 缩写【 title 属性存放显示信息，.initialism 会减小缩略词 字体】 ，address 【使用 br 换行】 引用： blockquote 【cite 属性存放来源URL ，.pull-left 或 right 决定内容居左右】 ，small 用 于引言作者【会在内容前加入破折号】 列表： ul 无序
4、号有黑点，ul.unstyled无样式， ol 有数字序号， dl 描述， dl.dl-horizontal水平 描述 2.2 代码 code 行级代码， pre 块级【 ul，同样使用 .active 与.disabled ，页码对齐使用.pagination-centered 或.pagination-right，前后页ul.pager 【居于左右端li.previous与 li.next 】 3.3 行内标签 span.label默认样式， span.label.label-success成功等 3.4 标号 span.badge默认样式， span.badge.badge-succes
5、s等 3.5 排版 主角单元div.hero-unit中嵌套，标题h1，可以嵌入small ， 3.6 缩略项 ul.thumbnailsli.span*a.thumbnailimg链接图像， div.thumbnail块状内容 3.7 通知 基类 div.alert 【2.0 开始替代 .alert-message 】 ， 例子： div.alerta.close+strong， 加强 .alert-block 提供更大的padding 而.alert-heading修饰标题，语义强化.alert-error或 success 或 info 3.8 进度条 基本 div.progressdi
6、v.barstyle=“width:60%“，条纹效果div.progress.progress-striped【动 画效果加上 .active ，使用 css3 渐变动画，不支持ie】 ，语义加强 .progress-info或 success 等 3.9 杂项 消息墙 div.well ，关闭图标a.close 4 jQuery插件 4.1 对话框【 bootstrap-modal.js】 $().modal(backdrop:true背景 ,keyboard:true支持 ESC,show:true初始化显示 ) ， 触发设置data-toggle= ” modal ” 然后 data-
7、target= ” #foo” 或 href= “ #foo ” ， 对话框设置div.modal#foo即可： div.modal-headera.closedata-dismiss=“modal“+div.modal-body+div.modal-footer【显示 动画效果bootstrap-transition.js，对 .modal 应用 .fade 即可】 ，方法 .modal( “ toggle ” ) 或.modal( “ show ” )或 .modal( “ hide ” )，事件 show,shown,hide,hidden 4.2 下拉项【 bootstrap-drop
8、down.js】 样式应用导航栏与胶囊链接，方法$().dropdown() ，设置 data-toggle= ” dropdown ” 【也可以 使用 data-target= ” #foo ” 或 href= “ #foo” 来关联下拉项与链接】 4.3 滚动侦测【 bootstrap-scrollspy.js】 $( #navbar ).scrollspy() 标记添加data-spy= ” scroll ”【导航链接必须有href= ” #id” 且对应有dom#id 】 ，选项 offset【 默 认为 10】 4.4 可切换的标签页【bootstrap-tab.js】 方法 $(
9、#myTab ).tab( show ) 标签页需要设置data-target= #id 或 href= #id 标记添加data-toggle= ” tab ” 或 data-toggle= ” pill ” ， 事件 show 与 shown 【event.target指向激活标签， event.relatedT arget 指向之前激活的标 签】 4.5 工具提示【 bootstrap-tooltips.js】 $( #example ).tooltip(options) 中选项 animation:true ，placement: top ，selector ，title ， trig
10、ger: hover ，delay:show:num, hide:100 工具提示可以单独设置data- 属性实现与js 调用同样的功能，指定一个selector 即可【设置 rel=” tooltip ” 】 方法： .tooltip( show )?.tooltip( hide )?.tooltip( toggle ) 4.6 弹出提示【 bootstrap-popover.js】 $( #example ).popover(options)中选项 animation:true ， placement: top ，selector ， trigger: hover ，title， cont
11、ent ，delay 同样可以单独设置data-属性，方法也相同 4.7 通知消息【 bootstrap-alert.js】 $(“ .alert ” ).alert() 用在通知，对关闭按钮设置data-dismiss= ” alert ” 即可定时关闭 方法 $(“ .alert ” ).alert( close )，事件 close closed 4.8 按钮【 bootstrap-button.js】 应用在 btn 与 btn-group ，设置 data-toggle= ” button ” 与 data-toggle= ” button-checkbox” 与 data-togg
12、le= ” button-radio ” 样式 方法 $().button( toggle ) 按下 $().button( loading ) 载入文本data-loading-text属性中 $().button( reset )重置按钮状态 4.9 折叠手风琴【bootstrap-collapse.js】 $().collapse(toggle:false)，事件 show ，shown ，hide ，hidden 设置 data-toggle= “ collapse ” 和 data-target即可变为折叠式，data-target接收一个 css 选择 器以选取元素添加，元素上需要
13、添加.collapse ，默认打开用 .in 4.10 轮播【 bootstrap-carousel.js】 $().carousel(interval:5000, pause: hover ) 标记用 data- 属性提供前后翻页，data-slide= ” prev 或 next ”方法 .carousel( cycle 或 pause 或 number 或 prev 或 next ) 事件 slide ，slid 4.11 输入提醒【 bootstrap-typeahead.js】 $().typeahead(source:数据源 , items:8 列表显示个数, matcher:fn, sorter:fn, highlighter:fn)， 设置 data-provide= ” typeahead ” 5. LESS mixins.less中保存所有混合， 编译安装npm intall -g less uglify-js lessc ./lib/bootstrap.less bootstrap.css压缩使用 compress ， 引用 less.js 也可以重新编译.less 文件并进行本地存储 本文链接： ?http:/