Bootstrap03(媒体对象表格模态框图标)

今天带大家了解一些组件：

1、媒体对象

媒体对象有助于构建复杂且重复的组件，其中一些媒体位于不环绕所述媒体的内容旁边。

<div class="media"><img src="img/1.png" class="mr-3" alt="..."><div class="media-body"><h5 class="mt-0"><b>冷间谍</b></h5><p>书籍价格:9.9元</p><p>书籍作者:黄涛</p><p>出版社:大冤种出版社</p><p>书籍简介:舔狗的剧情~~~~</p><p><button class="btn btn-danger">加入购物车</button><button  class="btn btn-danger">我要结算</button></p></div></div><hr color="#0000FF" /><div class="media"><img src="img/8.png" class="mr-3" alt="..."><div class="media-body"><h5 class="mt-0"><b>万古神帝</b></h5><p>书籍价格:91.9元</p><p>书籍作者:飞天鱼</p><p>出版社:咯可咯可出版社</p><p>书籍简介:若尘如此</p><p><button class="btn btn-danger">加入购物车</button><button  class="btn btn-danger">我要结算</button></p></div></div><hr color="#0000FF" /><div class="media"><img src="img/4.png" class="mr-3" alt="..."><div class="media-body"><h5 class="mt-0"><b>完美世界</b></h5><p>书籍价格:93.9元</p><p>书籍作者:番茄</p><p>出版社:空空出版社</p><p>书籍简介:独断万古</p><p><button class="btn btn-danger">加入购物车</button><button  class="btn btn-danger">我要结算</button></p></div></div><hr color="#0000FF" /></div>

效果如下：

2、表格 table

1、table-hover：鼠标悬停高亮的表格

<table class="table table-hover"><thead class="bg-primary"><tr><th scope="col">书籍名称</th><th scope="col">单价</th><th scope="col">购买数量</th><th scope="col">小计</th><th scope="col">操作</th></tr></thead><tbody><tr><th scope="row">《冷间谍》</th><td>9.9</td><td><input value="1" /></td><td>9.9</td><td><a href="#">删除</td></tr><tr><th scope="row">《万古神帝》</th><td>91.9</td><td><input value="2" /></td><td>91.9</td><td><a href="#">删除</td></tr><tr><th scope="row">《完美世界》</th><td>93.9</td><td><input value="3" /></td><td>93.9</td><td><a href="#">删除</td></tr></tbody></table><p class="aaa"><button class="btn btn-danger">清空购物车</button><button class="btn btn-primary">继续购物</button><button class="btn btn-success">立即结算</button></p></div>

效果如下：

3、模态框

bootstrap中的模态框（modal），不同于Tooltips，模态框以 弹出对话框的形式出现，具有最小和最实用的功能集。

务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现或功能。

<!-- 模态框的HTML  建议作为body标签的直接子元素 --><!-- Modal --><div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">订单信息</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body">1.。。。2、。。。订单总价</div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">结算</button></div></div></div></div>

效果如下：

4、图标

<figcaption class="figure-caption"><b>冷间谍&nbsp;<i class="bi bi-cart-check text-danger"></i></b></figcaption>

Bootstrap03(媒体对象表格模态框图标)相关推荐

Bootstrap学习笔记——缩略图、警示框、进度条、媒体对象、列表组、画板
1 缩略图缩略图(一) 缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题.描述等信息. Bootstrap框架将这一部独立成一个模块组件.并通过&q ...
html5媒体对象居中,媒体对象 - Media Objects
怎样创建一个媒体对象 ? 一个媒体对象由以下及部分组成父容器 .media 媒体部分 .media-left 或者 .media-right,其内部包含图像使用同时设置 .media-object ...
【若依(ruoyi)】弹框图标 / layer 图标
前言 ruoyi 4.6 layer 3.1.1 弹框图标 / layer 图标若依(ruoyi) 使用 layer做弹框.layer指定的图标即为弹框使用的图标. 图标文件图标数字从左往右依次为 ...
Bootstrap媒体对象
媒体媒体是一类具有特殊版式的组件,用来设计图文混排的效果,通常由一个向左或向右浮动的媒体对象(如,图像.视频.音频等)和一个媒体内容块构成. 1.创建媒体在HTML结构中,一个媒体组件由 .med ...
Bootstrap 媒体对象
媒体对象媒体对象是一类具有特殊版式的组件,用来设计图文混排的效果,它们多是由一幅向左或向右浮动的图像和一些文本构成. Bootstrap提供了两种类型的媒体对象:媒体(.media)和媒体列表(.m ...
进度条媒体对象和Well组件
一．Well组件这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well">Bootstrap</div> //有lg和sm两种可 ...
Bootstrap(10) 进度条媒体对象和 Well 组件
一．Well 组件这个组件可以实现简单的嵌入效果. <div class="well">Bootstrap</div& ...
第二百四十一节，Bootstrap进度条媒体对象和 Well 组件
第二百四十一节,Bootstrap进度条媒体对象和 Well 组件学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件本节课我们主要学习一下 Bootstrap 的三个组件功能:Wel ...
Bootstrap 进度条媒体对象和 Well 组件
一．Well 组件这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 lg 和 ...

Bootstrap03(媒体对象表格模态框图标)

Bootstrap03(媒体对象表格模态框图标)相关推荐

最新文章

热门文章