Bootstrap笔记(十六) 常用类别 - 显示层级与隐藏元素

常用类别 - 显示层级

显示层级
隐藏元素

显示层级

Bootstrap提供了一些类别来变更HTML元素的CSS的display属性，而且这些类别具有响应式特点，其命名形式如下:

xs的层级类别: .d - { 设定值 }
sm、md、lg、xl、xxl的层级类别: .d - { 断点 } - { 设定值 }

设定值如下:

none: 不显示。
inline: 行内层级 (不换行)。
block: 区块层级 (换行)。
inline-block: 不换行，但可以设定宽度、高度、padding与margin。
table: 表格。
table-cell: 表格的储存格。
table-row: 表格的列。
flex: 使用flex，容器大小不会随着内容变化。
inline-flex: 使用inline-flex，容器大小会随着内容变化。

範例1: 将区块层级变成行内层级

<div>原本的CSS display属性是block (会换行)，在这里我们透过bootstrap将他的属性改成inline (不会换行)。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Bootstrap CDN --><!-- CSS only --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"><!-- JavaScript Bundle with Popper --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script><title>改变层级</title>
</head>
<body><div class="d-inline p-2 bg-info text-white">d-inline</div><div class="d-inline p-2 bg-dark text-white">d-inline</div>
</body>
</html>

範例2: 将行内层级变成区块层级

<span>原本的CSS display属性是inline (不会换行)，在这里我们透过bootstrap将他的属性改成block(会换行)。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Bootstrap CDN --><!-- CSS only --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"><!-- JavaScript Bundle with Popper --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script><title>改变层级</title>
</head>
<body><span class="d-block p-2 bg-info text-white">d-block</span><span class="d-block p-2 bg-dark text-white">d-block</span>
</body>
</html>

隐藏元素

Bootstrap提供以下类别来隐藏元素:

範例: 隐藏元素

d-md-none: 當螢幕大於md斷點(768px)時就隱藏此元素。
d-none d-md-block: 當螢幕小於md斷點(768px)時就隱藏此元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Bootstrap CDN --><!-- CSS only --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"><!-- JavaScript Bundle with Popper --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script><title>隐藏元素</title>
</head>
<body><div class="d-md-none">當螢幕大於md斷點時就隱藏</div><div class="d-none d-md-block">當螢幕小於md斷點時就隱藏</div>
</body>
</html>

当荧幕宽度小于768px时会显示以下文字。

当荧幕宽度大于768px时会显示以下文字。

Bootstrap笔记(十六) 常用类别 - 显示层级与隐藏元素相关推荐

Bootstrap笔记(十四) 常用类别 - 间距
常用类别 - 间距间距间距 Bootstrap提供的间距类别可以套用到 xs ~ xxl 等响应式断点,命名形式如下: xs的间距类别: {property} {sides} - {size} s ...
Bootstrap笔记(十五) 常用类别 - 阴影
常用类别 - 阴影阴影阴影 Bootstrap提供以下类别用来设定阴影: 範例: <!DOCTYPE html> <html lang="en"> &l ...
Bootstrap笔记(十二) 常用類別 - 色彩
常用類別 - 色彩文字色彩背景色彩文字色彩 Bootstrap提供以下類別用來設定文字色彩 : 範例: 文字色彩不同的文字色彩類別會呈現不同的文字色彩,其中最後一行在 .text-black ...
pdfstamper生成pdf无法显示汉字_正点原子STM32F4/F7水星开发板资料连载第四十六章汉字显示实验...
1)实验平台:正点原子水星 STM32F4/F7 开发板 2)摘自<STM32F7 开发指南(HAL 库版)>关注官方微信号公众号,获取更多资料:正点原子 3)全套实验源码+手册+视频下载 ...
fastreport masterdata每页都显示_ALIENTEK 阿波罗 STM32F767 开发板资料连载十六章 OLED 显示实验...
1)实验平台:alientek 阿波罗 STM32F767 开发板2)摘自<STM32F7 开发指南(HAL 库版)>关注官方微信号公众号,获取更多资料:正点原子 http://weixi ...
光盘显示0字节可用_正点原子STM32F4/F7水星开发板资料连载第四十六章汉字显示实验
1)实验平台:正点原子水星 STM32F4/F7 开发板 2)摘自<STM32F7 开发指南(HAL 库版)>关注官方微信号公众号,获取更多资料:正点原子 3)全套实验源码+手册+视频下载 ...
电脑安装python3.74_python3.4学习笔记(十六) windows下面安装easy_install和pip教程
python3.4学习笔记(十六) windows下面安装easy_install和pip教程 easy_install和pip都是用来下载安装Python一个公共资源库PyPI的相关资源包的首先安 ...
Polyworks脚本开发学习笔记(十六)-用C#进行Polyworks二次开发
Polyworks脚本开发学习笔记(十六)-用C#进行Polyworks二次开发 Polyworks支持C#二次开发,用对应的SDK文档试着做一下开发样例. 新建一个C#项目,在解决方案中右键添加引用 ...
Mr.J-- jQuery学习笔记(十六)--展开和收起动画折叠菜单的实现
之前写过动画的隐藏与显示:Mr.J-- jQuery学习笔记(十四)--动画显示隐藏动画隐藏与显示的一个小demo--对联广告:Mr.J-- jQuery学习笔记(十五)--实现页面的对联广告与动 ...

Bootstrap笔记(十六) 常用类别 - 显示层级与隐藏元素

常用类别 - 显示层级

显示层级

隐藏元素

Bootstrap笔记(十六) 常用类别 - 显示层级与隐藏元素相关推荐

最新文章

热门文章