《BootStrap入门学习(1)》由会员分享，可在线阅读，更多相关《BootStrap入门学习(1)（67页珍藏版）》请在金锄头文库上搜索。
1、BootStrapBootStrap入门学习入门学习(1)(1)Bootstrap简介什么是 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中文网还对大量的前端开源工具库提供了 CDN加速服务
3、，请进入BootCDN(http:/)主页查看更多可用的工具库。什么是CDN加速服务？CDN的全称是ContentDeliveryNetwork，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。Bootstrap基本模板Bootstrap模板注意事项Bootstrap模板必须是基于HTML5文件的。因此DTD类型定义必须是HTML5的。Bootstrap文件当字符集设置，也要遵循HTML5的规范。设置IE浏览器兼容模式(X-UA-Compatible)。设置模板，适用于所有平台(viewport)。引入bootstrap的CS
4、S主文件(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全局样式排版标题HTML中的所有标题标签，到 均可使用。另外，还
6、提供了 .h1到 .h6类，为的是给内联（inline）属性的文本赋予标题的样式。在标题内还可以包含 标签或赋予 .small类的元素，可以用来标记副标题。页面主体Bootstrap将全局 font-size设置为 14px，line-height设置为 1.428。这些属性直接赋予 元素和所有段落元素。另外，（段落）元素还被设置了等于 1/2行高（即 10px）的底部外边距（margin）。CSS全局样式排版内联文本元素被删除的文本：HTML5删除文本、XHTML删除文本插入的文件：插入文本下划线的文本：下划线文本小号文本：或 .small着重文本：斜体文本：文本对齐class=“text-
7、left”文本左对齐class=“text-right”文本右对齐class=“text-center”文本中对齐class=“text-justify”文本两端对齐class=“text-nowrap”禁止文本换行CSS全局样式排版改变大小写class=“text-lowercase”转成小写class=“text-uppercase”转成大写class=“text-capitalize”首字母大写无序列表顺序无关紧要的一组元素有序列表顺序至关重要的一组元素无样式列表内联列表通过设置 display:inline-block;并添加少量的内补（padding），将所有元素放置于同一行。CSS
8、全局样式表格表格全局类样式描述：为任意 标签添加 .table类可以为其赋予基本的样式 少量的内补（padding）和水平方向的分隔线。举例：.条纹状表格表格隔行变色描述：通过 .table-striped类可以给 之内的每一行增加斑马条纹样式。举例：.带边框的表格描述：添加 .table-bordered类为表格和其中的每个单元格增加边框。举例：.CSS全局样式表格鼠标悬停通过添加 .table-hover类可以让 中的每一行对鼠标悬停状态作出响应。.紧缩表格通过添加 .table-condensed类可以让表格更加紧凑，单元格中的内补（padding）均会减半。.状态类通过这些状态类可以为
9、行或单元格行或单元格设置颜色。.active鼠标悬停在行或单元格上时所设置的颜色.success标识成功或积极的动作.info标识普通的提示信息或动作.warning标识警告或需要用户注意.danger标识危险或潜在的带来负面影响的动作CSS全局样式表格响应式表格将任何 .table元素包裹在 .table-responsive元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px宽度时，水平滚动条消失。垂直方向的内容截断：响应式表格使用了overflow-y:hidden属性，这样就能将超出表格底部和顶部的内容截断。CSS全局样式表单表单样式概述单独
10、的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的、和元素都将被默认设置宽度属性为width:100%;。 将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列。 基本实例placeholder属性属性描述：提供可描述输入字段预期值的提示信息说明：该提示会在输入字段为空时显示，并会在字段获得焦点时消失。是HTML5新属性。placeholder 属性适用于以下的 类型：text, search, url, tel, email 以及 password。CSS全局样式表单基本实例不要将表单组表单组直接和输入框组输入框组混合使用。建议将输入框组
11、嵌套到表单组中使用。CSS全局样式表单内联表单为 元素添加 .form-inline类可使其内容左对齐并且表现为 inline-block级别的控件。只适用于视口（viewport）至少在 768px宽度时（视口宽度再小的话就会使表单折叠）。对于这些内联表单，你可以通过为 label设置 .sr-only类将其隐藏。CSS全局样式表单水平排列的表单通过为表单添加 .form-horizontal类，并联合使用 Bootstrap预置的栅格类，可以将 label标签和控件组水平并排布局。这样做将改变 .form-group的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row
12、了。CSS全局样式表单被支持的控件输入框输入框包括大部分表单控件、文本输入域控件，还支持所有 HTML5类型的输入控件：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。 举例：注意：只有正确设置了type属性的输入控件才能被赋予正确的样式。 文本域文本域举例：单选项和复选框单选项和复选框通过将.checkbox-inline或.radio-inline类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。 举例：画
13、画画画CSS全局样式表单下拉列表通过给标记添加 .form-control样式来实现效果。对于标记了multiple属性的控件来说，也可添加该样式 .form-control。CSS全局样式按钮可作为按钮使用的标签或元素为 、或 元素添加按钮类（buttonclass）即可使用 Bootstrap提供的样式。虽然按钮类可以应用到 和 元素上，但是，导航和导航条组件只支持 元素。如果 元素被作为按钮使用 ，那么，务必为其设置 role=“button”属性。兼容性：强烈建议尽可能使用强烈建议尽可能使用元素元素来获得在各个浏览器上获得相匹配的绘制效果。 CSS全局样式按钮预定义样式默认样式：def
14、ault首选项： primary成功： success一般信息： info警告： warning危险： Danger链接： Link按钮激活和禁用状态激活状态(.active)：禁用状态：CSS全局样式按钮按钮尺寸使用 .btn-lg、.btn-sm或 .btn-xs就可以获得不同尺寸的按钮。Largebutton(大按钮)：.btn-lgSmallbutton(小按钮)：.btn-smExtrasamllbutton(超小按钮)：.btn-xs通过给按钮添加 .btn-block类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。CSS全局样式图片响应式图片在 Bo
15、otstrap版本 3中，通过为图片添加 .img-responsive类可以让图片支持响应式布局。其实质是为图片设置了 max-width:100%;、 height:auto;和 display:block;属性，从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive类的图片水平居中，请使用 .center-block类，不要用 .text-center。 举例：图片形状圆角图片：圆形图片：边框圆角：注意：InternetExplorer8不支持 CSS3中的圆角属性。CSS全局样式辅助类文本颜色类柔和的：.首选项：.成功：.信息：.警告：.危险：.背景颜色类C
16、SS全局样式辅助类三角符号通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的。联系我们 快速浮动类通过添加一个类，可以将任意元素向左(.pull-left)或向右浮动(.pull-right)。注意：不能用在导航条组件中，导航条组件要使用.navbar-left或 .navbar-right。 让内容块网页居中为任意元素设置 display:block属性并通过 margin属性让其中的内容居中。.注意：一定要指定width，否则看不到效果。CSS全局样式辅助类清除浮动通过为父元素添加 .clearfix类可以很容易地清除浮动（float）。显示和隐
17、藏内容.show和 .hidden类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。.CSS全局样式栅格系统栅格系统介绍Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。行（row）必须包含在 .container（固定宽度）或 .container-fluid（100%宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。通过行（row）在水平方向创建一组列（co
18、lumn）。你的内容应当放置于列（column）内，并且，只有列（column）可以作为行（row）的直接子元素。栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4来创建。如果一行（row）中包含了的列（column）大于 12，多余的列（column）所在的元素将被作为一个整体另起一行排列。CSS全局样式栅格系统栅格参数样式名称样式名称含义含义分辨率分辨率.container最大宽度最大宽度列间隔列间隔col-xs-*超小屏幕、手机768px自动30pxcol-sm-*小屏幕、平板768px750px30pxcol-md-*中等屏幕 桌
19、面显示器 992px970px30pxcol-lg-*大屏幕、大桌面显示器1200px1170px30pxCSS全局样式栅格系统CSS全局样式栅格系统实例：流式布局容器将最外面的布局元素 .container修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100%宽度的布局。CSS全局样式栅格系统列偏移使用 .col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4类将 .col-md-4元素向右侧偏移了4个列（column）的宽度。CSS全局样式栅格系统列
20、嵌套为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row元素和一系列 .col-sm-*元素到已经存在的 .col-sm-*元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。Bootstrap组件Boostrap组件概述无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。 Boostrap组件字体图标概述包括250多个来自 GlyphiconHalflings的字体图标。GlyphiconsHalflings一般是收费的，但是他们的作者允许 Bootstrap免费使用。为了表示感谢，希望你在使用时尽
21、量为Glyphicons添加一个友情链接。 Boostrap组件字体图标如何使用字体图标出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。 不要和其他组件混合使用图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 标签，并将图标类应用到这个 标签上。只对内容为空的元素起作用图标类只能应用在不包含任何文本内容或子元素的元素上。Boostrap组件字体图标Boostrap组件下拉菜单描述用于显示链接列表的可切换、有上下文的菜单。将下
22、拉菜单触发器和下拉菜单都包裹在.dropdown里 。通过为下拉菜单的父元素设置 .dropup类，可以让菜单向上弹出（默认是向下弹出的）。Boostrap组件下拉菜单对齐默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100%宽度。为 .dropdown-menu添加 .dropdown-menu-right类可以让菜单右对齐。为 .dropdown-menu添加 .dropdown-menu-left类可以让菜单右对齐。举例：分割线为下拉菜单添加一条分割线，用于将多个链接分组。举例：禁用的菜单项为下拉菜单中的 元素添加 .disabled类，从而禁用相应的菜单项。实例：Boostr
23、ap组件按钮组描述通过按钮组容器 .btn-group把一组按钮放在同一行里。按钮组中，除第一个和最后一个按钮外，中间按钮没有圆角。Boostrap组件按钮组按钮工具栏把一组 组合进一个 中就可以做成更复杂的组件。Boostrap组件按钮组尺寸只要给 .btn-group加上 .btn-group-*类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。.btn-group-lg：应用于大型按钮组。.btn-group：应用于一般按钮组。.btn-group-sm：应用于小型按钮组。.btn-group-xs：应用于超小型按钮组。Boostrap组件按钮组嵌套想要把下拉菜
24、单混合到一系列按钮中，只须把 .btn-group放入另一个 .btn-group中。Boostrap组件按钮组垂直排列让一组按钮垂直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持这种方式。Boostrap组件按钮式下拉菜单描述把任意一个按钮放入 .btn-group中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。按钮式下拉菜单依赖下拉菜单插件 ，因此需要将此插件包含在你所使用的 Bootstrap版本中。单按钮下拉菜单只要改变一些基本的标记，就能把按钮变成下拉菜单的开关。 Boostrap组件按钮式下拉菜单分裂式按钮下拉菜单相似地，分裂式按钮下拉菜单也需要同样的改变一些标记
25、，但只是多一个分开的按钮。Boostrap组件按钮式下拉菜单按钮尺寸按钮式下拉菜单适用所有尺寸的按钮。.btn-lg：应用于大型按钮。.btn-sm：应用于小型按钮。.btn-xs：应用于超小型按钮。向上弹出式菜单给父元素添加 .dropup类就能使触发的下拉菜单朝上方打开。Boostrap组件输入框组描述通过在文本输入框 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group赋予 .input-group-addon类，可以给 .form-control的前面或后面添加额外的元素。只支持文本输入框 ，不能用于和元素。尺寸为 .input-group添加相应的
26、尺寸类，其内部包含的元素将自动调整自身的尺寸。尺寸类包括：.input-group-lg和.input-group-smBoostrap组件输入框组作为额外元素的按钮为输入框组添加按钮需要额外添加一层嵌套，不是 .input-group-addon，而是添加 .input-group-btn来包裹按钮元素。由于不同浏览器的默认样式无法被统一的重新赋值，所以才需要这样做。Boostrap组件输入框组作为额外元素的按钮式下拉菜单Boostrap组件导航概述Bootstrap中的导航组件都依赖同一个 .nav类，状态类也是共用的。改变修饰类可以改变样式。普通标签页(选项卡)注意 .nav-tabs类
27、依赖 .nav基类。Boostrap组件导航胶囊式标签页HTML标记相同，但使用 .nav-pills类：胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked类。两端对齐在大于 768px的屏幕上，通过 .nav-justified类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。Boostrap组件导航禁用的链接对任何导航组件（标签页、胶囊式标签页），都可以添加 .disabled类，从而实现链接为灰色且没有鼠标悬停效果。链接功能不受到影响。这个类只改变 的外观，不改变功能。可以自己写 JavaScript禁用这里的链接。Boostra
28、p组件导航带下拉菜单的标签页Boostrap组件导航条默认导航条导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。Boostrap组件导航条品牌图标将导航条内放置品牌标志的地方替换为 元素即可展示自己的品牌图标。由于 .navbar-brand已经被设置了内补（padding）和高度（height），你需要根据自己的情况添加一些 CSS代码从而覆盖默认设置。Boostrap组件导航条表单将表单放置于 .navbar-form之内可以呈现很好的垂直对齐，并在较窄的视口（viewport）中
29、呈现折叠状态。 使用对齐选项可以规定其在导航条上出现的位置。使用 .navbar-left或 .navbar-right可以实现表单左对齐或右对齐。Boostrap组件导航条按钮对于不包含在 中的 元素，加上 .navbar-btn后，可以让它在导航条里垂直居中。Boostrap组件导航条文本把文本包裹在 .navbar-text中时，为了有正确的行距和颜色，通常使用 标签。Boostrap组件导航条导航条定位添加.navbar-fixed-top类可以让导航条固定在顶部。添加 .navbar-fixed-bottom类可以让导航条固定在底部。还可包含一个.container或.contain
30、er-fluid容器，从而让导航条居中，并在两侧添加内补（padding）。 添加 .navbar-inverse可以实现反色导航条Bootstrap组件路径导航路径导航在一个带有层次的导航结构中标明当前页面的位置。各路径间的分隔符已经自动通过 CSS的 :before和 content属性添加了。给或添加 .breakcrumb可以实现“面包屑”效果。Bootstrap组件分页默认分页将分页类 .pagination添加到标记上，可以实现分页效果。添加 .disabled类可以实现禁用状态。添加 .active类可以实现激活状态。给添加 .pagination-lg或 .pagination
31、-sm可以控制分页大小。Bootstrap组件分页翻页效果给添加 .pager类，可以实现“上一页”和“下一页”效果。给添加 .previous和 .next可以实现两端对齐。Bootstrap组件标签概述通过类样式 .label和 .label-primary可以实现标签的效果和样式。Bootstrap组件徽章概述给链接、导航等元素嵌套 元素，可以很醒目的展示新的或未读的信息条目。Boostrap组件缩略图缩略图概述通过缩略图组件扩展 Bootstrap的 栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。使用 .thumbnail可以实现缩略图效果。Boostrap组件警告框警告框描述警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息。将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert类是必须要设置的，另外我们还提供了有特殊意义的4个类（例如，.alert-success、.alert-info、.alert-warning、.alert-danger），代表不同的警告信息。可关闭的警告框为警告框添加一个可选的.alert-dismissible类和一个关闭按钮。 警告框中的链接用 .alert-link工具类，可以为链接设置与当前警告框相符的颜色。结束结束
