Bootstrap入门学习资料.pptVIP

Bootstrap 表格上下文类 上下文类，用来改变表格行或单个单元格背景颜色 class=active class=success class=warning class=danger 响应式表格 div class=table-responsivetable/div Bootstrap 表单布局 Bootstrap提供了下列类型的表单布局： 垂直表单 内联表单 水平表单 Bootstrap 垂直表单 创建基本表单的步骤： 1. 向父form元素添加role=form 2. 把标签和控件放在一个class=form-group的div中，获取最佳间距 3. 向所有的文本元素inputtextareaselect等，添加class=form-control Bootstrap 内联表单 如果创建一个表单，他的所有元素是内联的，向左对齐，请向form标签中添加class=form-inline 默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。 使用 class .sr-only，您可以隐藏内联表单的标签。 Bootstrap 水平表单 创建水平表单步骤： 1. 向父 form 元素添加 class .form-horizontal 2. 把标签和控件放在一个带有 class .form-group 的 div 中。 3. 向标签添加 class .control-label。 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 表单控件状态 除了 :focus 状态，Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。 输入框焦点 禁用的输入框input 禁用的字段集fieldset 验证状态 Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可 Bootstrap 表单控件大小 您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。 Bootstrap 按钮 任何带有 class=btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示： class=btn 默认的按钮 class=btn-primary 一组按钮中的初始状态 class=btn-success 一个成功或积极的动作 class=btn-info 警告信息的上下文按钮 class=btn-warning 谨慎采取的动作 class=btn-danger 潜在危险动作 class=btn-link 看起来想一个连接，但保持按钮的行为 Bootstrap 按钮大小 获得各种大小按钮的 class： class=btn-lg class=btn-sm class=btn-xs class=btn-block Bootstrap 按钮状态 Bootstrap 提供了激活、禁用等按钮状态的 class 激活状态：class=active 禁用状态：class=disabled 以上按钮的状态也同样适用于锚元素a Bootstrap 插件(一) 1. Bootstrap过渡效果 2. Bootstrap模态框 3. Bootstrap 下拉菜单 4. Bootstrap 滚动监听 5. Bootstrap标签页 6. Bootstrap 工具提示 7. Bootstrap 弹出框 8. Bootstrap 警告框 注意不要在同一个页面插件名称不要相同 Bootstrap 插件(二) 1. Bootstrap 按钮 2. Bootstrap 折叠 3. Bootstrap 轮播 4. Bootstrap 附加导航 过渡效果总结 fade 默认。淡入淡出到下一页。 flip 从后向前翻动到下一页