bootstrap初探2

時間 2019-12-14

原文原文鏈接

控制是否顯示：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>