レイアウト

インラインから水平方向、カスタムグリッドまで、フォームのLayout (レイアウト) でフォームに構造を与えます。

Utilities

Margin utilities はフォームにいくつかの構造を追加する最も簡単な方法です。labels(ラベル)、controls(コントロール)、optional form text(オプションのフォームテキスト)、form validation messaging(フォーム検証メッセージ) の基本的なグループ化を提供します。一貫性を持たせるために、margin-bottom ユーティリティで、フォーム全体で単一の方向を使用することを推奨します。

vue
<template>
 <b-div margin="b-3">
  <BFormLabel for="formGroupExampleInput">
   Example label
  </BFormLabel>
  <BFormInput
   id="formGroupExampleInput"
   type="text"
   placeholder="Example input placeholder"
  />
 </b-div>
 <b-div margin="b-3">
  <BFormLabel for="formGroupExampleInput2">
   Another label
  </BFormLabel>
  <BFormInput
   id="formGroupExampleInput2"
   type="text"
   placeholder="Another input placeholder"
  />
 </b-div>
</template>

Form grid

複雑なフォームはグリッドクラスを使用して作成することができます。複数のカラム、様々な幅、追加の整列オプションを必要とするフォームレイアウトに使用します。

vue
<template>
 <Row>
  <Col>
   <BFormInput
    type="text"
    placeholder="First name"
    aria-label="First name"
   />
  </Col>
  <Col>
   <BFormInput
    type="text"
    placeholder="Last name"
    aria-label="Last name"
   />
  </Col>
 </Row>
</template>

Gutters

gutter modifer classes を追加することで、ブロックの方向と同様にインラインでも gutters の幅を制御することができます。

vue
<template>
 <Row gutter="3">
  <Col>
   <BFormInput
    type="text"
    placeholder="First name"
    aria-label="First name"
   />
  </Col>
  <Col>
   <BFormInput
    type="text"
    placeholder="Last name"
    aria-label="Last name"
   />
  </Col>
 </Row>
</template>

グリッドシステムを使用して、より複雑なレイアウトを作成することもできます。

vue
<template>
 <BForm>
  <Row gutter="3">
   <Col col="md-6">
    <BFormLabel for="inputEmail4">
     Email
    </BFormLabel>
    <BFormInput
     id="inputEmail4"
     type="email"
    />
   </Col>
   <Col col="md-6">
    <BFormLabel for="inputPassword4">
     Password
    </BFormLabel>
    <BFormInput
     id="inputPassword4"
     type="password"
    />
   </Col>
   <Col col="12">
    <BFormLabel for="inputAddress">
     Address
    </BFormLabel>
    <BFormInput
     id="inputAddress"
     type="text"
     placeholder="1234 Main St"
    />
   </Col>
   <Col col="12">
    <BFormLabel for="inputAddress2">
     Address 2
    </BFormLabel>
    <BFormInput
     id="inputAddress2"
     type="text"
     placeholder="Apartment, studio, or floor"
    />
   </Col>
   <Col col="md-6">
    <BFormLabel for="inputCity">
     City
    </BFormLabel>
    <BFormInput
     id="inputCity"
     type="text"
    />
   </Col>
   <Col col="md-4">
    <BFormLabel for="inputState">
     State
    </BFormLabel>
    <BFormSelect id="inputState">
     <option selected>
      Choose...
     </option>
     <option>...</option>
    </BFormSelect>
   </Col>
   <Col col="md-2">
    <BFormLabel for="inputZip">
     Zip
    </BFormLabel>
    <BFormInput
     id="inputZip"
     type="text"
    />
   </Col>
   <Col col="12">
    <Col>
     <BFormCheckInput
      id="gridCheck"
      type="checkbox"
     />
     <BFormLabel for="gridCheck">
      Check me out
     </BFormLabel>
    </Col>
   </Col>
   <Col col="12">
    <b-button
     type="submit"
     color="primary"
    >
     Sign in
    </b-button>
   </Col>
  </Row>
 </BForm>
</template>

Horizontal form

グリッドを使って水平なフォームを作成します。フォームグループに Row を追加し、ラベルやコントロールの幅を指定するために Col コンポーネントに対して col 属性を使用します。FormLabel に ColFormLabel 属性を追加して、関連するフォームコントロールと垂直方向の中央に配置することができます。

