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

  • eurotuner

    eurotuner

    6 Mart 2006
  • Rickymon Tero

    Rickymon Ter

    1 Ocak 2007
  • TotalxLuna

    TotalxLuna

    27 Kasım 2011