Bootstrap -- 缩略图、进度条、列表组、面板

发布时间：2020-12-18 00:31:18 所属栏目：安全来源：网络整理

导读：Bootstrap -- 缩略图、进度条、列表组、面板 1. ?? 大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下：??? (1) 在图像周围添加带有 class .thumbnail 的标签。??? (2)

?? 大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下：??? (1) 在图像周围添加带有 class .thumbnail 的标签。??? (2) 这会添加四个像素的内边距（padding）和一个灰色的边框。??? (3) 当鼠标悬停在图像上时，会动画显示出图像的轮廓

使用缩略图：

My Test bootstrap 测试图片1 Windows10屏幕截图1 测试图片2 Windows10屏幕截图2

缩略图效果：

2. 进度条

使用进度条样式：

My Test bootstrap 90% 完成 50% 完成

样式效果：

3. 列表组: 列表组件用于以列表形式呈现复杂的和自定义的内容。

使用列表组样式：

My Test bootstrap 学习C#书籍编写C#代码优化性能新

<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;ul</span><span style="color: #0000ff"&gt;></span>

</body>
</html>

样式效果：

4. 面板：面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向

元素添加 class .panel 和 class .panel-default 即可。

使用面板样式：

My Test bootstrap 面板1--学习板块面板2--娱乐版块

样式效果：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!