# 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 > <div > <!-- 在各種尺寸下顯示一個元素，只在某個尺寸下顯示，在其他尺寸下隱藏 1.隱藏式分為兩個部分 1.比他大的尺寸隱藏 2.比他小的尺寸隱藏 --> <div >只在超大屏下顯示</div> <div >只在大屏下顯示</div> <div >只在中屏下顯示</div> <div >只在小屏下顯示</div> <div >只在超小屏屏下顯示</div><!--默認是d-block,只要比超小屏大的隱藏就好--> </div> <!-- 在各種尺寸下隱藏 --> <div > <div >超大螢屏以外的顯示</div> <div >大螢屏以外的顯示</div> <div >中螢屏以外的顯示</div> <div >小螢屏以外的顯示</div> <div >超小螢屏以外的顯示</div> </div> <!-- 在列印情況下顯示:.d-print-block --> <div > <div >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 > <div > <div > <iframe src="https://www.cnblogs.com/lanshanxiao/p/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格式的筆記
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/31370.html
標籤：Html/Css
下一篇：CSS Grid 布局