Bootstrap CSS 互动版

Bootstrap 简介
什么是 Bootstrap? 为什么使用 Bootstrap? Bootstrap 包的内容 在线实例
Bootstrap 环境安装
下载 Bootstrap 文件结构 HTML 模板 实例 Bootstrap CDN推荐
Bootstrap CSS 概览
HTML 5 文档类型(Doctype) 移动设备优先 响应式图像 全局显示、排版和链接 避免跨浏览器的不一致 容器(Container) Bootstrap 浏览器/设备支持
Bootstrap 网格系统
简介 媒体查询 栅格参数 实例:从堆叠到水平排列 实例:流式布局容器 实例:移动设备和桌面屏幕 实例:手机、平板、桌面 实例:多余的列将另起一行排列 响应式列重置 列偏移 嵌套列 列排序 Less mixin 和变量
Bootstrap 排版
标题 内联子标题 页面主体 内联文本元素 对齐 改变大小写 缩写 地址(Address) 引用(Blockquote) 列表
Bootstrap 代码
内联代码 用户输入 基本代码块 变量 程序输出
Bootstrap 表格
基本实例 条纹状表格 带边框的表格 鼠标悬停 紧缩表格 状态类 响应式表格
Bootstrap 表单
基本实例 内联表单 水平排列的表单 被支持的控件1 被支持的控件2 静态控件 焦点状态 禁用状态 只读状态 校验状态 添加额外的图标 控件尺寸 辅助文本
Bootstrap 按钮
可作为按钮使用的标签或元素 预定义样式 尺寸 激活状态 禁用状态
Bootstrap 图片
简介 响应式图片 图片形状
Bootstrap 辅助类
情境文本颜色 情境背景色 关闭按钮 三角符号 快速浮动 让内容块居中 清除浮动 显示或隐藏内容 屏幕阅读器和键盘导航 图片替换
Bootstrap 响应式工具
简介 可用的类 打印类 测试用例
Bootstrap 使用 Less
编译 Bootstrap 变量1 变量2 特定浏览器厂商的 mixin1 特定浏览器厂商的 mixin2 特定浏览器厂商的 mixin3 特定浏览器厂商的 mixin4 实用工具 mixin
在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。

反馈图标(feedback icon)只能使用在文本输入框 <input class="form-control"> 元素上。

图标、label 和输入控件组

对于不带有 label 标签的输入框以及右侧带有附加组件的输入框组,需要手动为其图标定位。为了让所有用户都能访问你的网站,我们强烈建议为所有输入框添加 label 标签。如果你不希望将 label 标签展示出来,可以通过添加 .sr-only 类来实现。如果的确不能添加 label 标签,请调整图标的 top 值。对于输入框组,请根据你的实际情况调整 right 值。

向辅助技术设备传递图标的含义

为了确保辅助技术- 如屏幕阅读器 - 正确传达一个图标的含义,额外的隐藏的文本应包含在 .sr-only 类中,并明确关联使用了 aria-describedby 的表单控件。或者,以某些其他形式(例如,文本输入字段有一个特定的警告信息)传达含义,例如改变与表单控件实际相关联的 <label> 的文本。

虽然下面的例子已经提到各自表单控件本身的 <label> 文本的验证状态,上述技术(使用 .sr-only 文本 和 aria-describedby) )已经包括了需要说明的目的。

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>