BootStrap入门学习-解析课件.ppt

1、BootStrap入门学习Part 1Bootstrap简介什么是 Bootstrap？Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 两位设计师开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。Bootstrap简洁灵活，使得 Web 开发更加快捷。Bootstrap可以构建出非常优雅的前端界面，而且占用资源非常小。为什么使用Bootstrap？移动设备优先。框架

2、包含了贯穿于整个库的移动设备优先的样式。浏览器支持。所有的主流浏览器都支持。容易上手。只要你具备HTML、CSS、JS基础知识，就可以开始学习。响应式设计。Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机 Bootstrap环境安装Bootstrap下载 下载的中文地址：http:/ Bootstrap 中文网提供的免费 CDN 加速服务 Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库

3、提供了 CDN 加速服务，请进入BootCDN(http:/)主页查看更多可用的工具库。什么是CDN加速服务？CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。Bootstrap基本模板Bootstrap模板注意事项 Bootstrap模板必须是基于HTML5文件的。因此DTD类型定义必须是HTML5的。Bootstrap文件当字符集设置，也要遵循HTML5的规范。设置IE浏览器兼容模式(X-UA-Compatible)。设置模板，适用于所有平台(viewport)

4、。引入bootstrap的CSS主文件(bootstrap.min.css)。引入jQuery插件的主文件(jQuery)引入bootstrap的JS主文件(bootstrap.min.js)全局CSS样式概述HTML5文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。移动设备优先 Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。为了确保适当的绘制和触屏缩放，需要在 之中添加 viewport 元数据标签。全局CSS样式概述禁

5、用移动设备上的缩放功能 在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。.container 类用于固定宽度并支持响应式布局的容器。.container-fluid 类用于 100%宽度，占据全部视口（viewport）的容器。CSS全

6、局样式排版标题 HTML 中的所有标题标签，到 均可使用。另外，还提供了.h1 到.h6 类，为的是给内联（inline）属性的文本赋予标题的样式。在标题内还可以包含 标签或赋予.small 类的元素，可以用来标记副标题。页面主体 Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 元素和所有段落元素。另外，（段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。CSS全局样式排版内联文本元素 被删除的文本：HTML5删除文本、XHTML删除文本 插入的文件：插入文本 下划线的文本：下划线

7、文本 小号文本：或.small 着重文本：斜体文本：文本对齐 class=“text-left”文本左对齐 class=“text-right”文本右对齐 class=“text-center”文本中对齐 class=“text-justify”文本两端对齐 class=“text-nowrap”禁止文本换行CSS全局样式排版改变大小写 class=“text-lowercase”转成小写 class=“text-uppercase”转成大写 class=“text-capitalize”首字母大写无序列表顺序无关紧要的一组元素有序列表顺序至关重要的一组元素无样式列表 内联列表 通过设置 di

8、splay:inline-block;并添加少量的内补（padding），将所有元素放置于同一行。CSS全局样式表格表格全局类样式 描述：为任意 标签添加.table 类可以为其赋予基本的样式 少量的内补（padding）和水平方向的分隔线。举例：.条纹状表格表格隔行变色 描述：通过.table-striped 类可以给 之内的每一行增加斑马条纹样式。举例：.带边框的表格 描述：添加.table-bordered 类为表格和其中的每个单元格增加边框。举例：.CSS全局样式表格鼠标悬停 通过添加.table-hover 类可以让 中的每一行对鼠标悬停状态作出响应。.紧缩表格 通过添加.table

9、-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。.状态类 通过这些状态类可以为行或单元格行或单元格设置颜色。.active鼠标悬停在行或单元格上时所设置的颜色.success标识成功或积极的动作.info标识普通的提示信息或动作.warning标识警告或需要用户注意.danger标识危险或潜在的带来负面影响的动作CSS全局样式表格响应式表格 将任何.table 元素包裹在.table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。垂直方向的内容截断：响应式表格

