bootstrap中文手册指南
Bootstrap简易指南
看完使用手册后所作的笔记，可以当做简易使用指南使用。
1.框架
1.1全局样式
使用HTML5的doctype，scaffolding.less中定义全局样式，从2开始使用normalize.css，并使用reset.less进行简化
1.2默认栅格系统
940px宽12列栅格，使用row与span[NUM]的class来控制，使用offset[NUM]来控制偏移，于non-fluid可以直接嵌套，提供了四种响应式方案
1.3流动栅格系统
基于百分比，将row改为row-fluid即可使用，内嵌注意宽度是按照父列的百分比进行计算的
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 30px
要求添加meta标签，
initail-scale=1.0″>
有诸如.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无序号有黑点，ul.unstyled无样式，ol有数字序号，dl描述，dl.dl-horizontal水平描述
2.2代码
code行级代码，pre块级【<>需要转义，.pre-scrollable可以设置350px最大高度】，应用.prettyprint和.linenums来美化代码【使用google prettify】
table thead【tr】tbody【tr】tr【td或th】th【必须在thead之内】caption；
.table行之间有水平线分割【2.0开始为默认】 .table-borderd 【边角为圆角】.table-striped 奇偶分开【使用:nth-child ie7-8不支持】 .table-condensed 紧凑竖直方向padding减半几个可以组合使用
2.4表单
四种表单：.form-vertical【2.0后默认，控件标签文字左对齐】.form-inline【左对齐，控件inline-block】 .form-search【文本框圆化】 .form-horizontal【左浮动，标签与控件居于同一行且文字右对齐】
支持控件：文本输入框，单选，复选，下拉，多选，上传，文本域
控件组：.control-group .control-label以及.controls【默认label应该与控件在同一行？】
设计了各种控件状态【如focus，disabled，去除webkit的outline】，包
含.error .warning .success验证样式
扩张控件：.span*来指定输入框大小，使用.input-mini或small或medium或big来指定input 和select控件大小，2.0开始对.checkbox或.radio应用.inline即可实现行级，用
label.checkbox包含input[type=checkbox]即可罗列，前置或后置文本保证.add-on与input 在同行, .help-inline与.help-block设置帮助文本
2.5 按钮
可以应用到a button及input标签上，.btn .btn-primary .btn-info等样式【ie9不兼
容】，.btn-large small mini等尺寸，.disabled类或disabled属性可以禁用
2.6 图标
使用.icon-前缀设置，用x显示图标，用.icon-white显示反白图标，图标定义在sprites.less 中
3.1按钮
3.1.1按钮组
建议一个组里只用一种元素或
装.btn-group即可合成工具条组件
3.1.2按钮下拉菜单
下拉菜单也得嵌套在.btn-group中，使用dropdown-toggle与ul.dropdown-menu类，支持Bootstrap下拉插件，箭头使用.caret，.dropdown-menu最近父标签应用.dropup即可变为上弹菜单【会改变.caret箭头方向】
3.2导航
3.2.1默认项
基类.nav，对齐使用.pull-left或.pull-right【依赖float】，标签页ul.nav-tabs，胶囊链接ul.nav-pills
3.2.2叠放式导航
指竖直叠放ul.nav-stacked
3.2.3下拉项
综合使用下拉按钮【js下拉项插件】，参考3.1.2
3.2.4导航列表
使用标签，.pider空表项显示为水平间隔，.active选中项，.nav-header列表头
3.2.5 标签页切换导航
用.tabbale的p嵌套.nav-tabs，存放容器为.tab-content，内容页使用.tab-pane，标签置底用.tabs-below，标签居左.tabs-left，居右.tabs-right
3.2.6 导航条
固定导航条div.navbar与.navbar-fixed-top【必须预留40px或更多padding】，导航项ul.nav，li.pider-vertical分隔条，项目名称a.brand，表单.navbar-form，对form.navbar-search中输入框使用.search-query得到搜索框，下拉菜单参考3.2.3，导航条文本使用
，响应式嵌套在.nav-collapse.collapse并对按钮都应有.btn-navbar【需要js切换插件】
3.2.7面包屑导航
ul.breadcrumb
3.2.8页码
div.pagination>ul，同样使用.active与.disabled，页码对齐使用.pagination-centered
或.pagination-right，前后页ul.pager【居于左右端li.previous与li.next】
3.3行内标签
https://www.wendangku.net/doc/973232265.html,bel默认样式，https://www.wendangku.net/doc/973232265.html,bel-success成功等
3.4 标号
span.badge默认样式，span.badge.badge-success等
3.5 排版
主角单元div.hero-unit中嵌套，标题h1，可以嵌入small，
3.6 缩略项
ul.thumbnails>li.span*>a.thumbnail>img链接图像，div.thumbnail块状内容
3.7通知
基类div.alert【2.0开始替代.alert-message】，例子：div.alert>a.close+strong，加强.alert-block 提供更大的padding而.alert-heading修饰标题，语义强化.alert-error或success或info
3.8进度条
基本div.progress>div.bar[style="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-target=”#foo”或href=“#foo”，
对话框设置div.modal#foo即可：
div.modal-header>a.close[data-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-dropdown.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】
方法$(…#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，trigger:?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，content，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-toggle=”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选择器以选取元素添加，元素上需要添加.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文件并进行本地存储
本文链接：?https://www.wendangku.net/doc/973232265.html,/resource/3236.html
Bootstrap教程第一课：简单的Bootstrap主页
Bootstrap教程第一课：简单的Bootstrap主页（1） 写在前面： Bootstrap是目前最流行的前端框架，我从简单的实例开始，写一份文字版的Bootstrap教程，希望能对大家有所帮助。 准备工作： 1、下载Bootstrap框架核心文件。 2、下载jQuery文件。 3、下载HTML5兼容IE的JS插件。 （各位可以从网上找到Bootstrap和jQuery以及HTML5 JS的官方下载地址，也可以直接点击下面的下载链接下载，我已经将jQuery文件放在了js目录里了。）点击下载Bootstrap核心文件 HTML结构： 1、Bootstrap框架的文档必须声明为HTML5文件类型，所以你的每一个页面都必须按照下面的格式进行设置： ......
那么现在，你的HTML文档，应该是这个样子的：
这是一个简单的Bootstrap主页
这是一个简单的Bootstrap主页，制作这个主页，可 以分为三个步骤：黑马程序员UI教程：Bootstrap弹出框
黑马程序员UI教程：Bootstrap弹出框 使用过JQuery UI的园友们应该知道，它里面有一个dialog的弹出框组件，功能也很丰富。与jQuery UI的dialog类似，Bootstrap里面也内置了弹出框组件。打开bootstrap 文档https://www.wendangku.net/doc/973232265.html,/components/可以看到它的dialog是直接嵌入到bootstrap.js和bootstrap.css里面的，也就是说，只要我们引入了bootstrap的文件，就可以直接使用它的dialog组件，是不是很方便。本篇我们就结合新增编辑的功能来介绍下bootstrap dialog的使用。废话不多说，直接看来它如何使用吧。 1、c shtml界面代码
新增
《BootStrap开发技术》课程标准.doc
《bootstrap》课程标准 教研室主任： 专业带头人：系(部)主任：教务处处长： 教学副院长： 审核批准日期： 二○一七年五月
《bootstrap》课程标准 （基本信息） 课程编码： 课程类别：专业方向课程 适应专业：网页设计 开设时间：大三上期 学时数：56学时 一、课程概述 （一）课程性质 Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。本教程将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和Bootstrap 插件几个部分。每个部分都包含了与该主题相关的
简单有用的实例。 （二）课程基本理念 本课程通过企业项目开发流程为情景，学习并掌握BootStrap 开发的基础知识和基本开发技能。学生在学习本课程后具有一定的专业能力，可激发学生对后续专业课程的学习兴趣。课程结构上遵循企业 开发“流程化”、项目“兴趣化”、教学“项目实战化”、模式“前瞻化”、教材“权威化”、授课“案例化”等国内领先的IT工程师培养模式，并且结合科学的考核评价模式。通过全方位课程设计、全真的工作环境、探索研究工学结合的培养模式，提高学生职业技能，最终实现岗位无缝对接。 （三）课程的设置与设计思路 本课程立足于培养学生的动手实践能力，教学活动基本上围绕着职业导向而进行，对课程内容的选择标准进行创造性的根本改革，打破以书本知识传授为主要特征的传统学科课程模式，转变为以工作情景任务为中心组织课程内容和实施课程教学，让学生在完成具体项目的过程中发展职业能力并掌握相关理论知识，真正做到学以致用，从而发展职业能力。 本课程的框架结构，经过与企业专家系统的讨论分析，按实际需要及由简入繁的原则，最终确定了学习培养标准。最终达到掌握BootStrap主流框架的目标，本课程共80课时，其中实践50课时。
BootStrap入门教程
本作品由VentLam创作，采用知识共享署名-非商业性使用-相同方式共享2.5 中国大陆许可协议进行许可。 BootStrap入门教程(一) 2011年，twitter的“一小撮”工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所设计和建立，在github上开源之后，迅速成为该站上最多人watch&fork的项目。大量工程师踊跃为该项目贡献代码，社区惊人地活跃，代码版本进化非常快速，官方文档质量极其高(可以说是优雅)，同时涌现了许多基于Bootstrap建设的网站：界面清新、简洁;要素排版利落大方。如下图所示： https://https://www.wendangku.net/doc/973232265.html,/ http://www.fleetio.co m/
GitHub上这样介绍bootstrap：简单灵活可用于架构流行的用户界面和交互接口的html,css,javascript工具集。基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档，自定义JQuery插件，完整的类库，基于Less等。本系列教程遵循官方文档结构来介绍bootstrap，包括手脚架（Scaffolding),基础CSS,组件,javascript插件，使用LESS与自定义.本文主要介绍Boo tstrap的基础布局--Scaffolding. Bootstrap建立了一个响应式的12列格网布局系统，它引入了fixed和fluid-with两种布局方式。我们从全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts),响应式设计(Responsive Design)这六五个方面深入讲解Boostrap的scaffolding. 全局样式(Global Style).Bootstrap要求html5的文件类型，所以必须在每个使用bootstrap页面的开头都引用: ...
Bootstrap笔试题教程文件
一、单选题（针对以下题目，请选择最符合题目要求的答案。针对每一道题目，所有答案都选对，则该题得分，所选答案错误或不能选出所有答案，则该题不得分。每题2.5分，共80分。） 1. Bootstrap 插件全部依赖是（） A.JavaScript B.JQuery C.Angular JS D.Node JS 2. 栅格系统小屏幕使用的类前缀是（） A. .col-xs- B. .col-sm- C. .col-md- D. .col-lg- 3. 如下代码中，想要在超小屏幕和小屏幕显示两列，在中屏幕和大屏幕显示三列,三个div的class正确的写法是（）
B. col-sm-6 col-lg-4，col-sm-6 col-lg-4，col-sm-6 col-lg-4 C. col-xs-6 col-lg-4，col-xs-6 col-lg-4，col-xs-6 col-lg-4 D. col-xs-6 col-md-4，col-xs-6 col-md-4，col-xs-6 col-md-4 4. 下面可以实现列偏移的类是（） A..col-md-offset-* B. .col-md-push-* C. .col-md-pull-* D. .col-md-move-* 5.表单元素要加上什么类，才能给表单添加圆角属性，和阴影效果（） A.form-group B.form-horizontal C.form-inline D. form-control 6.img-responsive类可以让图片支持响应式布局,它的实现原理是（） A.设置了max-width: 100%;和height: auto; B. 设置了max-width: 100%; 和height: 100%; C. 设置了width: auto; 和max-height: 100%; D. 设置了width: auto; 和height: auto; 7.输入框组想加上图标，可以实现对表单控件的扩展的类是（） A. .input-group-btn B. .input-group-addon
《Bootstrap响应式应用技术》课程教学大纲
《Bootstrap响应式应用技术》教学大纲 一、课程目的 本课程侧重于介绍Bootstrap框架的基础知识及开发技能。随着Web开发技术的发展，以及用户对应用体验的要求日益提高，致使开发一个web应用时，不仅仅考虑其功能是否足够完备，更重要的是考虑如何才能提高用户体验。这是理性的回归，同时也是Web开发的必然趋势，而Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的。因此，Bootstrap也成为了Web开发学习之路上所必需掌握的技能。 二、课程性质和任务 本课程通过企业项目开发流程为情景，学习并掌握Bootstrap开发的基础知识和基本开发技能。学生在学习本课程后具有一定的专业能力，可激发学生对后续专业课程的学习兴趣。课程结构上遵循企业开发“流程化”、项目“兴趣化”、教学“项目实战化”、模式“前瞻化”、教材“权威化”、授课“案例化”等国内领先的IT工程师培养模式，并且结合科学的考核评价模式。通过全方位课程设计、全真的工作环境、探索研究工学结合的培养模式，提高学生职业技能，最终实现岗位无缝对接。 三、教学要求 本课程的框架结构，经过与企业专家系统的讨论分析，按实际需要及由简入繁的原则，最终确定了学习培养标准。最终达到掌握Bootstrap框架的目标，故应特别注重应用能力的培养。具体要求如下： ●能够熟练使用CSS3结合HTML5实现网页布局； ●熟练使用jQuery实现交互式操作； ●熟练使用Bootstrap CSS基于页面的相关设置； ●熟练使用Bootstrap CSS响应式辅助； ●熟悉使用Bootstrap常用字体图标的运用； ●熟练使用Bootstrap布局组件运用； ●熟练使用Bootstrap布局组件分页及徽章的合理运用； ●熟练使用Bootstrap布局组件进度条及面板运用； ●熟练使用Bootstrap插件的相关运用； ●熟练使用Bootstrap滚动监听；
BootStrap开发技术课程标准.doc
v1.0可编辑可修改《b ootstrap 》课程标准 教研室主任： 专业带头人： 系 ( 部) 主任： 教务处处长： 教学副院长： 审核批准日期： 二○一七年五月 《 bootstrap》课程标准 （基本信息）
v1.0可编辑可修改 课程编码： 课程类别：专业方向课程 适应专业：网页设计 开设时间：大三上期 学时数： 56 学时 一、课程概述 （一）课程性质 Bootstrap ，来自 Twitter ，是目前最受欢迎的前端框架。 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。 Bootstrap 是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得 Web 开发更加快捷。本教程将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分。每个部分都包含了与该主题相关的简单有用的实例。 （二）课程基本理念 本课程通过企业项目开发流程为情景，学习并掌握 BootStrap 开发的基础知识和基本开发技能。学生在学习本课程后具有一定的专业能力，可激发学生对后续专业课程的学习兴趣。课程结构上遵循企业开发“流程化”、项目“兴趣化”、教学“项目实战化” 、模式“前瞻化” 、教材“权威化”、授课“案例化”等国内领先的 IT 工程师培养模式，并且结合科学的考核评价模式。通过全方位课程设计、全真的工作环境、探索研究工学结合的培养模式，提高学生职业技能，最终实现岗位无缝对接。 （三）课程的设置与设计思路 本课程立足于培养学生的动手实践能力，教学活动基本上围绕着
个人学习总结-BootStrap入门教程
注明：该文档由本人整理于2013年12月8日 Bootstrap中文参考网站：https://www.wendangku.net/doc/973232265.html,/ BootStrap最新版源码下载：https://www.wendangku.net/doc/973232265.html,/ 官网下载的Bootrsap源码包含下列文件： 构建bootstrap基础网页(可以作为网页的基础模板，以后直接复制过去，然后就可以使用bootstrap定义好的相关标签等等) 如图1-1所示： 图1-1 说明： 1） 使用来修复网页在移动设备上显示的问题 2） 这是对ie9之前等版本不支持HTML5的浏览器进行特殊的处理 4）在head中的bootstrap-responsive.css是非必须文件，可以不引入，这个文件的主要作用是做一个响应式的网页。 5）在网页中bootstrap.css是bootstrap中的样式文件，bootstrap.js是脚本文件，两个文件相互对应，引入的顺序和位置一般是：CSS文件在head标签中引入，js文件在body标签里引入。其中jquery文件要在bootstrap脚本文件之前引入。 6）Bootstrap是基于HTML5网页的，所以首先要建立一个HTML5类型的网页 做完以上的操作就建好了一个基本的bootstrap网页了，然后就可以在body里面使用bootstrap中定义好的各种好看的样式。 简要说明 在Bootstrap中，网页按照十二栏的布局分布，在div中通过span类可以定义该div块占据多少栏，span1~span12可以选择。如下图1-2所示：
Bootstrap教程
中软国际-保险与证券业务线Bootstrap入门教程Bootstrap入门教程 赵俊明 2013/12/31
目录 Bootstrap起步 (2) 配置 (2) 开发文件和基本模板 (2) IE兼容模式 (3) 基本CSS简介 (3) HTML5文档类型 (3) 移动设备优先 (3) 栅格系统 (3) 自适应布局案例 (4) 列偏移 (4) 响应式工具 (5) 打印Class (5) 组件简解 (5) Glyphicons 图标 (5) 输入框组 (6) 标签页 (6) 胶囊式的标签页 (7) 面包屑导航 (7) 可变标签 (7) 徽章 (7) 大屏幕介绍 (8) 警告框 (8) 进度条 (9) 运动进度条 (9) 堆叠效果 (9) Well (9) Javascript插件 (10) 模态框 (10) 通过data属性调用模态框 (10) 通过javascript调用模态框 (11) 弹出框 (11) 警告框 (12) 按钮 (13) Affix（导航定位） (13)
Bootstrap起步 配置 注意：由于Bootstrap依赖于Jquery，所以一定将Jquery.js放置在Bootstrap.js前面。开发文件和基本模板
IE兼容模式 Bootstrap不支持IE的兼容模式。为了让IE浏览器运行最新的渲染模式，建议将此 标签加入到你的页面中： 基本CSS简介 HTML5文档类型 Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。在你项目中的每个页面都要参照下面的格式进行设置。 移动设备优先 为了确保适当的绘制和触屏缩放，需要在
之中添加viewport元数据标签。 在移动设备浏览器上，通过为viewport meta标签添加user-scalable=no可以禁用其缩放（zooming）功能。栅格系统 Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。 栅格class在屏幕宽度大于或等于阈值的设备上起作用，并且将针对小屏幕设备所设置的class覆盖掉。因此，对任何一个元素应用任何.col-md- class 将不仅作用于中等尺寸的屏幕，还将作用于大屏幕设备（如果没有设置.col-lg- class的话）。 通过下表可以详细查看Bootstrap的栅格系统如何在多种屏幕设备上工作的。Web前端培训教程：Bootstrap 中的轮播插件
https://www.wendangku.net/doc/973232265.html, Web前端培训教程：Bootstrap 中的轮播插件 本节课我们主要学习一下Bootstrap 中的轮播插件。 一．轮播 轮播插件就是将几张同等大小的大图，按照顺序依次播放。 //基本实例。
data 属性解释： 1.data-slide 接受关键字prev 或next，用来改变幻灯片相对于当前位置的位置； 2.data-slide-to 来向轮播底部创建一个原始滑动索引，data-slide-to="2"将把滑动块移动到一个特定的索引，索引从0 开始计数。 3.data-ride="carousel"属性用户标记轮播在页面加载时开始动画播放。 轮播插件有三个自定义属性：
BootStrap入门教程==
Bootstrap组件丰富同时具有良好可扩展性，能够很好地应用在生产环境。这些组件包括按钮(Button),导航(Navigation)，缩略图( thumbnails),提醒(Alert)，进度条(progress bar)等，能够很好减少前端工程师的代码量，实现更加丰富充实的页面。 Bootstrap作为一套良好的前端工具，要实现现代的动态页面效果，javascript插件是必不可少的。它提供了12个基于JQuery类库的插件，包括模态窗口(Modals),滚动监控(Scrollspy),标签效果(Tabs),提示效果(Tooltip),“泡芙”效果(popovers),警告区域(Alerts),折叠效果(Collapse),旋转木马(carousel),输入提示(typeahead)等.这些内容会分作两讲来阐述，本讲将深入讲解modals等插件。在bootstrap中所有涉及动画效果的javascript插件，都必须先引用Transitions JS，包括modals,alerts等来实现淡出效果。 1.模态窗口 (Modals) 模态窗口是指除非采取有效的关闭手段，用户的鼠标焦点或者输入光标将一直停留在其上的窗口(对话框).Bootstrap对于模态窗口的实现十分精简灵活，用户只需要使用少量的代码和智能的默认设置，即能实现传统实现传统的Javascript效果的模态窗口。默认的Bootstrap模态窗口效果，包括对话框从屏幕上方落下，屏幕其他区域变暗淡，模态窗口的隐藏等。这些效果分别对应.modal .fade .hide 这些类。我们可以不用写任何javascript代码来实现Modal效果，只需要将data-toggle="modal"放置于在触发控制要素(如按钮，超链接等)，并指定它的Modal窗口的ID链接(data-target="#mymodal"，href="#mymodal")。当这些控制要素被触发的时候，modal窗口就会出现了。模式窗口的内容可以非常丰富，这些内容都需要包括在modal的div内，并可以定义modal窗口的头部，内容和脚部。 如果使用Jquery调用Modal，也只需要一行javascript代码， $('#myModal').modal(options) 该选项包括backdrop,keyboard,show三项，主要控制模态窗口的动作。Modal的方法主要包括show,hide,toogle等，主要用于模态窗口的状态控制。Modal的触发事件包括shown,hiden等，主要用于控制模态窗口的功能触发控制。具体效果可以到官方文档的该处尝试一下，点击Launch demo modal按钮即可。Modal的实现如图4-1所示：
- 适合初学者的教程——Bootstrap表格
- bootstrap响应式网站开发实例教程课件第8章第1-4节
- 《Bootstrap响应式应用技术》课程教学大纲
- 适合初学者的教程——Bootstrap模态框(Modal)插件
- Bootstrap教程
- Bootstrap入门与布局教程
- 适合初学者的教程——Bootstrap列表组
- BootStrap入门教程
- bootstrap入门教程：JQuery ajax
- bootstrap教程ppt
- 适合初学者的教程——Bootstrap滚动监听(Scrollspy)插件
- 黑马程序员UI教程：Bootstrap弹出框
- Bootstrap笔试题
- Bootstrap笔试题教程文件
- Bootstrap响应式应用技术课程教学大纲
- 适合初学者的教程——Bootstrap网格系统
- 适合初学者的教程——Bootstrap提示工具(Tooltip)插件
- 响应式网页开发基础教程(jQuery+Bootstrap)第1章 响应式网页设计基础
- 响应式网页开发基础教程(jQuery+Bootstrap)第4章 Bootstrap基础
- (完整版)《BootStrap开发技术》课程标准