bootstrap学习6-辅助类和响应工具 

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <title>辅助类和响应式工具</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
        .a{
            background-color:red ;
            color: aquamarine;
            border: 1px red solid;
            width: 90px;
        }
    </style>
  </head>
  <body style="margin:50px;">
 <!--
    情景文本颜色:
     text-muted 柔和灰
     text-primary 主要蓝
     text-success 成功绿
     text-info   信息蓝
     text-warning 警告黄 
     text-danger 危险红
     text-default 默认色
   情景背景颜色:
     bg-primary 主要蓝
     bg-success 成功绿
     bg-info   信息蓝
     bg-warning 警告黄
     bg-danger 危险红   
     bg-default 默认色
 -->
 
  <!--
      close 关闭按钮
      
  -->  
 <button class="close"></button>
 <p class="text-danger bg-success">世界真奇妙</p>        
 <!--
     caret 三角标
     pull-left 左浮动
  clearfix 清理浮动
  pull-right 右浮动
  center-block 块元素居中
 -->     
  <span class="caret"></span>
  <div class="pull-left a">小希</div>
  <div class="clearfix"></div>
  <div class="a">小周</div>
  <div class="center-block a">居中</div>
  <div class="show">显示</div>
  <div class="hidden">隐藏</div>
  
  <!--
      屏幕隐藏显示响应
      visible-xs-block
      hidden-xs
  -->
  <div class="visible-xs-block a">超小屏幕显示</div>
  <div class="clearfix"></div>
  <div class="hidden-lg a">超大屏幕隐藏</div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

 

posted @ 2017-02-12 15:56  daniel-lij  阅读(157)  评论(0)    收藏  举报