她的首页
她的馆藏
她的动态
馆友反馈
关于她
| 共 160 篇文章 |
|
-- 底部 --><div class="media"> <img src="https://static.runoob.com/images/mobile-icon.png" class="align-self-end mr-3" style="width:60px"> <div class="media-body"> <h4>底部 -- 菜鸟教程</h4> <p>学的不仅是技术，更是梦想！！！ 阅526 转4 评0 公众公开 19-05-03 11:13 |
bootstrap4 多媒体对象图片显示在右边。如果你想将头像图片显示在右侧，可以在 .media-body 容器后添加图片:<div class="media border p-3"> <div class="media-body"> <h4>菜鸟教程</h4> <p>学的不仅是技术，更是梦想！！！</p> </div> <img src="mobile-icon.png&quo... 阅717 转3 评0 公众公开 19-05-03 11:12 |
bootstrap4 基础多媒体对象。Bootstrap 提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果:<div class="media border p-3"> <img src="mobile-icon.p... 阅167 转1 评0 公众公开 19-05-03 11:10 |
我们可以根据不同的设备，设置 flex 类，从而实现页面响应式布局，以下表格中的 * 号可以的值有：sm, md, lg 或 xl, 对应的是小型设备、中型设备，大型设备，超大型设备。根据不同的屏幕设备在水平方向显示弹性子元素。根据不同的屏幕设备在垂直方向显示弹性子元素。根据不同的屏幕设备在垂直方向显示弹性子元素，且方向相反。根据不同屏幕设备... 阅478 转1 评0 公众公开 19-05-03 11:07 |
bootstrap4 弹性盒子-包裹。弹性容器中包裹子元素可以使用以下三个类： .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse。设置 flex 容器是单行或者多行。<div class="d-flex flex-wrap">..</div> <div class="d-flex flex-wrap-reverse">..</div> <div class="d-flex flex-nowra... 阅114 转1 评0 公众公开 19-05-03 10:56 |
bootstrap4 弹性布局-扩展。.flex-grow-1 用于设置子元素使用剩下的空间。以下实例中前面两个子元素只设置了它们所需要的空间，最后一个获取剩余空间。<div class="d-flex"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div ... 阅239 转1 评0 公众公开 19-05-03 10:51 |
<div class="d-flex"> <div class="p-2 bg-info flex-fill">Flex item 1</div> <div class="p-2 bg-warning flex-fill">Flex item 2</div> <div class="p-2 bg-primary flex-fill">Flex item 3</div> 阅246 转1 评0 公众公开 19-05-03 10:50 |
bootstrap4 弹性盒子-内容排列。.justify-content-* 类用于修改弹性子元素的排列方式，* 号允许的值有：start (默认), end, center, between 或 around:<div class="d-flex justify-content-start">...<div class="d-flex justify-content-end">...<div class="d-flex justify-content-center"&g... 阅168 转1 评0 公众公开 19-05-03 10:48 |
<div class="d-flex flex-column"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div></div> <div class="d-flex flex-column-reverse"> ... 阅361 转1 评0 公众公开 19-05-03 10:46 |
