bootstrap初探2

控制是否显示：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，所以在小分辨率和超小分辨率下均不显示

设置浮动pull-left(左浮动)，pull-right(右浮动)
设置固定定位 class="affix"

设置打印模式下是否可见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