Bootstrap 布局组件 / 根据情境变化效果 - 汇智网

Bootstrap 布局组件  互动版

Glyphicons 字体图标

简介所有可用的图标如何使用实例

下拉菜单

实例对齐标题分割线禁用的菜单项

按钮组

简介基本的按钮组按钮工具栏尺寸嵌套垂直排列两端对齐排列的按钮组

按钮式下拉菜单

简介单按钮下拉菜单分裂式按钮下拉菜单尺寸向上弹出式菜单

输入框组

简介基本实例尺寸作为额外元素的多选框和单选框作为额外元素的按钮作为额外元素的按钮式下拉菜单作为额外元素的分裂式按钮下拉菜单

导航

简介标签页胶囊式标签页两端对齐的标签页禁用的链接带下拉菜单的标签页带有下拉菜单的胶囊

导航条

默认样式的导航条品牌图标表单按钮文本非导航的链接组件排列固定在顶部固定在底部静止在顶部反色的导航条路径导航

分页

默认分页禁用和激活状态尺寸翻页默认实例对齐链接可选的禁用状态

标签徽章巨幕页头

标签徽章巨幕页头

缩略图警告框

缩略图默认样式的实例缩略图自定义内容警告框实例可关闭的警告框警告框中的链接

进度条

基本实例带有提示标签的进度条根据情境变化效果条纹效果动画效果堆叠效果

列表组

基本实例徽章链接被禁用的条目情境类定制内容

面板

基本实例带标题的面版情境效果带表格的面版带列表组的面版

在线工具推荐： Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

根据情境变化效果

进度条组件使用与按钮和警告框相同的类，根据不同情境展现相应的效果。

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

带有提示标签的进度条