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

  • Pál Zoltán Illés

    Pál Zoltán

    30 NİSAN 2007
  • Troy Hunt

    Troy Hunt

    29 EYLÜL 2011
  • Vortez

    Vortez

    27 Temmuz 2009