必要に応じて、margin や padding のユーティリティを使用して適切な整列を行う必要があります。たとえば、縦に並んだラジオラベルの dding-top を削除して、テキストのベースラインを適切に整列させます。

Radios
vue
<template>
 <BForm>
  <Row margin="b-3">
   <BColFormLabel
    for="inputEmail3"
    col="sm-2"
   >
    Email
   </BColFormLabel>
   <Col col="sm-10">
    <BFormInput
     id="inputEmail3"
     type="email"
    />
   </Col>
  </Row>
  <Row margin="b-3">
   <BColFormLabel
    for="inputPassword3"
    col="sm-2"
   >
    Password
   </BColFormLabel>
   <Col col="sm-10">
    <BFormInput
     id="inputPassword3"
     type="password"
    />
   </Col>
  </Row>
  <BFieldset>
   <Row margin="b-3">
    <BColFormLegend
     col="sm-2"
     padding="t-0"
    >
     Radios
    </BColFormLegend>
    <Col col="sm-10">
     <BFormCheckInput
      id="gridRadios1"
      type="radio"
      name="gridRadios"
      value="option1"
      checked
     />
     <BFormLabel for="gridRadios1">
      First radio
     </BFormLabel>
     <BFormCheckInput
      id="gridRadios2"
      type="radio"
      name="gridRadios"
      value="option2"
     />
     <BFormLabel for="gridRadios2">
      Second radio
     </BFormLabel>
     <BFormCheckInput
      id="gridRadios3"
      type="radio"
      name="gridRadios"
      value="option3"
      disabled
     />
     <BFormLabel for="gridRadios3">
      Third disabled radio
     </BFormLabel>
    </Col>
   </Row>
  </BFieldset>
  <Row margin="b-3">
   <Col
    col="sm-10"
    offset="sm-2"
   >
    <BFormCheckInput
     id="gridCheck1"
     type="checkbox"
    />
    <BFormLabel for="gridCheck1">
     Example checkbox
    </BFormLabel>
   </Col>
  </Row>
  <b-button
   type="submit"
   color="primary"
  >
   Sign in
  </b-button>
 </BForm>
</template>

Horizontal form label sizing

size = "sm" または size = "lg" を、 FormLabel または Legendに使用してください。size = "lg" または size = "sm" でサイズを変更できます。

vue
<template>
 <Row margin="b-3">
  <BColFormLabel
   size="sm"
   for="colFormLabelSm"
   col="sm-2"
  >
   Email
  </BColFormLabel>
  <Col col="sm-10">
   <BFormInput
    id="colFormLabelSm"
    type="email"
    size="sm"
    placeholder="col-form-label-sm"
   />
  </Col>
 </Row>
 <Row margin="b-3">
  <BColFormLabel col="sm-2">
   Email
  </BColFormLabel>
  <Col col="sm-10">
   <BFormInput
    id="colFormLabel"
    type="email"
    placeholder="col-form-label"
   />
  </Col>
 </Row>
 <Row>
  <BColFormLabel
   size="lg"
   col="sm-2"
  >
   Email
  </BColFormLabel>
  <Col col="sm-10">
   <BFormInput
    id="colFormLabelLg"
    type="email"
    size="lg"
    placeholder="col-form-label-lg"
   />
  </Col>
 </Row>
</template>

Column sizing

前の例で示したように、グリッドシステムでは Row の中に任意の数の Col を配置することができます。これらの列は利用可能な幅を等しく分割します。

col="sm-7" のような特定の属性を使って、残りの Col が残りのスペースを均等に分割するように、カラムのサブセットを選択することもできます。

vue
<template>
 <Row gutter="3">
  <Col col="sm-7">
   <BFormInput
    type="text"
    placeholder="City"
    aria-label="City"
   />
  </Col>
  <Col col="sm">
   <BFormInput
    type="text"
    placeholder="State"
    aria-label="State"
   />
  </Col>
  <Col col="sm">
   <BFormInput
    type="text"
    placeholder="Zip"
    aria-label="Zip"
   />
  </Col>
 </Row>
</template>

Auto-sizing

以下の例では、flexbox ユーティリティを使用してコンテンツを垂直方向にセンタリングし、Col に col="auto" 属性を追加して、カラムが必要なだけのスペースを占有するようにしています。

カラムのサイズは内容に基づいて自動的に決定されます。