10、使用了 overflow-y:hidden 属性，这样就能将超出表格底部和顶部的内容截断。CSS全局样式表单表单样式概述 单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control 类的、和 元素都将被默认设置宽度属性为 width:100%;。将 label 元素和前面提到的控件包裹在.form-group 中可以获得最好的排列。基本实例placeholder属性属性描述：提供可描述输入字段预期值的提示信息说明：该提示会在输入字段为空时显示，并会在字段获得焦点时消失。是HTML5新属性。placeholder 属性适用于以下的 类型：text,search,url,tel,

11、email 以及 password。CSS全局样式表单基本实例 不要将表单组表单组直接和输入框组输入框组混合使用。建议将输入框组嵌套到表单组中使用。CSS全局样式表单内联表单 为 元素添加.form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。对于这些内联表单，你可以通过为 label 设置.sr-only 类将其隐藏。CSS全局样式表单水平排列的表单 通过为表单添加.form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 lab

12、el 标签和控件组水平并排布局。这样做将改变.form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加.row 了。CSS全局样式表单被支持的控件 输入框输入框 包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。举例：注意：只有正确设置了 type 属性的输入控件才能被赋予正确的样式。文本域文本域 举例：单选项和复选框单选项和复选框 通过将.check

13、box-inline 或.radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。举例：画画画画 CSS全局样式表单下拉列表 通过给标记添加.form-control 样式来实现效果。对于标记了 multiple 属性的 控件来说，也可添加该样式.form-control。CSS全局样式按钮可作为按钮使用的标签或元素 为、或 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。虽然按钮类可以应用到 和 元素上，但是，导航和导航条组件只支持 元素。如果 元素被作为按钮使用，那么，务必为其设置 ro

14、le=“button”属性。兼容性：强烈建议尽可能使用强烈建议尽可能使用元素元素来获得在各个浏览器上获得相匹配的绘制效果。CSS全局样式按钮预定义样式 默认样式：default 首选项：primary 成功：success 一般信息：info 警告：warning 危险：Danger 链接：Link按钮激活和禁用状态 激活状态(.active)：禁用状态：CSS全局样式按钮按钮尺寸 使用.btn-lg、.btn-sm 或.btn-xs 就可以获得不同尺寸的按钮。Large button(大按钮)：.btn-lg Small button(小按钮)：.btn-sm Extra samll but

15、ton(超小按钮)：.btn-xs 通过给按钮添加.btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。CSS全局样式图片响应式图片 在 Bootstrap 版本 3 中，通过为图片添加.img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width:100%;、height:auto;和 display:block;属性，从而让图片在其父元素中更好的缩放。如果需要让使用了.img-responsive 类的图片水平居中，请使用.center-block 类，不要用.text-center。举例：图片形状 圆角图

16、片：圆形图片：边框圆角：注意：Internet Explorer 8 不支持 CSS3 中的圆角属性。CSS全局样式辅助类文本颜色类 柔和的：.首选项：.成功：.信息：.警告：.危险：.背景颜色类 CSS全局样式辅助类三角符号 通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的。联系我们 快速浮动类 通过添加一个类，可以将任意元素向左(.pull-left)或向右浮动(.pull-right)。注意：不能用在导航条组件中，导航条组件要使用.navbar-left 或.navbar-right。让内容块网页居中 为任意元素设置 display:bloc

17、k 属性并通过 margin 属性让其中的内容居中。.注意：一定要指定width，否则看不到效果。CSS全局样式辅助类清除浮动 通过为父元素添加.clearfix 类可以很容易地清除浮动（float）。显示和隐藏内容.show 和.hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。.CSS全局样式栅格系统栅格系统介绍 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。行（r

18、ow）必须包含在.container（固定宽度）或.container-fluid（100%宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。通过行（row）在水平方向创建一组列（column）。你的内容应当放置于列（column）内，并且，只有列（column）可以作为行（row）的直接子元素。栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4 来创建。如果一行（row）中包含了的列（column）大于 12，多余的列（column）所在的元素将被作为一个整体另起一行排列。CSS全局样式栅格系统栅格参数样式名称

19、样式名称含义含义分辨率分辨率.container最大宽度最大宽度列间隔列间隔col-xs-*超小屏幕、手机768px自动30pxcol-sm-*小屏幕、平板768px750px30pxcol-md-*中等屏幕 桌面显示器 992px970px30pxcol-lg-*大屏幕、大桌面显示器1200px1170px30pxCSS全局样式栅格系统CSS全局样式栅格系统实例：流式布局容器 将最外面的布局元素.container 修改为.container-fluid，就可以将固定宽度的栅格布局转换为 100%宽度的布局。CSS全局样式栅格系统列偏移 使用.col-md-offset-*类可以将列向右侧偏

20、移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将.col-md-4 元素向右侧偏移了4个列（column）的宽度。CSS全局样式栅格系统列嵌套 为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的.row 元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。Bootstrap组件Boostrap组件概述 无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。Boostrap组件字

21、体图标概述 包括250多个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的，但是他们的作者允许 Bootstrap 免费使用。为了表示感谢，希望你在使用时尽量为 Glyphicons 添加一个友情链接。Boostrap组件字体图标如何使用字体图标 出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。不要和其他组件混合使用 图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌

22、套的 标签，并将图标类应用到这个 标签上。只对内容为空的元素起作用 图标类只能应用在不包含任何文本内容或子元素的元素上。Boostrap组件字体图标Boostrap组件下拉菜单描述 用于显示链接列表的可切换、有上下文的菜单。将下拉菜单触发器和下拉菜单都包裹在.dropdown 里。通过为下拉菜单的父元素设置.dropup 类，可以让菜单向上弹出（默认是向下弹出的）。Boostrap组件下拉菜单对齐 默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100%宽度。为.dropdown-menu 添加.dropdown-menu-right 类可以让菜单右对齐。为.dropdown-menu

23、 添加.dropdown-menu-left 类可以让菜单右对齐。举例：分割线 为下拉菜单添加一条分割线，用于将多个链接分组。举例：禁用的菜单项 为下拉菜单中的 元素添加.disabled 类，从而禁用相应的菜单项。实例：Boostrap组件按钮组描述 通过按钮组容器.btn-group 把一组按钮放在同一行里。按钮组中，除第一个和最后一个按钮外，中间按钮没有圆角。Boostrap组件按钮组按钮工具栏 把一组 组合进一个 中就可以做成更复杂的组件。Boostrap组件按钮组尺寸 只要给.btn-group 加上.btn-group-*类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个

24、按钮组时也适用。.btn-group-lg：应用于大型按钮组。.btn-group：应用于一般按钮组。.btn-group-sm：应用于小型按钮组。.btn-group-xs：应用于超小型按钮组。Boostrap组件按钮组嵌套 想要把下拉菜单混合到一系列按钮中，只须把.btn-group 放入另一个.btn-group 中。Boostrap组件按钮组垂直排列 让一组按钮垂直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持这种方式。Boostrap组件按钮式下拉菜单描述 把任意一个按钮放入.btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。按钮式下拉菜单依赖下拉

25、菜单插件，因此需要将此插件包含在你所使用的 Bootstrap 版本中。单按钮下拉菜单 只要改变一些基本的标记，就能把按钮变成下拉菜单的开关。Boostrap组件按钮式下拉菜单分裂式按钮下拉菜单 相似地，分裂式按钮下拉菜单也需要同样的改变一些标记，但只是多一个分开的按钮。Boostrap组件按钮式下拉菜单按钮尺寸 按钮式下拉菜单适用所有尺寸的按钮。.btn-lg：应用于大型按钮。.btn-sm：应用于小型按钮。.btn-xs：应用于超小型按钮。向上弹出式菜单 给父元素添加.dropup 类就能使触发的下拉菜单朝上方打开。Boostrap组件输入框组描述 通过在文本输入框 前面、后面或是两边加上

