# 5.Utilities：工具 - 1. 邊框 中文網站邊框部分：http://bs4.vx.link/index.html?tmpui_page=/pages/utilities - 2. 清除浮動 - 3. 關閉圖標 - 4. 顏色 - 5. 顯示 3.x版本顯示只有三種：block, inl ...
# 5.Utilities：工具 - 1. 邊框 中文網站邊框部分：http://bs4.vx.link/index.html?tmpui_page=/pages/utilities - 2. 清除浮動 - 3. 關閉圖標 - 4. 顏色 - 5. 顯示 3.x版本顯示只有三種：block, inline, inline-block。類名叫visiable-{breakpoint}-block 3.x版本隱藏的類名：.hidden-{breakpoint} 3.x版本列印顯示的類名：.visiable-print-block 4.x版本：d-block,d-inline,d-inline-block,d-flex,d-table等等 ```html <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > <title>Document</title> <style> </style> </head> <body> <div class="container"> <div class="row"> <!-- 在各種尺寸下顯示一個元素，只在某個尺寸下顯示，在其他尺寸下隱藏 1.隱藏式分為兩個部分 1.比他大的尺寸隱藏 2.比他小的尺寸隱藏 --> <div class="col bg-primary text-white d-none d-xl-block">只在超大屏下顯示</div> <div class="col bg-primary text-white d-none d-lg-block d-xl-none">只在大屏下顯示</div> <div class="col bg-primary text-white d-none d-md-block d-lg-none">只在中屏下顯示</div> <div class="col bg-primary text-white d-none d-sm-block d-md-none">只在小屏下顯示</div> <div class="col bg-primary text-white d-sm-none">只在超小屏屏下顯示</div><!--預設是d-block,只要比超小屏大的隱藏就好--> </div> <!-- 在各種尺寸下隱藏 --> <div class="row"> <div class="col g-primary text-white d-xl-none">超大屏幕以外的顯示</div> <div class="col g-primary text-white d-lg-none d-xl-block">大屏幕以外的顯示</div> <div class="col g-primary text-white d-md-none d-lg-block">中屏幕以外的顯示</div> <div class="col g-primary text-white d-sm-none d-md-block">小屏幕以外的顯示</div> <div class="col g-primary text-white d-none d-sm-none">超小屏幕以外的顯示</div> </div> <!-- 在列印情況下顯示:.d-print-block --> <div class="row"> <div class="col d-none d-print-block">auther:lanshanxiao</div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script> </body> </html> ``` - 6. 嵌入 ```html <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > <title>Document</title> <style> </style> </head> <body> <div class="container"> <div class="row"> <div class="embed-responsive embed-responsive-21by9"> <iframe src="xx.xxx.xxx" allowfullscreen></iframe> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script> </body> </html> ``` 以上是markdown格式的筆記
