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

  • Cristina Landa

    Cristina Lan

    28 Ocak 2010
  • jpmkm1

    jpmkm1

    4 NİSAN 2008
  • Chaîne de TheMoustic

    Chaîne de T

    5 Kasım 2006