You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
3.9 KiB
117 lines
3.9 KiB
5 years ago
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Hello, world!</title>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
|
||
|
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
|
||
|
|
<link rel="stylesheet" type="text/css" href="floating-labels.css" media="screen">
|
||
|
|
<style>
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
|
||
|
|
<h1 class="mb-5">Bootstrap floating labels demo</h1>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md">
|
||
|
|
<h3 class="mt-5 mb-3">Normal</h3>
|
||
|
|
|
||
|
|
<div class="mb-3">
|
||
|
|
<textarea id="tt" class="form-control shadow-none" placeholder="Floating Label area" rows="4"></textarea>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mb-3">
|
||
|
|
<input type="text" id="tt2" class="form-control shadow-none" placeholder="Floating Label" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mb-3">
|
||
|
|
<input type="text" id="tt3" class="form-control form-control-lg shadow-none" placeholder="Floating Label lg" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mb-3">
|
||
|
|
<select class="custom-select" id="">
|
||
|
|
<option selected>Choose...</option>
|
||
|
|
<option value="1">One</option>
|
||
|
|
<option value="2">Two</option>
|
||
|
|
<option value="3">Three</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md">
|
||
|
|
<h3 class="mt-5 mb-3">Float</h3>
|
||
|
|
|
||
|
|
<div class="form-label-group">
|
||
|
|
<textarea id="tt4" class="form-control shadow-none" placeholder="Floating Label area" rows="4"></textarea>
|
||
|
|
<label for="tt4">Floating Label area</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-label-group">
|
||
|
|
<input type="text" id="tt5" class="form-control shadow-none" placeholder="Floating Label" />
|
||
|
|
<label for="tt5">Floating Label</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-label-group">
|
||
|
|
<input type="text" id="tt6" class="form-control form-control-lg shadow-none" placeholder="Floating Label lg" />
|
||
|
|
<label for="tt6" class="form-control-lg">Floating Label lg</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-label-group">
|
||
|
|
<select class="custom-select shadow-none" id="ttsel1">
|
||
|
|
<option selected>Choose...</option>
|
||
|
|
<option value="1">One</option>
|
||
|
|
<option value="2">Two</option>
|
||
|
|
<option value="3">Three</option>
|
||
|
|
</select>
|
||
|
|
<label for="ttsel1" >Floating Label</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md">
|
||
|
|
<h3 class="mt-5 mb-3">Float In-Border</h3>
|
||
|
|
|
||
|
|
<div class="form-label-group in-border">
|
||
|
|
<textarea id="tt7" class="form-control shadow-none" placeholder="Floating Label area" rows="4"></textarea>
|
||
|
|
<label for="tt7">Floating Label area</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-label-group in-border">
|
||
|
|
<input type="text" id="tt8" class="form-control shadow-none" placeholder="Floating Label" />
|
||
|
|
<label for="tt8">Floating Label</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-label-group in-border">
|
||
|
|
<input type="text" id="tt9" class="form-control form-control-lg shadow-none" placeholder="Floating Label lg" />
|
||
|
|
<label for="tt9" class="form-control-lg">Floating Label lg</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-label-group in-border">
|
||
|
|
<select class="custom-select" id="ttsel2">
|
||
|
|
<option selected>Choose...</option>
|
||
|
|
<option value="1">One</option>
|
||
|
|
<option value="2">Two</option>
|
||
|
|
<option value="3">Three</option>
|
||
|
|
</select>
|
||
|
|
<label for="ttsel2" >Floating Label</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|