Bootstrap

Bootstrap 代码
1. Bootstrap允许你以两种形式显示代码： code标签 pre标签 注意：请确保你使用<pre>和<code>标签时，开始标签和结束标签使用 Unicode变体 &lt &gt 2. google prettify插件的使用 注意：要显示代码行号增加样式： li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8{list-style: decimal;} .linenums{padding-left:5px}
导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。 默认地，导航栏中的链接会自动转换为按钮（无需 data-role="button"）。 请使用 data-role="navbar" 属性来定义导航栏：
jQuery Mobile列表
jQuery Mobile 中的列表视图是标准的 HTML 列表：有序列表 (<ol>) 和 无序列表 (<ul>)。
手机。 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习
Bootstrap。
Bootstrap结构
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结 构。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩 展的 class，以及一个先进的网格系统。
Bootstrap 表单布局
Bootstrap提供了下列类型的表单布局： 垂直表单 内联表单 水平表单
Bootstrap 垂直表单
创建基本表单的步骤： 1. 向父<form>元素添加role="form" 2. 把标签和控件放在一个class="form-group"的div中，获取最佳间距 3. 向所有的文本元素<input><textarea><select>等，添加class="form-
Bootstrap使用
1. 下载bootstrap:http://getbootstrap.com/2.3.2/ 2. 在html文档中加载bootstrap相关的文件（jquery.js、bootstrap.min.js
和 bootstrap.min.css 文件） 注意：
为了Bootstrap开发的网站对移动设备友好，确保适当的显示和触屏缩放，需要在网页的 head中增加viewport视口
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Bootstrap CSS
1. Bootstrap网格系统 2. Bootstrap排版 3. Bootstrap代码 4. Bootstrap表格 5. Bootstrap表单 6. Bootstrap按钮 7. Bootstrap图像
control"
Bootstrap 内联表单
如果创建一个表单，他的所有元素是内联的，向左对齐，请向form标签中 添加class="form-inline"
默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。 在使用内联表单时，您需要在表单控件上设置一个宽度。
Bootstrap 表格
Bootstrap支持原来的表格元素 table thead：表格标题行容器元素 tbody：表格主题内容 tr td th：表头(必须在thead中) caption：表格存储内容的总结
Bootstrap 表格类
class="table"设置内边距以及水平分割线 class="table-striped"在内容主体上看到条纹 class="table-bordered"表格周围增加边框 class="table-hover"隔行换色 class="table-condensed"精简表格
Bootstrap 表单控件大小
您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。
Bootstrap 按钮
任何带有 class="btn" 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：
Bootstrap 支持的表单控件
Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、 radio 和 select。
1. 输入框： Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text 、password、datetime、datetime-local、date、month、time、week 、number、email、url、search、tel 和 color。 2. 单选框、复选框 对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控 制它们显示在同一行上。
Bootstrap网格系统
Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可 以随着设备和视口大小的增加而适当的增加到最多12列
媒体查询：
用来创建 Bootstrap 网格系统中的关键的分界点，根据不同的视口大小显示不同的内 容
Bootstrap网格系统
网格行为
最大容器宽 度 Class 前缀 列# 最大列宽
jQuery Mobile图标
使用 data-icon 属性给按钮增加图标效果 data-icon属性规则： 在images/icons-png目录中的每个文件名就是data-icon的属性值
使用data-iconpos 属性来规定图标的位置 data-iconpos属性值：top、right、bottom、left
Bootstrap 按钮wk.baidu.com小
获得各种大小按钮的 class： class="btn-lg" class="btn-sm" class="btn-xs" class="btn-block"
Bootstrap 按钮状态
Bootstrap 提供了激活、禁用等按钮状态的 class 激活状态：class="active" 禁用状态：class="disabled"
Bootstrap 插件(二)
1. Bootstrap 按钮 2. Bootstrap 折叠 3. Bootstrap 轮播 4. Bootstrap 附加导航
过渡效果总结
fade flip flow pop slide slidefade slideup slidedown turn none
class="btn"默认的按钮 class="btn-primary"一组按钮中的初始状态 class="btn-success"一个成功或积极的动作 class="btn-info"警告信息的上下文按钮 class="btn-warning"谨慎采取的动作 class="btn-danger"潜在危险动作 class="btn-link"看起来想一个连接，但保持按钮的行为
默认。淡入淡出到下一页。 从后向前翻动到下一页。 抛出当前页面，引入下一页。 像弹出窗口那样转到下一页。 从右向左滑动到下一页。 从右向左滑动并淡入到下一页。 从下到上滑动到下一页。 从上到下滑动到下一页。 转向下一页。 无过渡效果。
jQuery Mobile按钮
jQuery Mobile 中的按钮可通过三种方法创建： 使用 <button> 元素 使用 <input> 元素 使用 data-role="button" 的 <a> 元素
Bootstrap 表单控件状态
除了 :focus 状态，Bootstrap 还为禁用的输入框定义了样式，并提供了表单 验证的 class。
输入框焦点 禁用的输入框input 禁用的字段集fieldset 验证状态
Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地 添加适当的 class（.has-warning、 .has-error 或 .has-success）即可
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框 、弹出框等等。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有 的插件，也可以逐个包含这些插件。
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
.col-xs12 Auto
.col-sm12 60px
.col-md12 78px
.col-lg12 95px
Bootstrap排版
1. 内联子标题 <h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
2. 强调 <small> <strong> <em> 3. 缩写 <abbr title="World Wide Wed">WWW</abbr> 4. 地址 <address></address> 5. 引用 6. 列表
定位页眉和页脚
放置页眉和页脚的方式有三种： inline - 默认。页眉和页脚与页面内容位于行内。 fixed - 页面和页脚会留在页面顶部和底部。 fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部
请使用 data-position 属性来定位页眉和页脚：
jQuery Mobile导航栏
Bootstrap 表格上下文类
上下文类，用来改变表格行或单个单元格背景颜色 class="active" class="success" class="warning" class="danger" 响应式表格 <div class="table-responsive"><table></div>
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的前端框架。
Bootstrap优点
移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优 先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和
Bootstrap入门
CSDN辛兴涛
Web前端系列课程
课程大纲
Bootstrap简介 Bootstrap结构 Bootstrap的简单使用
Bootstrap简介
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的，用于 快速开发 Web 应用程序和网站的前端框架。
使用 class .sr-only，您可以隐藏内联表单的标签。
Bootstrap 水平表单
创建水平表单步骤： 1. 向父 <form> 元素添加 class .form-horizontal 2. 把标签和控件放在一个带有 class .form-group 的 <div> 中。 3. 向标签添加 class .control-label。
以上按钮的状态也同样适用于锚元素<a>
Bootstrap 插件(一)
1. Bootstrap过渡效果 2. Bootstrap模态框 3. Bootstrap 下拉菜单 4. Bootstrap 滚动监听 5. Bootstrap标签页 6. Bootstrap 工具提示 7. Bootstrap 弹出框 8. Bootstrap 警告框
额外的小设 备收集（ <768px）
一直是水平 的 None (auto)
小型设备平板电脑 （≥768px）
以折叠开始，断点 以上是水平的 750px
中型设备台式电脑 大型设备台式电脑
（≥992px）
（≥1200px）
以折叠开始，断点 以上是水平的
970px
以折叠开始，断点 以上是水平的
1170px