Я работаю над проектом для школы. Я должен сделать сайт с 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>