Bootstrap进行响应式页面布局二

谁践踏了优雅 2022-04-18 06:31 159阅读 0赞

### Bootstrap 辅助类： ###

文本：

<table> 
 <tbody> 
  <tr> 
   <td>.text-muted</td> 
   <td>"text-muted" 类的文本样式</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.text-primary</td> 
   <td>"text-primary" 类的文本样式</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.text-success</td> 
   <td>"text-success" 类的文本样式</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.text-info</td> 
   <td>"text-info" 类的文本样式</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.text-warning</td> 
   <td>"text-warning" 类的文本样式</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.text-danger</td> 
   <td>"text-danger" 类的文本样式</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

背景：

<table> 
 <tbody> 
  <tr> 
   <td>.bg-primary</td> 
   <td>表格单元格使用了 "bg-primary" 类</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.bg-success</td> 
   <td>表格单元格使用了 "bg-success" 类</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.bg-info</td> 
   <td>表格单元格使用了 "bg-info" 类</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.bg-warning</td> 
   <td>表格单元格使用了 "bg-warning" 类</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.bg-danger</td> 
   <td>表格单元格使用了 "bg-danger" 类</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

其他：

<table> 
 <tbody> 
  <tr> 
   <th>类</th> 
   <th>描述</th> 
   <th>&nbsp;</th> 
  </tr> 
  <tr> 
   <td>.pull-left</td> 
   <td>元素浮动到左边</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.pull-right</td> 
   <td>元素浮动到右边</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.center-block</td> 
   <td>设置元素为 display:block 并居中显示</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.clearfix</td> 
   <td>清除浮动</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.show</td> 
   <td>强制元素显示</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.hidden</td> 
   <td>强制元素隐藏</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.sr-only</td> 
   <td>除了屏幕阅读器外，其他设备上隐藏元素</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.sr-only-focusable</td> 
   <td>与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.text-hide</td> 
   <td>将页面元素所包含的文本内容替换为背景图</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.close</td> 
   <td>显示关闭按钮</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.caret</td> 
   <td>显示下拉式功能</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

快速浮动：

<div class="pull-left"> 向左快速浮动 </div>

<div class="pull-right"> 向右快速浮动 </div>

内容居中块元素：

这是 center-block 实例

</div>

显示和隐藏内容：

这是 show class 的实例

</div>

这是 hide class 的实例

</div>