5.Utilities:工具

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

新老客户大回馈,云服务器低至5折

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>     <!-- 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格式的笔记

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

标签:

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

上一篇:web前端是什么?需要掌握什么技术?

下一篇:Vue 打包后自定义样式无法覆盖elementUI组件原有样式问题