Bootstrap笔记3

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

基本的轮播图实现

<!--
以下容器就是整个轮播图组件的整体,
注意该盒子必须加上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>
        <li data-target="#轮播图的id" data-slide-to="1"></li>
        <!--…更多的-->
    </ol>
    <!--
        .carousel-inner是所有轮播项的容器盒子,
        注意,role="listbox"代表当前div是一个列表盒子,作用就是给当前div添加一个语义
    -->
    <div class="carousel-inner" role="listbox">
        <!--每个.item就是单个轮播项目,注意默认要给第一个轮播项目加上active,表示为焦点-->
        <div class="item active">
            <!--轮播项目中展示的图片-->
            <img src="example.jpg" alt="示例图片">
            <div class="carousel-caption">
                <!--标题或说明性文字,如果不需要,直接删除当前div.carousel-caption-->
            </div>
        </div>
        <div class="item">
            <!--...-->
        </div>
        <!--...-->
    </div>
    <!--图片轮播上左右两个控制按钮,分别点击可以滚动到上一张和下一张-->
    <!--此处需要注意,该a链接的href属性必须指向需要控制的轮播图ID-->
    <!--另外a链接中的data-slide="prev"代表点击该链接会滚到上一张,如果设置为next的话则相反-->
    <a class="left carousel-control" href="#轮播图的id" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">上一张</span>
    </a>
    <a class="right carousel-control" href="#轮播图的id" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">下一张</span>
    </a>
</div>

由于轮播图片超宽造成的影响
*美工为了在不同屏幕下更好地展示将图片两边做的非常宽,但我们大多数情况的页面宽度都无法满足这样的图片宽
*而且Bootstrap的样式中默认将图片的max-width设置为100%;
*造成界面图片缩放
*想在一个较小屏幕下展示一个超宽的图片,并让图片居中显示,有两种办法:
(1)换用背景图的方式,background-position: center center;
(2)使img元素绝对定位,left: 50%, margin-left: -width/2

background使用
将容器的高度固定(410px)
将轮播图改为背景显示
由于可能图片的高度不一定是410px
所以需要设置css3中的background-size

background-size
length
如background-size: 100px 100px, 将背景图固定到多大尺寸
percentage
如background-size: 90% 90%, 以百分比的形式设置背景大小
cover
1.背景图片等比例缩放
2.让背景图相对较小边放大到目标容器大小结束
如:一张100200的背景图放到一个300400的盒子中,最终背景图片的大小是300600
因为背景图的较小边为100,将100放大到目标容器300的高度,放大了3倍,最终结果200
400

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值