📅 最后修改于: 2023-12-03 14:59:02.523000 🧑 作者: Mango
Bootstrap is a popular front-end framework that helps developers build responsive and mobile-first websites. With the release of Bootstrap 5, developers now have access to new features and improvements, including the ability to use 100vh for layout.
100vh stands for "100 percent viewport height." This means that whatever element it's applied to will take up the entire height of the viewport. This can be useful for creating full-screen layouts, hero images, and other designs that require a specific vertical height.
To use 100vh in Bootstrap 5, you can simply add the vh-100 class to any element. For example, if you want your entire page to be 100vh, you can add the following class to the body element:
<body class="vh-100">
You can also use 100vh on other elements, such as a section element for a hero image:
<section class="vh-100">
<img src="hero-image.jpg" alt="Hero Image">
</section>
Keep in mind that 100vh can cause issues on some devices, especially those with address bars or nav bars that take up space on the screen. To avoid this, you can use the 100% value instead, which will take up 100 percent of the parent element.
With the addition of 100vh in Bootstrap 5, developers have even more tools to create responsive and modern designs. By using the vh-100 class, you can easily create full-screen layouts that adjust to any screen size. However, be aware of potential issues on certain devices and consider using 100% instead in those cases.