订阅Bootstrap4元素的宽度和高度
来源：网络收集 点击： 时间：2024-03-07打开WebStrom开发工具，新建test.html文件
2/8将bootstrap4的css和js文件夹放到同级目录，目录结构如下图
3/8引入bootstrap4样式文件，代码如下：
!DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 link rel=stylesheet href=bootstrap4.0dist/css/bootstrap.min.css titleTitle/title/headbody div class=bg-dark text-whitehello world/div/body/html
4/8浏览器查看效果如下图，因为div是块级标签，默认会占据整行的显示
5/8修改代码设置div的宽度，代码如下：
!DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 link rel=stylesheet href=bootstrap4.0dist/css/bootstrap.min.css titleTitle/title/headbody div class=bg-dark text-white w-25hello world/div/body/html
这里的w-25是指宽度占百分之二十五
6/8浏览器查看效果如下图，注意调整浏览器宽度，div始终占显示的百分之二十五，这就是响应式的思想
7/8修改代码，设置div的高度，注意这里外面在套一个div，h-50是指占高度占外层div的百分之五十，代码如下：
!DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 link rel=stylesheet href=bootstrap4.0dist/css/bootstrap.min.css titleTitle/title/headbody div style=width:4000px;height: 100px div class=bg-dark text-white w-25 h-50hello world/div /div/body/html
8/8浏览器查看效果如下图所示
版权声明：
1、本文系转载，版权归原作者所有，旨在传递信息，不代表看本站的观点和立场。
2、本站仅提供信息发布平台，不承担相关法律责任。
3、若侵犯您的版权或隐私，请联系本站管理员删除。
4、文章链接：http://www.1haoku.cn/art_279446.html
