个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在为学校做一个元素。我必须使用 Bootstrap 3 制作一个完全像这样的网站:image 1和 image 2 .
我几乎完成了该页面，但我卡住了。我想要指示器编号，就像我用黑色标记的图片一样。
我怎样才能创建这样的指标？
在网上搜索后，我得到了这样的信息:https://www.codeseek.co/danbhala/bootstrap-carousel-indicator-with-numbers-gpWvxG .问题是我无法在访问页面后将数字设为红色。
感谢您的帮助。
对于糟糕的图片和我的英语感到抱歉。如果有什么地方没有明确说明，请提出问题，我会回答。
*{
margin: 0;
}
html, body {
height: 100%;
background-color: rgb(228, 228, 228);
}
#content-container {
height: auto !important;
min-height: 100%;
margin: 0 auto;
}
.panel {
width: 99%;
margin-left: 0.4%;
box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#footer {
min-height: 18%;
margin-top: 2%;
padding-top: 2%;
background-color: rgba(193, 188, 188, 0.55);
font-size: 12px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/SelectDate.css">
<title>Werken met Bootstrap</title>
</head>
<body>
<!-- Begin content-container -->
<div id="content-container">
<!-- Begin navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="Index.html"><i class="fa fa-building-o" style="font-size:19px; color:red"> </i><b> Hotel</b> Booking</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="Index.html">Home</a></li>
<li><a href="ExploreHotels.html">Explore Hotels</a></li>
<li><a href="ContactUs.html">Contact Us</a></li>
</ul>
</div>
</nav>
<!-- End navbar -->
<!-- Begin Container -->
<div class="container">
<h3><b>The Student Hotel The Hague</b></h3>
<br>
<div id="myCarousel" class="carousel slide" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active">1</li>
<li data-target="#myCarousel" data-slide-to="1">2</li>
<li data-target="#myCarousel" data-slide-to="2">3</li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="panel panel-defualt">
<div class="panel-body">
<p>Welcome! Let's book a room you'll love.<br>
Please provide us with the information started below, we will handle the data with care.
</p>
<hr>
<div class="row">
<div class="col-md-2" style="padding-top: 3%;">
<label class="radio-inline"><input type="radio" name="optradio">Mr</label>
<label class="radio-inline"><input type="radio" name="optradio">Mrs</label>
</div>
<div class="form-group col-md-5">
First name:
<input type="text" class="form-control" placeholder="Enter first name">
</div>
<div class="form-group col-md-5">
Last name:
<input type="text" class="form-control" placeholder="Enter last name">
</div>
</div>
<br>
<div class="row">
<div class="col-md-4">
Departure Date
<input type="text" class="form-control" placeholder="dd-mm-jjjj">
</div>
<div class="col-md-4">
Return Date
<input type="text" class="form-control" placeholder="dd-mm-jjjj">
</div>
<div class="col-md-4">
Rooms
<select class="form-control">
<option>1 Room</option>
<option>2 Room</option>
<option>3 Room</option>
<option>4 Room</option>
</select>
</div>
</div>
<hr>
<div class="pull-right">
<a href="#">Cancel </a><a href="#myCarousel" data-slide="next"><button type="button" class="btn btn-danger">Pick a room <b>></b></button>
</a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="image/hotel.jpg">
</div>
<div class="item">
<img src="image/hotel2.jpg">
</div>
</div>
</div>
</div>
<!-- End Container -->
</div>
<!-- End content-contrainer -->
<!-- Begin Footer -->
<div id="footer">
<div class="container text-left">
<div class="row">
<!--First column-->
<div class="col-md-4">
<h6 class="mb-4 mt-3 font-weight-bold"><a href="Index.html"><i class="fa fa-building-o" style="font-size:14px;"><b> Hotel</b> Booking</i></a></h6>
<ul class="list-unstyled">
<li>
Niewmansstraat 123
</li>
<li>
1234 AB The Hague
</li>
<li>
The Netherlands
</li>
<li>
<br>
© 2018 Hotel Booking
</li>
</ul>
</div>
<!--/.First column-->
<b>
<!--Second column-->
<div class="col-md-4">
<h5 class="mb-4 mt-3 font-weight-bold"><b>Useful links</b></h5>
<ul class="list-unstyled">
<li>
<a href="ExploreHotels.html">Explore hotels</a>
</li>
<li>
<a href="#!">Reviews</a>
</li>
<li>
<a href="#!">A link</a>
</li>
<li>
<a href="#!">Another link</a>
</li>
<li>
<a href="#!">Different link</a>
</li>
</ul>
</div>
<!--/.Second column-->
<!--Third column-->
<div class="col-md-4">
<h5 class="mb-4 mt-3 font-weight-bold"><b>The Company</b></h5>
<ul class="list-unstyled">
<li>
<a href="#!">About</a>
</li>
<li>
<a href="#!">Careers</a>
</li>
<li>
<a href="#!">Press centre</a>
</li>
<li>
<a href="#!">Terms & Conditions</a>
</li>
<li>
<a href="ContactUs.html">Contact us</a>
</li>
</ul>
</div>
<!--/.Third column-->
</b>
</div>
</div>
</div>
<!-- End Footer -->
</body>
</html>最佳答案
CSS:
.carousel-indicators-numbers li {
text-indent: 0;
margin: 0 2px;
width: 30px;
height: 30px;
border: none;
border-radius: 100%;
line-height: 30px;
color: #fff;
background-color: #999;
transition: all 0.25s ease;
}
.carousel-indicators-numbers li.visited, .carousel-indicators-numbers li:hover, .carousel-indicators-numbers li.active {
margin: 0 2px;
width: 30px;
height: 30px;
background-color: red;
}
HTML:
<ol class="carousel-indicators carousel-indicators-numbers">
<li data-target="#myCarousel" data-slide-to="0" class="active">1</li>
<li data-target="#myCarousel" data-slide-to="1">2</li>
<li data-target="#myCarousel" data-slide-to="2">3</li>
</ol>
关于html - Bootstrap 指标数字，改变颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50215696/
25
4
0
fiddle :http://jsfiddle.net/rtucgv74/ 我正在尝试将第一个字符与 3 位数字匹配。所以下面的代码应该提醒f234。但反而返回 null ？ 源代码: var reg
复制代码 代码如下: Dim strOk,strNo strOk = "12312321$12
我想找 {a number} / { a number } / {a string}模式。我可以得到number / number工作，但是当我添加 / string它不是。 我试图找到的例子: 15
我，我正在做一个模式正则表达式来检查字符串是否是: 数字.数字.数字，如下所示: 1.1.1 0.20.2 58.55541.5221 在java中我使用这个: private static Patt
我有一个字符串，我需要检查它是否在字符串的末尾包含一个数字/数字，并且需要将该数字/数字递增到字符串末尾 +1 我会得到下面的字符串 string2 = suppose_name_1 string3
我正在寻找一个正则表达式 (数字/数字)，如(1/2) 数字必须是 1-3 位数字。我使用 Java。 我认为我的问题比正则表达式更深。我无法让这个工作 String s ="(1/15)";
谁能帮我理解为什么我在使用以下代码时会出现类型错误: function sumOfTwoNumbersInArray(a: [number, number]) { return a[0] +
我看到有些人过去也遇到过类似的问题，但他们似乎只是不同，所以解决方案也有所不同。所以这里是: 我正在尝试在 Google Apps 脚本中返回工作表的已知尺寸范围，如下所示: var myRange
我试图了解python中的正则表达式模块。我试图让我的程序从用户输入的一行文本中匹配以下模式: 8-13 之间的数字“/” 0-15 之间的数字 例如:8/2、11/13、10/9 等。 我想出的模式
简单地说，我当前正在开发的程序要求我拆分扫描仪输入(例如:2 个火腿和奶酪 5.5)。它应该读取杂货订单并将其分成三个数组。我应该使用 string.split 并能够将此输入分成三部分，而不管中间字
(number) & (-number) 是什么意思？我已经搜索过了，但无法找到含义 我想在 for 循环中使用 i & (-i)，例如: for (i = 0; i 110000 .对于i没有高于
需要将图像ID设置为数字 var number = $(this).attr('rel'); number = parseInt(number); $('#carousel .slid
我有一个函数，我想确保它接受一个字符串，后跟一个数字。并且可选地，更多的字符串数字对。就像一个元组，但“无限”次: const fn = (...args: [string, number] | [s
我想复制“可用”输入数字的更改并将其添加或减去到“总计”中 如果此人将“可用”更改为“3”，则“总计”将变为“9”。 如果用户将“可用”更改为“5”，则“总计”将变为“11”。 $('#id1').b
我有一个与 R 中的断线相关的简单问题。 我正在尝试粘贴，但在获取(字符/数字)之间的断线时遇到问题。请注意，这些值包含在向量中(V1=81,V2=55,V3=25)我已经尝试过这段代码: cat(p
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。 已关
我在 Typescript 中收到以下错误: Argument of type 'number[]' is not assignable to parameter of type 'number' 我
在本教程中，您将通过示例了解JavaScript 数字。 在JavaScript中，数字是基本数据类型。例如， const a = 3; const b = 3.13; 与其他一些编程语言不同
我在 MDN Reintroduction to JavaScript 上阅读JavaScript 数字只是浮点精度类型，JavaScript 中没有整数。然而 JavaScript 有两个函数，pa
我们在 Excel 中管理库存。我知道这有点过时，但我们正在发展商业公司，我们所有的钱都被困在业务上，没有钱投资 IT。 所以我想知道我可以用Excel自动完成产品编号的方式进行编程吗？ 这是一个产品
我是一名优秀的程序员,十分优秀！