📅 最后修改于: 2023-12-03 15:40:41.088000 🧑 作者: Mango
Bootstrap 是一种流行的前端框架，它提供了许多现成的 HTML、CSS 和 JavaScript 组件，使开发者能够更快速、更容易地构建 Web 应用程序。其中一个特别有用的组件是水平滚动，它可以让你创建水平滚动的列表或内容，使你的网站更有吸引力。
要使用 Bootstrap 水平滚动，你需要先导入 Bootstrap 的 CSS 和 JavaScript 文件。你可以在以下网址中下载 Bootstrap 文件：
https://getbootstrap.com/
然后在 HTML 模板中添加以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Horizontal Scroll</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-4">
<h2>Fruits</h2>
<div class="list-group-horizontal" id="fruit-list" data-interval="false">
<a href="#" class="list-group-item list-group-item-action">Apple</a>
<a href="#" class="list-group-item list-group-item-action">Banana</a>
<a href="#" class="list-group-item list-group-item-action">Orange</a>
<a href="#" class="list-group-item list-group-item-action">Grapes</a>
<a href="#" class="list-group-item list-group-item-action">Pineapple</a>
</div>
</div>
</div>
</div>
</body>
</html>
在以上代码中，我们使用了 Bootstrap 的标准格式来布局页面，然后在一个 div 元素中添加了一个带有水平滚动样式的 list-group-horizontal 类。data-interval="false" 属性用于停止自动滚动。
除了使用 Bootstrap 的标准样式外，你还可以自定义水平滚动的样式。这可以通过为 list-group-horizontal 元素添加自定义 CSS 类来实现。以下示例演示了如何自定义水平滚动条的大小和颜色：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom Bootstrap Horizontal Scroll</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style type="text/css">
.list-group-horizontal {
width: 100%;
height: 75px;
overflow-x: auto;
overflow-y: hidden;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #ddd;
}
.list-group-horizontal::-webkit-scrollbar {
height: 10px;
background-color: #F5F5F5;
}
.list-group-horizontal::-webkit-scrollbar-thumb {
background-color: #000;
}
.list-group-horizontal::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
.list-group-item {
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
font-size: 1.2rem;
padding: 10px 15px;
border-radius: 10px;
background-color: #F5F5F5;
color: #000;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.list-group-item:hover {
background-color: #999;
color: #fff;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-4">
<h2>Fruits</h2>
<div class="list-group-horizontal custom-scroll" id="fruit-list" data-interval="false">
<a href="#" class="list-group-item list-group-item-action">Apple</a>
<a href="#" class="list-group-item list-group-item-action">Banana</a>
<a href="#" class="list-group-item list-group-item-action">Orange</a>
<a href="#" class="list-group-item list-group-item-action">Grapes</a>
<a href="#" class="list-group-item list-group-item-action">Pineapple</a>
</div>
</div>
</div>
</div>
</body>
</html>
我们添加了一个自定义 CSS 类（custom-scroll），并将 list-group-horizontal 样式覆盖为我们想要的样式。我们还自定义了滚动条和 list-group-item 样式。
Bootstrap 水平滚动非常适合需要显示一系列内容的网站，让你的内容更加清晰和易于浏览。通过使用 Bootstrap 提供的默认样式和自定义样式，你可以创建非常酷的水平滚动效果，在许多不同的网站中使用它们。