1 / 38

Bootstrap

Bootstrap. Bootstrap 是最受欢迎的 HTML 、 CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。. 目录. 1. 起步. 2. 全局样式. 3. LESS. 4. 组件 （参阅： bootstrap 进阶）. 起步. 1. 下载. 生产环境： http://d.bootcss.com/bootstrap-3.2.0-dist.zip 源码： http://d.bootcss.com/bootstrap-3.2.0.zip. 2. 目录结构.

anaya
Download Presentation

Bootstrap

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Bootstrap Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

  2. 目录 1 起步 2 全局样式 3 LESS 4 组件（参阅：bootstrap进阶）

  3. 起步 1 下载 生产环境：http://d.bootcss.com/bootstrap-3.2.0-dist.zip 源码：http://d.bootcss.com/bootstrap-3.2.0.zip 2 目录结构 less/、js/ 和 fonts/ 目录分别包含了 CSS、JS 和字体图标的源码。dist/ 目录包含了上面所说的预编译 Bootstrap 包内的所有文件。docs/ 包含了所有文档的源码文件，examples/ 目录是 Bootstrap 官方提供的实例工程。除了这些，其他文件还包含 Bootstrap 安装包的定义文件、许可证文件和编译脚本等。 3 <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件（一般不用引入） --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap- theme.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 安装

  4. 全局样式 5 3 2 4 8 7 9 6 表单 排版 栅格系统 排版 排版 代码 排版 排版 排版 表格 图片 按钮 辅助类 10 响应式工具 排版 1 1 1 1 1 HTML5 文档类型 HTML5 文档类型 概览 HTML5 文档类型

  5. 概览 HTML5 文档类型，在你项目中的每个页面都要参照下面的格式进行设置。 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 移动设备优先，为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。 <meta name="viewport" content="width=device-width, initial-scale=1"> 通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 布局容器 .container 类用于固定宽度并支持响应式布局的容器。 <div class="container"> ... </div> .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 <div class="container-fluid"> ... </div>

  6. 栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 • 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理： • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。 • 通过“行（row）”在水平方向创建一组“列（column）”。 • 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。 • 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 • 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 • padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。 • 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。 列偏移 使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。 嵌套列 为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。 列排序 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。 <div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>

  7. 排版 • 标题：HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。 • 页面主体：Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设 置了等于 1/2 行高（即 10px）的底部外边距（margin）。 • 中心内容：通过添加 .lead 类可以让段落突出显示。 • 内联文本元素：You can use the mark tag to <mark>highlight</mark> text. • 被删除的文本：对于被删除的文本使用 <del> 标签。 • 其他文本效果：没用的文本使用 <s> 标签 ，额外插入的文本使用 <ins> 标签，为文本添加下划线，使用 <u> 标签，小号文本<small>标签或.small,大小为父级容器85%， • 文本对齐：. text-left , .text-right, .text-center, .text-justify, .text-nowrap • 文本大小写：. text-lowercase , .text-uppercase, .text-capitalize • 基本缩略语：<abbr title="attribute">attr</abbr> • 首字母缩略语：为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。<abbr title="HyperText Markup Language" class="initialism">HTML</abbr> • 地址：<address>…</address> • 引用：<blockquote>…</blockquote> • 列表：.list-unstyled :去除列表默认样式 和左侧外边距 .list-inline 将所有元素放置于同一行。 • 描述：带短语的描述列表：<dl> <dt>...</dt> <dd>...</dd> </dl> .dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。 <dl class=“dl-horizontal”> <dt>...</dt> <dd>...</dd> </dl> 通过 text-overflow 属性（bootstrap 已设置），水平排列的描述列表将会截断左侧太长的短语。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。

  8. 代码 • 内联代码：<code>&lt;section&gt;</code> • 用户输入：To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> • 代码块：<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre> • 变量：<var>y</var> = <var>m</var><var>x</var> + <var>b</var> • 程序输出：<samp>This text is meant to be treated as sample output from a computer program.</samp>

  9. 表格 • 基本实例：为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。<table class="table"> ... </table> • 条状文表格 ：通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。 (IE8不支持) • 带边框的表格：添加 .table-bordered 类为表格和其中的每个单元格增加边框。<table class="table table-bordered"> ... </table> • 鼠标悬停：通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。<table class="table table-hover"> ... </table> • 紧缩表格：通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。 • 状态类：通过这些状态类可以为行或单元格设置颜色。 .active 鼠标悬停在行或单元格上时所设置的颜色 .success 标识成功或积极的动作 .info 标识普通的提示信息或动作 .warning 标识警告或需要用户注意 .danger 标识危险或潜在的带来负面影响的动作 • 响应式表格： 将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。 <div class="table-responsive"> <table class="table"> ... </table> </div>

  10. 3 6 5 2 控件尺寸 排版 各种状态 排版 水平排列的表单 内联表单 排版 7 辅助文本 排版 表单 1 1 1 1 1 HTML5 文档类型 HTML5 文档类型 HTML5 文档类型 基本实例 4 被支持的控件

  11. 表单-基本实例 单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

  12. 表单-内联表单 为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。 需要手动设置宽度 在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单，我们将这些元素的宽度设置为 width: auto;，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。 一定要添加 label 标签 如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 label 设置 .sr-only 类将其隐藏。

  13. 表单-水平排列的表单 通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

  14. 表单 – 被支持的控件 • 输入框：包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。只有正确设置了 type 属性的输入控件才能被赋予正确的样式。 • 文本域：支持多行文本的表单控件。可根据需要改变 rows 属性。<textarea class="form-control" rows="3"></textarea> • 多选和单选框：多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。 • 设置了 disabled 属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的 <label> 标签，如果也希望将悬停于上方的鼠标设置为“禁 止点击”的样式，请将 .disabled 类赋予 .radio、.radio-inline、.checkbox、.checkbox-inline 或 <fieldset>。默认外观（堆叠在一起） • 内联单选和多选框：通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列 在一行。 • 下拉菜单：使用默认选项或添加 multiple 属性可以同时显示多个选项 <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <select multiple class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> 内联单选，多选框 单选，多选框

  15. 表单-静态控件 如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。

  16. 表单-各种状态 • 输入框焦点：我们将某些表单控件的默认 outline 样式移除，然后对 :focus 状态赋予 box-shadow 属性。（bootstrap已做） • 被禁用的输入框 ：为输入框设置 disabled 属性可以防止用户输入，并能对外观做一些修改，使其更直观 <input type="text" disabled="" placeholder="Disabled input here…" id="disabledInput" class="form-control"> • 被禁用的fieldset：为<fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件。 <a>标签不受影响 IE9 和以下浏览器不支持，最好还是考虑JS实现 • 只读输入 ：<input type="text" readonly="" placeholder="Readonly input here…" class="form-control"> • 校验状态：Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件 的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。 • 添加额外的图标：你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。 自定义图标 校验状态

  17. 表单-控件尺寸 高度尺寸 水平排列的表单组的尺寸 通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。 调整列尺寸 用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。

  18. 表单-辅助文本 针对表单控件的“块（block）”级辅助文本。

  19. 3 2 激活状态 排版 尺寸 按钮 1 1 1 1 1 预定义样式 HTML5 文档类型 HTML5 文档类型 HTML5 文档类型 4 禁用状态 5 按钮类

  20. 按钮-预定义样式 使用下面列出的类可以快速创建一个带有预定义样式的按钮

  21. 按钮-尺寸 需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 可以获得不同尺寸的按钮。

  22. 按钮-激活状态 当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于 <button> 元素，是通过 :active 状态实现的。对于 <a> 元素，是通过 .active 类实现的。然而，你还可以将 .active 应用到 <button> 上，并通过编程的方式使其处于激活状态。

  23. 按钮-禁用状态 button 元素 为 <button> 元素添加 disabled 属性，使其表现出禁用状态。（IE9 及以下浏览器背景不兼容） 链接（<a>）元素 为基于 <a> 元素创建的按钮添加 .disabled 类。（上面提到的类只是通过设置 pointer-events: none 来禁止 <a> 元素作为链接的原始功能）

  24. 按钮-按钮类 为 <a>、<button> 或 <input> 元素应用按钮类。

  25. 图片

  26. 辅助类 5 3 2 4 8 7 9 6 居中的内容块 关闭按钮 文本背景 排版 排版 三角符号 排版 排版 排版 快速浮动 显示隐藏内容 清除浮动 阅读器 10 图片替换 排版 1 1 1 1 1 HTML5 文档类型 HTML5 文档类型 文本颜色 HTML5 文档类型

  27. 文本颜色

  28. 文本背景

  29. 关闭按钮

  30. 三角符号

  31. 快速浮动 To align components in navbars with utility classes, use .navbar-left or .navbar-right instead. See the navbar docs for details.

  32. 居中的内容块

  33. 清除浮动

  34. 显示隐藏

  35. 屏幕阅读器

  36. 图片替换

  37. 响应式工具

  38. 谢谢您的耐心阅读！ 更多内容请访问http://v3.bootcss.com

More Related