bootstrap入门学习-1

《bootstrap入门学习-1》由会员分享，可在线阅读，更多相关《bootstrap入门学习-1（66页珍藏版）》请在金锄头文库上搜索。

1、BootStrap入门学习 Part 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 中

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

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

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

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

7、除的文本：HTML5删除文本、XHTML删除文本 插入的文件：插入文本 下划线的文本：下划线文本 小号文本： 或 .small 着重文本： 斜体文本： 文本对齐 class = “text-left”文本左对齐 class = “text-right” 文本右对齐 class = “text-center” 文本中对齐 class = “text-justify ”文本两端对齐 class = “text-nowrap”禁止文本换行,CSS全局样式排版,改变大小写 class =“text-lowercase” 转成小写 class = “text-uppercase”转成大写 class =

8、 “text-capitalize”首字母大写 无序列表顺序无关紧要的一组元素 有序列表顺序至关重要的一组元素 无样式列表 内联列表 通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。,CSS全局样式表格,表格全局类样式 描述：为任意 标签添加 .table 类可以为其赋予基本的样式 少量的内补（padding）和水平方向的分隔线。 举例：. 条纹状表格表格隔行变色 描述：通过 .table-striped 类可以给 之内的每一行增加斑马条纹样式。 举例：. 带边框的表格 描述：添加 .table-bordered 类为表格和其

9、中的每个单元格增加边框。 举例： .,CSS全局样式表格,鼠标悬停 通过添加 .table-hover 类可以让 中的每一行对鼠标悬停状态作出响应。 . 紧缩表格 通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。 . 状态类 通过这些状态类可以为行或单元格设置颜色。 .active 鼠标悬停在行或单元格上时所设置的颜色 .success 标识成功或积极的动作 .info 标识普通的提示信息或动作 .warning 标识警告或需要用户注意 .danger 标识危险或潜在的带来负面影响的动作,CSS全局样式表格,响应式表格 将任何 .ta

10、ble 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。 垂直方向的内容截断：响应式表格使用了 overflow-y: hidden 属性，这样就能将超出表格底部和顶部的内容截断。,CSS全局样式表单,表单样式概述 单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 、 和 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。 基本实例,plac

11、eholder属性 描述：提供可描述输入字段预期值的提示信息 说明：该提示会在输入字段为空时显示，并会在字段获得焦点时消失。是HTML5新属性。 placeholder 属性适用于以下的 类型：text, search, url, tel, email 以及 password。,CSS全局样式表单,基本实例 不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。,CSS全局样式表单,内联表单 为 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会

12、使表单折叠）。 对于这些内联表单，你可以通过为 label 设置 .sr-only 类将其隐藏。,CSS全局样式表单,水平排列的表单 通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。,CSS全局样式表单,被支持的控件 输入框 包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件：text、password、datetime、datetime-local、dat

13、e、month、time、week、number、email、url、search、tel 和 color。 举例： 注意：只有正确设置了 type 属性的输入控件才能被赋予正确的样式。 文本域 举例： 单选项和复选框 通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。 举例：画画,CSS全局样式表单,下拉列表 通过给标记添加 .form-control 样式来实现效果。 对于标记了 multiple 属性的 控件来说，也可添加该样式 .form-control。 ,CSS

14、全局样式按钮,可作为按钮使用的标签或元素 为 、 或 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。 虽然按钮类可以应用到 和 元素上，但是，导航和导航条组件只支持 元素。 如果 元素被作为按钮使用 ，那么，务必为其设置 role=“button” 属性。 兼容性：强烈建议尽可能使用 元素来获得在各个浏览器上获得相匹配的绘制效果。,CSS全局样式按钮,预定义样式 默认样式：default 首选项： primary 成功： success 一般信息： info 警告： warning 危险： Danger 链接： Link 按钮激活和禁用状态 激活状态(.a

15、ctive)： 禁用状态：,CSS全局样式按钮,按钮尺寸 使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。 Large button(大按钮)：.btn-lg Small button(小按钮)：.btn-sm Extra samll button(超小按钮)：.btn-xs 通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。,CSS全局样式图片,响应式图片 在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了

16、max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。 如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。 举例： 图片形状 圆角图片： 圆形图片： 边框圆角： 注意：Internet Explorer 8 不支持 CSS3 中的圆角属性。,CSS全局样式辅助类,文本颜色类 柔和的：. 首选项：. 成功：. 信息：. 警告：. 危险：. 背景颜色类 ,CSS全局样式辅助类,三角符号 通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的。 联系我们 快速浮动类 通过添加一个类，可以将任意元素向左(.pull-left)或向右浮动(.pull-right)。 注意