Bootstrap笔记(十三) 常用类别

常用类别 - 文绕图

文绕图种类
解除文绕图
响应式文绕图

文绕图种类

靠左文绕图 .float-start
靠右文绕图 .float-end
没有文绕图 .float-none

範例:

<!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><!-- 靠左文绕图 --><img src="https://picsum.photos/200/120/?random=1" class="float-start"><p>結廬在人境，而無車馬喧。<br>問君何能爾，心遠地自偏。<br>採菊東籬下，悠然見南山。<br>山氣日夕佳，飛鳥相與還。<br>此中有眞意，欲辨已忘言。</p><!-- 靠右文绕图 --><img src="https://picsum.photos/200/120/?random=2" class="float-end"><p>結廬在人境，而無車馬喧。<br>問君何能爾，心遠地自偏。<br>採菊東籬下，悠然見南山。<br>山氣日夕佳，飛鳥相與還。<br>此中有眞意，欲辨已忘言。</p><!-- 没有文绕图 --><img src="https://picsum.photos/200/120/?random=3" class="float-none"><p>結廬在人境，而無車馬喧。<br>問君何能爾，心遠地自偏。<br>採菊東籬下，悠然見南山。<br>山氣日夕佳，飛鳥相與還。<br>此中有眞意，欲辨已忘言。</p>
</body>
</html>

解除文绕图

可以使用CSS提供的 clear 属性来解除文绕图效果。

範例:

将图片设定为靠左文绕图，理论上，后面的标题与段落(诗句)都应该排在图片的又边，但是因为在段落加上 clear:left 属性解除文绕图，因此只有标题会排在图片的右边，而段落(诗句)则是排在图片下方，不会做文绕图。

<!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="container"><img src="https://picsum.photos/200/120/?random=1" class="float-start"><h2>【飲酒 - 其五】</h2><!-- 清除float效果 --><p style="clear:left;">結廬在人境，而無車馬喧。<br>問君何能爾，心遠地自偏。<br>採菊東籬下，悠然見南山。<br>山氣日夕佳，飛鳥相與還。<br>此中有眞意，欲辨已忘言。</p></div>
</body>
</html>

响应式文绕图

Bootstrap也提供许多响应式文绕图类别，例如:

Bootstrap笔记(十三) 常用类别 - 文绕图相关推荐

OpenGL学习笔记(十三)：将纹理贴图应用到四边形上，对VAO/VBO/EBO/纹理/着色器的使用方式进行总结
原博主博客地址:http://blog.csdn.net/qq21497936 本文章博客地址:http://blog.csdn.net/qq21497936/article/details/7919 ...
常用技术文档图--usecase图
构成用例图由参与者(Actor).用例(Use Case).系统边界.箭头组成,用画图的方法来完成. 参与者参与者不是特指人,是指系统以外的,在使用系统或与系统交互中所扮演的角色.因此参与者可以是 ...
Python学习笔记——脚本常用功能案例(识图定位，点击，文字输入)
所需图片(测试时自己截图) 01.png 02.png 一.案例代码 import pyautogui import time import aircv as ac from PIL import I ...
整理项目管理工具，管理笔记，常用文档管理系统
整理一些常见得项目管理工具,相关项目管理者得管理笔记,常用得文档管理系统. 供有需要得人查阅. 1 项目管理工具 1.1 禅道敏捷的项目管理软件完整支持敏捷方法Scrum 增加测试.文档.发布.计 ...
Bootstrap笔记(十六) 常用类别 - 显示层级与隐藏元素
常用类别 - 显示层级显示层级隐藏元素显示层级 Bootstrap提供了一些类别来变更HTML元素的CSS的display属性,而且这些类别具有响应式特点,其命名形式如下: xs的层级类别: . ...
Bootstrap笔记(十四) 常用类别 - 间距
常用类别 - 间距间距间距 Bootstrap提供的间距类别可以套用到 xs ~ xxl 等响应式断点,命名形式如下: xs的间距类别: {property} {sides} - {size} s ...
Bootstrap笔记(十五) 常用类别 - 阴影
常用类别 - 阴影阴影阴影 Bootstrap提供以下类别用来设定阴影: 範例: <!DOCTYPE html> <html lang="en"> &l ...
让自己写的电子笔记连文带图全平台兼容（MarkDown图片显示兼容）
文章目录一.工具使用语言使用:MarkDown 简介使用原因使用方法软件使用:Typora 简介环境设置搭建 1)搭建图床 2)配置PicGo 3)配置typora 4)测试图片上传测试 ...
机器学习系列笔记十三: 集成学习/模型聚合
机器学习系列笔记十三: 集成学习/模型聚合文章目录机器学习系列笔记十三: 集成学习/模型聚合什么是集成学习 Voting Hard Voting 模拟实现Hard Voting 集成学习使用V ...

Bootstrap笔记(十三) 常用类别 - 文绕图

常用类别 - 文绕图

文绕图种类

解除文绕图

响应式文绕图

Bootstrap笔记(十三) 常用类别 - 文绕图相关推荐

最新文章

热门文章