■ サンプル
<!doctype html> <html lang="jp"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <!-- Form --> <div class="container"> <form> <div class="form-row"> <div class="form-group col-md-6"> <label for="inputEmail4">Email</label> <input type="email" class="form-control" id="inputEmail4" placeholder="Email"> </div> <div class="form-group col-md-6"> <label for="inputPassword4">Password</label> <input type="password" class="form-control" id="inputPassword4" placeholder="Password"> </div> </div> <div class="form-group"> <label for="inputAddress">Address</label> <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> </div> <div class="form-group"> <label for="inputAddress2">Address 2</label> <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="inputCity">City</label> <input type="text" class="form-control" id="inputCity"> </div> <div class="form-group col-md-4"> <label for="inputState">State</label> <select id="inputState" class="form-control"> <option selected>Choose...</option> <option>...</option> </select> </div> <div class="form-group col-md-2"> <label for="inputZip">Zip</label> <input type="text" class="form-control" id="inputZip"> </div> </div> <div class="form-group"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="gridCheck"> <label class="form-check-label" for="gridCheck"> Check me out </label> </div> </div> <button type="submit" class="btn btn-primary">Sign in</button> </form> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> </html>
■ フローティングラベル
https://blogs.yahoo.co.jp/dk521123/37672476.htmlで扱ったフローティングラベル(placeholder が動いてラベルになる)を Bootstrap4で実装したい
方法1:独自実装
https://coliss.com/articles/build-websites/operation/css/css-only-floating-label.htmlを参考に実装。サンプル
<!doctype html> <html lang="jp"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <style> .input-with-floating-label { position: relative; margin: auto; width: 100%; max-width: 280px; } .input-with-floating-label .label { position: absolute; top: 16px; left: 0; font-size: 16px; color: #9098a9; font-weight: 500; transform-origin: 0 0; transition: all 0.2s ease; } .input-with-floating-label .border { position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background: #07f; transform: scaleX(0); transform-origin: 0 0; transition: all 0.15s ease; } .input-with-floating-label input { -webkit-appearance: none; width: 100%; border: 0; font-family: inherit; padding: 12px 0; height: 48px; font-size: 16px; font-weight: 500; border-bottom: 2px solid #c8ccd4; background: none; border-radius: 0; color: #223254; transition: all 0.15s ease; } .input-with-floating-label input:hover { background: rgba(34,50,84,0.03); } .input-with-floating-label input:not(:placeholder-shown) + span { color: #5a667f; transform: translateY(-26px) scale(0.75); } .input-with-floating-label input:focus { background: none; outline: none; } .input-with-floating-label input:focus + span { color: #07f; transform: translateY(-26px) scale(0.75); } .input-with-floating-label input:focus + span + .border { transform: scaleX(1); } </style> <title>Hello, world!</title> </head> <body> <!-- Form --> <div class="container"> <h1>Floating Labels</h1> <form> <div class="form-row"> <div class="form-group col-md-6"> <label for="inputEmail4" class="input-with-floating-label"> <input type="email" id="inputEmail4" placeholder=" "> <span class="label">Email</span> </label> </div> <div class="form-group col-md-6"> <label for="inputPassword4" class="input-with-floating-label"> <input type="password" id="inputPassword4" placeholder=" "> <span class="label">Password</span> </label> </div> </div> <button type="submit" class="btn btn-primary">Sign in</button> </form> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <script src="">https://cdn.jsdelivr.net/npm/floating-form-labels@1.2.4/dist/floatingFormLabels.min.js"> <script> $('.ffl-wrapper').floatingFormLabels(); </script> </body> </html>
方法2:プラグインを使う
* 以下の製品を使う 【補足】 * 別に、Bootstrapを使わなくてもフローティングラベルを実装できるみたいhttps://github.com/tonystar/float-label-css
ライセンス (MIT)
https://github.com/tonystar/float-label-css/blob/master/LICENSE
サンプル (いまいち)
<!doctype html> <html lang="jp"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="">https://cdn.rawgit.com/tonystar/float-label-css/v1.0.2/dist/float-label.min.css"/> <style> </style> <title>Hello, world!</title> </head> <body> <!-- Form --> <div class="container"> <form> <div class="form-row"> <div class="form-group col-md-6 has-float-label"> <input type="email" id="inputEmail4" placeholder="Email"> <label for="inputEmail4">Email</label> </div> <div class="form-group col-md-6 has-float-label"> <input type="password" id="inputPassword4" placeholder="Password"> <label for="inputPassword4">Password</label> </div> </div> <button type="submit" class="btn btn-primary">Sign in</button> </form> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> </html>その他の製品
https://www.cssscript.com/bootstrap-4-form-floating-labels/
https://www.cssscript.com/demo/bootstrap-4-form-floating-labels/ (デモ)
方法3:Material Design for Bootstrap 4を使う
* 以下の関連記事を参照のこと。https://blogs.yahoo.co.jp/dk521123/37674556.html