SORU
30 AĞUSTOS 2012, PERŞEMBE


Bir form twitter bootstrap yatay içinde satır içi Form?

Herhangi bir ev yapımı dersleri olmadan twitter bootstrap böyle (lütfen aşağıdaki bağlantıya bakınız) görünen bir form tasarımı için en iyi yolu nedir ?

Form-içi iç iç form-yatay örnekte olduğu gibi aşağıda: bir ayarlamak mümkün

screenshot of UI goal

CEVAP
31 AĞUSTOS 2012, Cuma


Yok yuva çalışmaz <form> etiketler. Sadece Bootstrap dersleri kullanın.

Bootstrap 3

<form class="form-horizontal" role="form">
    <div class="form-group">
      <label for="inputType" class="col-md-2 control-label">Type</label>
      <div class="col-md-3">
          <input type="text" class="form-control" id="inputType" placeholder="Type">
      </div>
    </div>
    <div class="form-group">
        <span class="col-md-2 control-label">Metadata</span>
        <div class="col-md-6">
            <div class="form-group row">
                <label for="inputKey" class="col-md-1 control-label">Key</label>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="inputKey" placeholder="Key">
                </div>
                <label for="inputValue" class="col-md-1 control-label">Value</label>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="inputValue" placeholder="Value">
                </div>
            </div>
        </div>
    </div>
</form>

Birçok yönden bu davranış, sadece bir örnekti elde edebilirsiniz. bootply Bu Test

Bootstrap 2

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputType">Type</label>
        <div class="controls">
            <input type="text" id="inputType" placeholder="Type">
        </div>
    </div>
    <div class="control-group">
        <span class="control-label">Metadata</span>
        <div class="controls form-inline">
            <label for="inputKey">Key</label>
            <input type="text" class="input-small" placeholder="Key" id="inputKey">
            <label for="inputValue">Value</label>
            <input type="password" class="input-small" placeholder="Value" id="inputValue">
        </div>
    </div>
</form>

.form-inline .controls Bir iç doktorları stil almak için kullanıyorum unutmayın.
this jsfiddle üzerinde test edebilirsiniz

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Dion Coulls

    Dion Coulls

    16 AĞUSTOS 2006
  • Major FX

    Major FX

    6 HAZİRAN 2012
  • MikeyMacintosh

    MikeyM

    28 Aralık 2009