您的位置:首页 - 教程 - Bootstrap - 正文
bootstrap——辅助类和响应式工具类

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>辅助类和响应式工具类</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<style type="text/css">
    .a{
        height: 50px;
        width: 200px;
        border: 1px solid #ccc;
        background-color: #eee;
    }
</style>
<body style="margin:50px;">
    <!-- 辅助类 -->
    <!--
    前景色
    text-muted:柔和灰
    text-primary:主要蓝
    text-success:成功绿
    text-info:信息蓝
    text-warning:警告黄
    text-danger:危险红

    背景色
    bg-primary:主要蓝
    bg-success:成功绿
    bg-info:信息蓝
    bg-warning:警告黄
    bg-danger:危险红
     -->
     <p class="text-muted">bootstrap柔和灰</p>
     <p class="text-primary">bootstrap主要蓝</p>
     <p class="text-success">bootstrap成功绿</p>
     <p class="bg-info">bootstrap信息蓝</p>
     <p class="bg-warning">bootstrap警告黄</p>
     <p class="bg-danger">bootstrap危险红</p>

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

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

    <!-- 快速浮动 -->
    <div class="pull-left a">
        左边
    </div>
    <div class="pull-right a">
        右边
    </div>

    <!-- 块级居中 -->
    <div class="center-block a">居中</div>


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

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

    <!--
                    超小屏幕        小屏幕        中等屏幕        大屏幕
    .visible-xs-*    见                藏            藏            藏
    .visible-sm-*    藏                见            藏            藏
    .visible-md-*    藏                藏            见            藏
    .visible-lg-*    藏                藏            藏            见
    .hidden-xs       藏                见            见            见
    .hidden-sm       见                藏            见            见
    .hidden-mc       见                见            藏            见
    .hidden-lg       见                见            见            藏

    对于显示的内容,有三种。分别为:block、inline-block、inline
     -->
     <!-- 超小屏幕显示 -->
    <div class="visible-xs-block a">超小屏幕激活显示</div>

    <!-- 超小屏幕隐藏 -->
    <div class="hidden-xs a">超小屏幕隐藏</div>



    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

 


评论: