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

  • GoProTutorials

    GoProTutoria

    18 NİSAN 2011
  • Grace Su

    Grace Su

    6 Ocak 2006
  • hans peder sahl

    hans peder s

    22 Temmuz 2009