JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

Bootstrapでフォームの高さと幅を設定する方法｜input-lgやcol-lg-*クラスの使い方

Bootstrapでは、.input-lg や .input-sm といったサイズ用のクラスを使えば、入力フォームの高さを簡単に調整できます。また、.col-lg-* などのグリッドシステムのクラスを組み合わせることで、フォームの幅も柔軟にコントロール可能です。

フォームの高さを変更するクラス

.form-control に対して以下のクラスを追加するだけで、入力欄の高さを変えられます。

  • .input-lg … 大きめの高さに設定
  • （指定なし） … 標準（デフォルト）サイズ
  • .input-sm … 小さめの高さに設定

テキスト入力欄だけでなく、セレクトボックスにも同じクラスが使えます。

フォームの幅を変更するグリッドクラス

幅を調整したい場合は、.row の中に .col-lg-2 や .col-lg-3 などのカラムクラスを配置し、その中に入力欄を置きます。グリッドは12分割なので、数値が大きいほど入力欄は広くなります。

サンプルコード

以下のコードを実行すると、フォームの高さと幅の設定結果を実際に確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <form role = "form">
         <div class = "form-group">
            <input class = "form-control input-lg" type = "text" placeholder =".input-lg">
         </div>
         <div class = "form-group">
            <input class = "form-control" type = "text" placeholder = "Default input">
         </div>
         <div class = "form-group">
            <input class = "form-control input-sm" type = "text" placeholder = ".input-sm">
         </div>
         <div class = "form-group"></div>
         <div class = "form-group">
            <select class = "form-control input-lg">
               <option value = "">.input-lg</option>
            </select>
         </div>
         <div class = "form-group">
            <select class = "form-control">
               <option value = "">Default select</option>
            </select>
         </div>
         <div class = "form-group">
            <select class = "form-control input-sm">
               <option value = "">.input-sm</option>
            </select>
         </div>
         <div class = "row">
            <div class = "col-lg-2">
               <input type = "text" class = "form-control" placeholder = ".col-lg-2">
            </div>
            <div class = "col-lg-3">
               <input type = "text" class = "form-control" placeholder = ".col-lg-3">
            </div>
            <div class = "col-lg-4">
               <input type = "text" class = "form-control" placeholder = ".col-lg-4">
            </div>
         </div>
      </form>
   </body>
</html>

この例では、テキスト入力欄とセレクトボックスそれぞれについて「大きいサイズ・標準・小さいサイズ」の3種類を表示しています。最後の .row 部分では、.col-lg-2 → .col-lg-3 → .col-lg-4 の順に幅が少しずつ広がる様子を確認できます。

まとめ

  • 高さの調整には .input-lg / .input-sm を使用
  • 幅の調整にはグリッドシステムの .col-lg-* クラスを使用
  • どちらも .form-control と組み合わせて使うことで、統一感のある美しいフォームが作れる
  1. AlexaでSkypeを使う方法|セットアップと最適化の手順を徹底解説

    MicrosoftのSkypeとAlexa対応デバイス(Echo Dotなど)との連携により、世界中の家族や友人とハンズフリーで通話できるようになりました。現在この機能は、米国、英国、カナダ、インド、オーストラリアなど一部の地域で提供されており、今後さらに多くの国へ展開されることが期待されています。本記事では、AlexaでのSkype通話のセットアップ方法と、快適に使うための最適化の手順を詳しくご紹介します。 AlexaでSkype通話をセットアップ・最適化する方法 AlexaのSkype通話機能を利用すれば、音声コマンドだけでAlexaデバイス経由のSkypeの発信・着信が可能になります。面

  2. Excelの列幅・行の高さを自動調整する方法｜AutoFit機能の使い方を解説

    Excelの格子状の画面は、ワークシートに保存されたデータに合わせて見た目をカスタマイズできないため、一見すると融通が利かないように感じられることがあります。 しかし実際には、MicrosoftはExcelに、セル内のデータサイズに合わせて列幅や行の高さを瞬時に調整できる機能を標準で搭載しています。 この記事では、Excelの「AutoFit（自動調整）」機能を使って、ワークシート内のデータの大きさに応じて列や行のサイズを自動的に変更する方法を詳しく解説します。 列幅や行の高さを変更する前に知っておきたい制限 Excelでは、列や行のサイズを変更できる範囲には上限と下限があります。まず押さえ