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> <!-- 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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 小谢第23问: chorme的性能优化工具 2020-06-10
- css:chorm调试工具(修改样式、重置缩放比例、错误提示) 2020-05-30
- 转web前端开发,需要哪些工具和需要学习什么? 2020-05-21
- 【2020Python修炼记】前端开发之 前端工具和HTML 2020-05-11
- 谷歌浏览器安装和开发者工具 2020-05-04
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash