For­mu­la­re mit bootstrap

Inhalt

Kur­ze Über­sicht über die For­ma­tie­rung von For­mu­la­ren mit Klas­sen der bootstrap-Frameworks.

Über­sicht der Formular-Klassen

Klas­seVer­wen­dung
form-con­trolfür For­mu­lar­fel­der wie input, sel­ect, textarea
form-con­trol-filefür Datei­aus­wahl-Fel­der
form-con­trol-lgZusatz für grö­ße­re Eingabefelder
form-con­trol-smZusatz für klei­ne­re Eingabefelder
rea­don­lyfür schreib­ge­schütz­te Felder
form-con­trol-plain­textZusatz zum Ent­fer­nen der Umran­dung von readonly-Feldern
form-con­trol-ran­gefür Schie­be­reg­ler (input type=„range”)
form-checkfür Check­bo­xen und Radio-Buttons
form-check-inlineZusatz für Check­bo­xen und Radio-But­tons in einer Zeile
form-check-inputfür Ein­geba­feld von Check­bo­xen und Radio-Buttons
form-check-labelfür Beschrif­tung von Check­bo­xen und Radio-Buttons
dis­ab­ledfür gesperr­te Ein­ga­be­fel­der und fieldsets
che­ckedfür aus­ge­wähl­te Check­bo­xen und Radio-Buttons
posi­ti­on-sta­ticfür Check­bo­xen und Radio-But­tons ohne Beschriftung
form-groupzur Grup­pie­rung von Ein­ga­be­feld, Beschrif­tung, Hilfs­text und Validierungtext
rowzur Grup­pie­rung von Fel­dern und Beschrif­tun­gen in einer Zeile
form-rowwie row, aber mit klei­ne­ren Abständen
colSpal­te für Lay­outs unter 576px Breite
col-smSpal­te für Lay­outs ab 576px Breite
col-mdSpal­te für Lay­outs ab 768px Breite
col-lgSpal­te für Lay­outs ab 992px Breite
col-xlSpal­te für Lay­outs ab 1200px Breite
-<n>Zusatz für Brei­te der Spal­te in n/12 der Gesamtbreite
col-form-labelfür Beschrif­tung in spal­ten­för­mi­gen Layouts
col-form-label-smZusatz für klei­ne­re Beschriftung
col-form-label-lgZusatz für grö­ße­re Beschriftung
col-autoZusatz für Zen­trie­rung und auto­ma­ti­scher Brei­te der Spal­ten in einem hori­zon­ta­len Layout
form-inlinefür For­mu­la­re in einer Zeile
form-textfür Hilfs­tex­te von Formzularfelder
text-mutedzum Ver­ber­gen von Hilfs­tex­ten (nur bei hover sichtbar)

Trick: respon­si­ve Textausrichtung

Boot­strap 3 kennt kei­ne Text­aus­rich­tung in Abhän­gig­keit von der Brei­te des Lay­outs. Mit die­sem css-Trick kann man sie „nach­rüs­ten”:

/*
 * Responsive text aligning
 * http://ohryan.ca/2014/08/14/set-responsive-text-alignment-bootstrap-3/
 */
.text-xs-left { text-align: left; }
.text-xs-right { text-align: right; }
.text-xs-center { text-align: center; }
.text-xs-justify { text-align: justify; }

@media (min-width: @screen-sm-min) {
  .text-sm-left { text-align: left; }
  .text-sm-right { text-align: right; }
  .text-sm-center { text-align: center; }
  .text-sm-justify { text-align: justify; }
}

@media (min-width: @screen-md-min) {
  .text-md-left { text-align: left; }
  .text-md-right { text-align: right; }
  .text-md-center { text-align: center; }
  .text-md-justify { text-align: justify; }
}

@media (min-width: @screen-lg-min) {
  .text-lg-left { text-align: left; }
  .text-lg-right { text-align: right; }
  .text-lg-center { text-align: center; }
  .text-lg-justify { text-align: justify; }
}

Ver­wen­det man bei­spiels­wei­se die Klas­sen text-md-right und text-sm-left für ein For­mu­lar-Label, wird es bei Bild­schir­men unter 768px (xs und sm) links­bün­dig, und bei grö­ße­ren (md und lg) rechts­bün­dig dargestellt.

Bei­spiel

Test

Set 1
Set 2
Set 2.1
Set 2.2 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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>
<style>
/*
 * Responsive text aligning
 * http://ohryan.ca/2014/08/14/set-responsive-text-alignment-bootstrap-3/
 */
.text-xs-left { text-align: left; }
.text-xs-right { text-align: right; }
.text-xs-center { text-align: center; }
.text-xs-justify { text-align: justify; }

@media (min-width: @screen-sm-min) {
  .text-sm-left { text-align: left; }
  .text-sm-right { text-align: right; }
  .text-sm-center { text-align: center; }
  .text-sm-justify { text-align: justify; }
}

@media (min-width: @screen-md-min) {
  .text-md-left { text-align: left; }
  .text-md-right { text-align: right; }
  .text-md-center { text-align: center; }
  .text-md-justify { text-align: justify; }
}

@media (min-width: @screen-lg-min) {
  .text-lg-left { text-align: left; }
  .text-lg-right { text-align: right; }
  .text-lg-center { text-align: center; }
  .text-lg-justify { text-align: justify; }
}
</style><h2>Test</h2>
<div>
  <form>
    <fieldset><legend>Set 1</legend>
      <div class="row">
        <div class="form-group row col-md-12">
          <label class="col-form-label-sm col-md-2 text-md-right text-md-left" for="formGroupExampleInput">Example label:</label>
          <input class="form-control-sm col-md-4" type="text" id="formGroupExampleInput" placeholder="Example input">
          <label class="col-form-label-sm col-md-2 text-md-right text-md-left" for="formGroupExampleInput2">Another label:</label>
          <input class="form-control-sm col-md-4" type="text" id="formGroupExampleInput2" placeholder="Another input">
        </div>
      </div>
      <div class="row">
        <div class="form-group row col-sm-12">
          <label class="col-form-label-sm col-md-2 text-md-right text-sm-left" for="formGroupExampleInputA">Example label 2:</label>
          <input class="form-control-sm col-md-4" type="text" id="formGroupExampleInputA" placeholder="Example input">
          <label class="col-form-label-sm col-md-2 text-md-right text-sm-left" for="formGroupExampleInput2">Another label 2:</label>
          <input class="form-control-sm col-md-4" type="text" id="formGroupExampleInputA2" placeholder="Another input">
        </div>
      </div>
      <div class="row">
        <div class="form-group row col-sm-12">
          <label class="col-form-label-sm col-md-2 text-md-right text-sm-left" for="formGroupExampleInputA">Example label 2:</label>
          <input class="form-control-sm col-md-10" type="text" id="formGroupExampleInputA" placeholder="Example input">
        </div>
      </div>
    </fieldset>
    <fieldset><legend>Set 2</legend>
      <fieldset><legend>Set 2.1</legend>
        <div class="row">
          <div class="form-group row col-md-4 col-sm-12">
            <label class="col-form-label-sm col-md-6 text-md-right text-sm-left" for="formGroupExampleInput">Example label 2.1:</label>
            <input class="form-control-sm col-md-6" type="text" id="formGroupExampleInput" placeholder="Example input">
          </div>
          <div class="form-group row col-md-8 col-sm-12">
            <label class="col-form-label-sm col-md-3 text-md-right text-sm-left" for="formGroupExampleInput2">Another label 2.1:</label>
            <input class="form-control-sm col-md-9" type="text" id="formGroupExampleInput2" placeholder="Another input">
          </div>
        </div>
        <div class="row">
          <div class="form-group row col-md-4 col-sm-12">
            <label class="col-form-label-sm col-md-6 text-md-right text-sm-left" for="formGroupExampleInput">Example label 2.1a:</label>
            <input class="form-control-sm col-md-6" type="text" id="formGroupExampleInput" placeholder="Example input">
          </div>
          <div class="form-group row col-md-8 col-sm-12">
            <label class="col-form-label-sm col-md-3 text-md-right text-sm-left" for="formGroupExampleInput2">Another label 2.1a:</label>
            <input class="form-control-sm col-md-3" type="text" id="formGroupExampleInput2" placeholder="Another input">
            <label class="col-form-label-sm col-md-3 text-md-right text-sm-left" for="formGroupExampleInput2">Third label 2.1a:</label>
            <input class="form-control-sm col-md-3" type="text" id="formGroupExampleInput2" placeholder="Another input">
          </div>
        </div>
      </fieldset>
      <fieldset><legend>Set 2.2</legend>
        <div class="row">
          <div class="form-group row col-md-4 col-sm-12">
            <label class="col-form-label-sm col-md-6 text-md-right text-sm-left" for="formGroupExampleInput">Example label 2.2:</label>
            <input class="form-control-sm col-md-6" type="text" id="formGroupExampleInput" placeholder="Example input">
          </div>
          <div class="form-group row col-md-8 col-sm-12">
            <label class="col-form-label-sm col-md-3 text-md-right text-sm-left" for="formGroupExampleInput2">Another label 2.2:</label>
            <input class="form-control-sm col-md-9" type="text" id="formGroupExampleInput2" placeholder="Another input">
          </div>
        </div>
        <div class="row">
          <div class="form-group row col-md-4 col-sm-12">
            <label class="col-form-label-sm col-md-6 text-md-right text-sm-left" for="formGroupExampleInput">Example label 2.2a:</label>
            <input class="form-control-sm col-md-6" type="text" id="formGroupExampleInput" placeholder="Example input">
          </div>
          <div class="form-group row col-md-8 col-sm-12">
            <label class="col-form-label-sm col-md-3 text-md-right text-sm-left" for="formGroupExampleInput2">Another label 2.2a:</label>
            <input class="form-control-sm col-md-3" type="text" id="formGroupExampleInput2" placeholder="Another input">
            <label class="col-form-label-sm col-md-3 text-md-right text-sm-left" for="formGroupExampleInput2">Third label 2.2a:</label>
            <input class="form-control-sm col-md-3" type="text" id="formGroupExampleInput2" placeholder="Another input">
          </div>
      </fieldset>
    </fieldset>
  </form>
</div>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

9 + drei =