bootstrap初探2

  1. 控制是否显示：visible-(lg | md | sm |sx)-(block | inline | inline-block), hidden-(lg | md | sm |sx) 
    • <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>无标题文档</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.css">
        <style>
            .container{ border:1px #000 solid; background: #CCC;}
            div[class^=col-] { color: white; border: 1px solid red;}
        </style>
    </head>
<body>

<div class="container">
    <div class="row">
        <div class="col-lg-4 visible-lg-block">aaaaaa</div>
        <div class="hidden-sm hidden-xs">bbbbbb</div>
    </div>
</div>

</body>
    <script src="js/jquery-2.1.3.js"></script>
    <script src="js/bootstrap.js"></script>
</html>
      View Code

       

    • 下图为大分辨率（lg）下的显示，两个div均能显示

    • 下图为md分辨率下的显示，由于设置了visible-lg-block，即只有在大分辨率下才能显示，所以在md下，aaaaaa不能显示
    • 下图为在小分辨率下的显示，由于第二个div设置了hidden-sm hidden-xs，所以在小分辨率和超小分辨率下均不显示
  2. 设置浮动pull-left(左浮动)，pull-right(右浮动)
  3. 设置固定定位 class="affix"
  4. 设置打印模式下是否可见visible-print-block，hidden-print，demo如下所示，在打印模式下只能看见aaaaaa，在非打印模式下只能看见bbbbbb 
    <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>无标题文档</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.css">
        <style>
            .container{ border:1px #000 solid; background: #CCC;}
            div[class^=col-] { color: white; border: 1px solid red;}
        </style>
    </head>
<body>

<div class="container">
    <div class="row">
        <div class="visible-print-block">aaaaaa</div>
        <div class="hidden-print">bbbbb</div>
    </div>
</div>

</body>
    <script src="js/jquery-2.1.3.js"></script>
    <script src="js/bootstrap.js"></script>
</html>
    View Code

     

posted @ 2015-10-31 20:41  踏浪拾小贝  阅读(178)  评论(0)  编辑  收藏  举报