@
vue
<template>
 <BForm>
  <Row
   gutter="gy-2 gx-3"
   align-items="center"
  >
   <Col col="auto">
    <!-- <label class="visually-hidden" for="autoSizingInput">Name</label> -->
    <BFormLabel
     visually="hidden"
     for="autoSizingInput"
    >
     Name
    </BFormLabel>
    <BFormInput
     id="autoSizingInput"
     type="text"
     placeholder="Jane Doe"
    />
   </Col>
   <Col col="auto">
    <BFormLabel
     visually="hidden"
     for="autoSizingBInputGroup"
    >
     Name
    </BFormLabel>
    <div class="input-group">
     <div class="input-group-text">
      @
     </div>
     <input
      id="autoSizingBInputGroup"
      type="text"
      class="form-control"
      placeholder="Username"
     />
    </div>
   </Col>
   <Col col="auto">
    <BFormLabel
     visually="hidden"
     for="autoSizingSelect"
    >
     Name
    </BFormLabel>
    <!-- <label class="visually-hidden" for="autoSizingSelect">Preference</label> -->
    <select
     id="autoSizingSelect"
     class="form-select"
    >
     <option selected>
      Choose...
     </option>
     <option value="1">
      One
     </option>
     <option value="2">
      Two
     </option>
     <option value="3">
      Three
     </option>
    </select>
   </Col>
   <Col col="auto">
    <b-button
     type="submit"
     class="btn btn-primary"
    >
     Submit
    </b-button>
   </Col>
  </Row>
 </BForm>
</template>

サイズ固有の列クラスを使用して、これをもう一度リミックスできます。

vue
<template>
 <BForm>
  <Row
   gutter="x-3 y-2"
   align-items="center"
  >
   <Col col="sm-3">
    <BFormLabel for="specificcolInputName">
     Name
    </BFormLabel>
    <BFormInput
     type="text"
     placeholder="Jane Doe"
    />
   </Col>
   <Col col="sm-3">
    <BFormLabel for="specificcolInputName">
     Username
    </BFormLabel>
    <BFormInput
     type="text"
     placeholder="Username"
    />
   </Col>
   <Col col="sm-3">
    <BFormLabel for="specificcolBInputGroupUsername">
     Preference
    </BFormLabel>
    <BFormSelect id="specificcolSelect">
     <option selected>
      Choose...
     </option>
     <option value="1">
      One
     </option>
     <option value="2">
      Two
     </option>
     <option value="3">
      Three
     </option>
    </BFormSelect>
   </Col>
   <Col col="sm-3">
    <BFormCheck>
     <BFormCheckInput />
     <BFormLabel>Remember me</BFormLabel>
    </BFormCheck>
   </Col>
   <Col col="auto">
    <b-button
     type="submit"
     color="primary"
    >
     Submit
    </b-button>
   </Col>
  </Row>
 </BForm>
</template>

Inline forms

Row コンポーネントに columns 属性を使って、レスポンシブな水平レイアウトを作成します。 gutter modifier classes を追加することで、水平方向と垂直方向にガッターを設けることができます。狭いモバイルのビューポートでは、col=12でフォームコントロールなどを重ねることができます。

align="item-center"では、フォーム要素を中央に寄せて、FormCheckInputの位置を適切に合わせます。

@
vue
<template>
 <BForm>
  <Row
   size="lg-auto"
   columuns="lg-auto"
   align-item="center"
   gutter="3"
  >
   <Col col="12">
    <BFormLabel visually-hidden>
     Username
    </BFormLabel>
    <BInputGroup>
     <BInputGroupText>@</BInputGroupText>
     <BFormInput
      id="inlineFormBInputGroupUsername"
      type="text"
      placeholder="Username"
     />
    </BInputGroup>
   </Col>
   <Col col="12">
    <BFormSelect id="inlineFormSelectPref">
     <option selected>
      Choose...
     </option>
     <option value="1">
      One
     </option>
     <option value="2">
      Two
     </option>
     <option value="3">
      Three
     </option>
    </BFormSelect>
   </Col>
   <Col col="12">
    <BFormCheck>
     <BFormCheckInput id="inlineFormCheck" />
     <BFormLabel for="inlineFormCheck">
      Remember me
     </BFormLabel>
    </BFormCheck>
   </Col>
   <Col col="12">
    <b-button
     type="submit"
     color="primary"
    >
     Submit
    </b-button>
   </Col>
  </Row>
 </BForm>
</template>

See Also