26、文字或按钮，可以实现对表单控件的扩展。为.input-group 赋予.input-group-addon 类，可以给.form-control 的前面或后面添加额外的元素。只支持文本输入框，不能用于和元素。尺寸 为.input-group 添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。尺寸类包括：.input-group-lg和.input-group-smBoostrap组件输入框组作为额外元素的按钮 为输入框组添加按钮需要额外添加一层嵌套，不是.input-group-addon，而是添加.input-group-btn 来包裹按钮元素。由于不同浏览器的默认样式无法被统一的重新

27、赋值，所以才需要这样做。Boostrap组件输入框组作为额外元素的按钮式下拉菜单Boostrap组件导航概述 Bootstrap 中的导航组件都依赖同一个.nav 类，状态类也是共用的。改变修饰类可以改变样式。普通标签页(选项卡)注意.nav-tabs 类依赖.nav 基类。Boostrap组件导航胶囊式标签页 HTML 标记相同，但使用.nav-pills 类：胶囊是标签页也是可以垂直方向堆叠排列的。只需添加.nav-stacked 类。两端对齐 在大于 768px 的屏幕上，通过.nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式

28、。Boostrap组件导航禁用的链接 对任何导航组件（标签页、胶囊式标签页），都可以添加.disabled 类，从而实现链接为灰色且没有鼠标悬停效果。链接功能不受到影响。这个类只改变 的外观，不改变功能。可以自己写 JavaScript 禁用这里的链接。Boostrap组件导航带下拉菜单的标签页Boostrap组件导航条默认导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。Boostrap组件导航条品牌图标 将导航条内放置品牌标志的地方替换为 元素即可展示自己的品牌图标。由于.n

29、avbar-brand 已经被设置了内补（padding）和高度（height），你需要根据自己的情况添加一些 CSS 代码从而覆盖默认设置。Boostrap组件导航条表单 将表单放置于.navbar-form 之内可以呈现很好的垂直对齐，并在较窄的视口（viewport）中呈现折叠状态。使用对齐选项可以规定其在导航条上出现的位置。使用.navbar-left 或.navbar-right 可以实现表单左对齐或右对齐。Boostrap组件导航条按钮 对于不包含在 中的 元素，加上.navbar-btn 后，可以让它在导航条里垂直居中。Boostrap组件导航条文本 把文本包裹在.navbar-

30、text中时，为了有正确的行距和颜色，通常使用 标签。Boostrap组件导航条导航条定位 添加.navbar-fixed-top 类可以让导航条固定在顶部。添加.navbar-fixed-bottom 类可以让导航条固定在底部。还可包含一个.container 或.container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）。添加.navbar-inverse 可以实现反色导航条Bootstrap组件路径导航路径导航 在一个带有层次的导航结构中标明当前页面的位置。各路径间的分隔符已经自动通过 CSS 的:before 和 content 属性添加了。给或添加.b

31、reakcrumb 可以实现“面包屑”效果。Bootstrap组件分页默认分页 将分页类.pagination 添加到标记上，可以实现分页效果。添加.disabled 类可以实现禁用状态。添加.active 类可以实现激活状态。给添加.pagination-lg 或.pagination-sm 可以控制分页大小。Bootstrap组件分页翻页效果 给添加.pager 类，可以实现“上一页”和“下一页”效果。给添加.previous 和.next 可以实现两端对齐。Bootstrap组件标签概述 通过类样式.label 和.label-primary 可以实现标签的效果和样式。Bootstrap

32、组件徽章概述 给链接、导航等元素嵌套 元素，可以很醒目的展示新的或未读的信息条目。Boostrap组件缩略图缩略图概述 通过缩略图组件扩展 Bootstrap 的 栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。使用.thumbnail 可以实现缩略图效果。Boostrap组件警告框警告框描述 警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息。将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert 类是必须要设置的，另外我们还提供了有特殊意义的4个类（例如，.alert-success、.alert-info、.alert-warning、.alert-danger），代表不同的警告信息。可关闭的警告框 为警告框添加一个可选的.alert-dismissible 类和一个关闭按钮。警告框中的链接 用.alert-link 工具类，可以为链接设置与当前警告框相符的颜色。