4. Bootstrap 簡單實用的自適應顯示隱藏方法


我們或多或少都可以在自適應頁面用到,而且非常方便,實現某個元素只在PC顯示 而且  其他...顯和隱藏:

 

 

 

要隱藏的元素,只需要對任何響應屏幕變化使用.d-none這個class即可

語法:

.d-{sm,md,lg,xl}-none

要給給定的屏幕尺寸隔上顯示元素,可以將一個.d-*-none類 與 一個.d-*-*類 組合使用,例如:

.d-none .d-md-block .d-xl-none

 上面這就是說   md 【768px】以上 就顯示  xl【1200px】以上 又隱藏

 

給個圖 和 例:

 

 

 

 其實這個很好記啊  很好記 前提是你吧 xs sm md lg 和 xl 對應的寬 記下來即可     xs 是<576的啊

 

然后這個都是填范圍的 

 google 中毒了  換一個google先

 

這里不多說 自己看圖就行了:

勵:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

    <div class="d-none">
        我在任何屏幕都會隱藏!
    </div>

    <div class="d-block">
        我在任何屏幕都會顯示
    </div>

    <div class="d-none d-sm-block">
        僅在xs隱藏!
    </div>

    <div class="d-lg-block d-xl-none">
        僅在xl顯示!
    </div>

    <div class="d-none d-md-block">
        僅在md顯示!
    </div>


    <div class="d-block">
        我在任何屏幕都會顯示
    </div>

</body>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM