[英]How to Customize Bootstrap Carousel Controls
Can you please let me know how I can customize the Bootstrap Carousel Controls for example I would like to change the size of the controls, or bg colors and How I can add background image to the controls? 您能否让我知道如何自定义Bootstrap Carousel控件,例如,我想更改控件的大小或bg颜色,以及如何向控件添加背景图像? I tried to replace the ‹ with bootstrap Icons but they positioned at the top of control and didn't work properly 我尝试将Boot图标替换为‹ ,但是它们位于控件顶部,并且无法正常工作
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev"><i class=" icon-arrow-right icon-white"></i></a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
the output looks like: 输出如下:
How familiar are you with CSS? 您对CSS有多熟悉?
What I see in your screenshot could be adjusted via font-size and line-height properties 我在屏幕快照中看到的内容可以通过font-size和line-height属性进行调整
Bootstrap is a CSS framework so customization is just a matter of overriding defaults, often using an id tag or something similar Bootstrap是一个CSS框架,因此自定义只是覆盖默认值的问题,通常使用id标签或类似的东西
This worked for me for the size and color: 这对我来说适合大小和颜色:
.carousel-control .icon-prev, .carousel-control .icon-next {
font-size: 100px;
margin-top: -50px;
color: #fff;
}
one quick way to change the colour is to override the inline svg background: 更改颜色的一种快速方法是覆盖嵌入式svg背景:
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
look for the fill='%23fff'
part and change the colour, from white to something else: fill='%23444'
or fill='RoyalBlue'
寻找fill='%23fff'
部分并将颜色从白色更改为其他颜色: fill='%23444'
或fill='RoyalBlue'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.