首页 > > 网页制作 > css >

5.Utilities：工具

2020-05-31 16:00:14来源：博客园阅读 ()

5.Utilities：工具

# 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>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <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="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> </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>  <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>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <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格式的笔记

原文链接:https://www.cnblogs.com/lanshanxiao/p/12996337.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有