首页 > 代码库 > Bootstrap 辅助类和响应式工具（四）

Bootstrap 辅助类和响应式工具（四）

2024-09-10 08:58:21   216人阅读

一、辅助类

 

<div class="container"> 
    <p class="text-muted">Bootstrap练习系统学习,没有bg-muted 类别</p>   
    <p class="bg-success text-success">Bootstrap练习系统学习</p>
    <p class="bg-danger text-danger">Bootstrap练习系统学习</p>
    <p class="bg-primary text-primary">Bootstrap练习系统学习</p>
    <p class="bg-info text-info">Bootstrap练习系统学习</p>
    <p class="bg-warning text-warning">Bootstrap练习系统学习</p>
  </div> 

 <!-- 关闭按钮 -->
  <button class="close">&times;</button> 

  <!-- 三角符号 -->
  <span class="caret"></span>

  <!-- 快速浮动 -->
  <div class="pull-left a">左边</div>
  <div class="pull-right a">右边</div>
 
 <!-- 块级居中 -->
 <div class="center-block a">块级居中</div>

  <!-- 清理浮动 -->
  <div class="pull-left a">左边</div>
  <div class="clearfix"></div>
  <div class="a">右边</div>

  <!-- 显示隐藏 -->
  <div class="show">show</div>
  <div class="hidden">hidden</div>

 

.text-muted       //   情景文本，柔和灰

.text-primary     //   情景文本，主要蓝

.text-success     //   情景文本，成功绿

.text-info           //   情景文本，信息蓝

.text-warning    //   情景文本，警告黄

.text-danger      //   情景文本，危险红

情景背景色没有此类 bg-muted

.bg-primary      //  情景背景色，主要蓝

.bg-success      //  情景背景色，成功绿

.bg-info           //  情景背景色，信息蓝

.bg-warning    //  情景背景色，警告黄

.bg-danger      //  情景背景色，危险红

 

.close                 //  关闭按钮 ×

.caret                 //  三角符号

.pull-left            //  向左浮动，有最高优先级

.pull-right          //  向右浮动，有最高优先级

.center-block     //  块级居中，与 margin：x auto； 的用法相同

.clearfix             //  清除浮动

.show                //  显示，加强优先级

.hidden             //  隐藏，加强优先级

 

二、响应式工具

媒体查询，针对不同的屏幕大小，需要显示和隐藏的部分内容，通过一下类别解决。

技术分享

<div class="visible-xs-* a">Bootstarp</div> // 只有在超小屏幕下可见
<div class="hidden-xs a">Bootstarp</div>  // 超小屏幕便隐藏掉看不到

对于 visible 显示的内容 * 部分有三个值可选： block， inline-block 、inline；

 

Bootstrap 辅助类和响应式工具（四）


联系
我们