开平网站建设,c2c十大平台,短网址生成在线,用php做京东网站页面Bootstrap的.media类是用于创建媒体对象的#xff0c;媒体对象通常用于展示图像#xff08;图片#xff09;和文本内容的组合#xff0c;这种布局在展示新闻文章、博客帖子等方面非常常见。.media类使得创建这样的媒体对象非常简单#xff0c;通常包含一个图像和相关的文本…Bootstrap的.media类是用于创建媒体对象的媒体对象通常用于展示图像图片和文本内容的组合这种布局在展示新闻文章、博客帖子等方面非常常见。.media类使得创建这样的媒体对象非常简单通常包含一个图像和相关的文本描述。
以下是使用Bootstrap的.media类的基本示例
div classmediaimg srcimage.jpg classmr-3 alt媒体图片div classmedia-bodyh5 classmt-0媒体标题/h5p这是媒体对象的文本描述可以包含各种内容如段落文本、链接等。/p/div
/div上述示例中.media类用于包裹整个媒体对象其中包含了一个img元素和一个.media-body类的div元素。
img元素用于显示媒体对象的图像。.mr-3类用于添加右侧外边距以控制图像与文本之间的距离。.media-body类用于包裹媒体对象的文本内容。在这个div内部你可以放置标题、文本段落、链接和其他文本内容。
你可以根据需要自定义媒体对象的样式例如添加边框、背景颜色、文本颜色等。Bootstrap提供了一系列的类来帮助你自定义媒体对象的外观。
此外你可以将多个媒体对象垂直排列创建一个媒体列表每个列表项包含不同的图像和文本内容。这对于展示新闻文章、博客帖子列表等非常有用。 目录 01-基本的媒体对象组件示例02-设置图片的位置(居上、居中、居下)03-列表型媒体对象(多个图文展示) 01-基本的媒体对象组件示例
!DOCTYPE html
html
headmeta charsetUTF-8title媒体版式/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter媒体版式/h3
div classmediaimg src31.png classmr-4 w-25 altdiv classmedia-bodyh5 classmt-0媒体标题/h5p这是媒体对象的文本描述可以包含各种内容如段落文本、链接等。/p/div
/div
/body
/html运行效果如下
02-设置图片的位置(居上、居中、居下)
为图片元素添加类align-self-start、align-self-center、align-self-end可以实现图片元素的居上、居中、居下对齐方式。 示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title媒体对齐方式/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter媒体对齐方式/h3
hr/
div classmediaimg src3.jpg classalign-self-start mr-3 alt width60div classmedia-bodyh5 classmt-0苹果/h5div1.山鹰的眼睛不怕迷雾真理的光辉不怕笼罩。/divdiv2.我宁可做饥饿的雄鹰也不愿做肥硕的井蛙。/divdiv3.雄鹰当展翅高飞翱翔于九天之上。/div/div
/divhr/
div classmediaimg src3.jpg classalign-self-center mr-3 alt width60div classmedia-bodyh5 classmt-0苹果/h5div1. 苹果是蔷薇科苹果亚科苹果属植物其树为落叶乔木。/div div2. 苹果营养价值很高富含矿物质和维生素含钙量丰富有助于代谢掉体内多余盐分。/divdiv3. 苹果酸可代谢热量防止肥胖。/div/div
/divhr/
div classmediaimg src3.jpg classalign-self-end mr-3 alt width60div classmedia-bodyh5 classmt-0苹果/h5div1. 苹果是蔷薇科苹果亚科苹果属植物其树为落叶乔木。/div div2. 苹果营养价值很高富含矿物质和维生素含钙量丰富有助于代谢掉体内多余盐分。/divdiv3. 苹果酸可代谢热量防止肥胖。/div/div
/divhr/
/body
/html运行效果如下
03-列表型媒体对象(多个图文展示)
可以用标签ul和li实现“列表型媒体对象(多个图文展示)”。 示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title媒体列表/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter媒体列表/h3
ul classlist-unstyledli classmediaimg src41.png classmr-3 w-25 altdiv classmedia-bodyh5 classmt-0 mb-2王漫妮/h5王漫妮是众人眼中的标准都市女性她独立、清醒同时也是典型的“精致穷”。身为柜姐的她需要对顾客进行极致化服务却遭到嘲讽。/div/lili classmedia my-4img src42.png classmr-3 w-25 altdiv classmedia-bodyh5 classmt-0 mb-2顾佳/h5全职太太双商在线能力强将自己的小家庭和丈夫的公司都打理得井井有条。然而正是这样的过于追求完美让身边的人感到压力。/div/lili classmediaimg src43.png classmr-3 w-25 altdiv classmedia-bodyh5 classmt-0 mb-2钟晓芹/h5钟晓芹是标准化的大多数嫁给事业单位铁饭碗的老公自己保有一份普通工作安心做一个平凡妻子。/div/li
/ul
/body
/html效果如下
