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>

下图为大分辨率（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>

相关文章