BootStrap4工具类之尺寸

最新推荐文章于 2024-01-09 23:10:09 发布

爱喝水的qdy

最新推荐文章于 2024-01-09 23:10:09 发布

阅读量1.6k

点赞数

分类专栏： BootStrap4 文章标签： bootstrap4 工具类尺寸 width height

本文链接：https://blog.csdn.net/qq_32617703/article/details/103395105

版权

BootStrap4 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

官方文档地址

https://getbootstrap.com/docs/4.4/utilities/sizing/

其它文档地址

https://getbootstrap.net
- https://getbootstrap.net/docs/utilities/sizing/
http://bs4.vx.link
- http://bs4.vx.link/index.html?tmpui_page=/pages/utilities

宽度与高度

使用bs4的宽度和高度工具轻松地将元素设置为宽或高（相对于其父元素）

宽度

.w-{value}
- .w-25
- .w-50
- .w-75
- .w-100
- .w-auto

    <h2>预设包含 25%, 50%, 75%, 100%, 和 auto 做为预设</h2>
    <div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
    <div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
    <div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
    <div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
    <div class="w-auto p-3" style="background-color: #eee;">Width auto</div>

高度

.h-{value}
- .h-25
- .h-50
- .h-75
- .h-100
- .h-auto

 <div style="height: 100px; background-color: rgba(255,0,0,0.1);">
     <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
     <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
     <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
     <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
     <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
 </div>

max-width 与 max-height

.mw-100
.mh-100

<div class="container">
    <h1>你也可以使用 max-width: 100%; and max-height: 100%; 这些工具。
        <img class="mw-100" data-src="holder.js/1000px100?text=Max-width%20%3D%20100%25"
             alt="Max-width = 100% [1000%x100]" style="height: 100px; width: 1000%; display: block;"
             src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22866%22%20height%3D%22100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20866%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16ed0894a81%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A43pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16ed0894a81%22%3E%3Crect%20width%3D%22866%22%20height%3D%22100%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22188.8984375%22%20y%3D%2269.2%22%3EMax-width%20%3D%20100%25%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
             data-holder-rendered="true">
    </h1>

    <div style="height: 100px; background-color: rgba(255,0,0,0.1);">
        <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%
        </div>
    </div>
</div>

相对于视口

.vw-100
.vh-100
.min-vw-100
.min-vh-100

<div class="container">
    <h1>还可以相对于视口</h1>
    <div class="min-vw-100">Min-width 100vw</div>
    <div class="min-vh-100">Min-height 100vh</div>
    <div class="vw-100">Width 100vw</div>
    <div class="vh-100">Height 100vh</div>
</div>

整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"/>
    <title>13尺寸</title>
    <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<pre class="pre-scrollable">

</pre>

<div class="container">
    <h2>使用bs4的宽度和高度工具轻松地将元素设置为宽或高（相对于其父元素）</h2>
    <h2>预设包含 25%, 50%, 75%, 100%, 和 auto 做为预设</h2>
    <div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
    <div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
    <div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
    <div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
    <div class="w-auto p-3" style="background-color: #eee;">Width auto</div>

    <hr/>

    <div style="height: 100px; background-color: rgba(255,0,0,0.1);">
        <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
        <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
        <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
        <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
        <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
    </div>
</div>

<div class="container">
    <h1>你也可以使用 max-width: 100%; and max-height: 100%; 这些工具。
        <img class="mw-100" data-src="holder.js/1000px100?text=Max-width%20%3D%20100%25"
             alt="Max-width = 100% [1000%x100]" style="height: 100px; width: 1000%; display: block;"
             src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22866%22%20height%3D%22100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20866%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16ed0894a81%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A43pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16ed0894a81%22%3E%3Crect%20width%3D%22866%22%20height%3D%22100%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22188.8984375%22%20y%3D%2269.2%22%3EMax-width%20%3D%20100%25%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
             data-holder-rendered="true">
    </h1>

    <div style="height: 100px; background-color: rgba(255,0,0,0.1);">
        <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%
        </div>
    </div>
</div>

<div class="container">
    <h1>还可以相对于视口</h1>
    <div class="min-vw-100">Min-width 100vw</div>
    <div class="min-vh-100">Min-height 100vh</div>
    <div class="vw-100">Width 100vw</div>
    <div class="vh-100">Height 100vh</div>
</div>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>