Bootstrap笔记3

最新推荐文章于 2022-08-23 10:34:28 发布

mintsolace

最新推荐文章于 2022-08-23 10:34:28 发布

阅读量335

点赞数

分类专栏： Bootstrap 学习笔记文章标签： bootstrap

本文链接：https://blog.csdn.net/mintsolace/article/details/100005973

版权

本文介绍了在Bootstrap中如何处理因图片超宽导致的界面缩放问题。提出了两种解决方案：一是通过背景图和`background-position: center center;`实现居中显示；二是使用img元素绝对定位配合`left: 50%, margin-left: -width/2`。同时，详细讨论了使用背景图时`background-size`属性的应用，包括长度、百分比和`cover`模式，以确保图片在不同屏幕尺寸下保持恰当的展示效果。" 128059521,8065640,FreeCAD二次开发：创建Python工作台与菜单栏,"['FreeCAD二次开发', 'CAD编程', 'Python编程', 'QT界面']

摘要由CSDN通过智能技术生成

基本的轮播图实现

<!--
以下容器就是整个轮播图组件的整体，
注意该盒子必须加上class="carousel slide" data-ride="carousel"表示当前是一个轮播图
bootstrap.js会自动为当前元素添加图片轮播特效
-->
<div id="轮播图的id" class="carousel slide" data-ride="carousel">
    <!--ol标签是图片轮播的控制点-->
    <ol class="carousel-indicators">
        <!--
        每个li就是一个单独控制点
        data-target属性就是指定当前控制点控制的是哪个轮播图，其目的是如果界面上有多个轮播图
        data-slide-to属性是指当前li元素绑定的是第几个轮播项
        注意：默认必须给其中某个li加上active，展示的时候就是焦点项目
        -->
        <li data-target="#轮播图的id" data-slide-to="0" class="active"></li>