Bootstrap Form Elemanları

Bootstrapın temel form mantığı ve bir kaç örnek...

input:

Bootstrap From Elemanları

 

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

 

inline form

Bootstrap From Elemanları

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

 

 Addon Form

Bootstrap From Elemanları

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

 

Bootstrap Form Elemanları

  Bootstrap 4:

<div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-btn">
         <button class="btn btn-success" type="button"><span class="fa fa-reply" aria-hidden="true"></span> Vazgeç</button>
    </span>
</div>

 

Horizontal Form

Bootstrap From Elemanları

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

 

 

Bootstrap CSS Componentleri

 

<div class="form-group">
  <label class="col-md-4 control-label" for="textinput">Text Input</label>  
  <div class="col-md-4">
     <input id="textinput" name="textinput" placeholder="placeholder" class="form-control input-md" type="text">
  <span class="help-block">help</span>  
  </div>
</div>

 

textarea:

Bootstrap CSS Componentleri

 <div class="form-group">
   <label for="comment">Comment:</label>
   <textarea class="form-control" rows="5" id="comment">
</div>

Checkbox:

Bootstrap CSS Componentleri

<div class="checkbox">
  <label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
  <label><input type="checkbox" value="" disabled>Option 3</label>
</div>

  Bootstrap CSS Componentleri

<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>

Radio Button

Bootstrap CSS Componentleri

 <div class="radio">
  <label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
  <label><input type="radio" name="optradio" disabled>Option 3</label>
</div>

Bootstrap CSS Componentleri

<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>

 

Select List:

Bootstrap CSS Componentleri

<form role="form">
        <div class="form-group">
          <label for="sel1">Select list (select one):</label>
          <select class="form-control" id="sel1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
          </select>
          <br>
          <label for="sel2">Mutiple select list (hold shift to select more than one):</label>
          <select multiple class="form-control" id="sel2">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
       </div>
 </form>

 

Form Elemanı Boyutları

Bootstrap From Elemanları

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

 

Form Elemanı Kolon Genişliği

Bootstrap From Elemanları

 
<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

Örnek Form

Bootstrap From Uygulamaları

<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>

 

Örnek Form

Bootstrap From Uygulamaları

<div class="container">
  <h2>Bootstrap Mixed Form <p class="lead">with horizontal and inline fields</p></h2>
  <form role="form" class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-1" for="inputEmail1">Email</label>
      <div class="col-sm-5"><input class="form-control" id="inputEmail1" placeholder="Email" type="email"></div>
    </div>
    <div class="form-group">
      <label class="col-sm-1" for="inputPassword1">Password</label>
      <div class="col-sm-5"><input class="form-control" id="inputPassword1" placeholder="Password" type="password"></div>
    </div>
    <div class="form-group">
      <label class="col-sm-12" for="TextArea">Textarea</label>
      <div class="col-sm-6"><textarea class="form-control" id="TextArea"></div>
    </div>

    <div class="form-group">
      <div class="col-sm-3"><label>First name</label><input class="form-control" placeholder="First" type="text"></div>
      <div class="col-sm-3"><label>Last name</label><input class="form-control" placeholder="Last" type="text"></div>
    </div>
    <div class="form-group">
      <label class="col-sm-12">Phone number</label>
      <div class="col-sm-1"><input class="form-control" placeholder="000" type="text"><div class="help">area</div></div>
      <div class="col-sm-1"><input class="form-control" placeholder="000" type="text"><div class="help">local</div></div>
      <div class="col-sm-2"><input class="form-control" placeholder="1111" type="text"><div class="help">number</div></div>
      <div class="col-sm-2"><input class="form-control" placeholder="123" type="text"><div class="help">ext</div></div>
    </div>
    <div class="form-group">
      <label class="col-sm-1">Options</label>
      <div class="col-sm-2"><input class="form-control" placeholder="Option 1" type="text"></div>
      <div class="col-sm-3"><input class="form-control" placeholder="Option 2" type="text"></div>
    </div>
    <div class="form-group">
      <div class="col-sm-6">
        <button type="submit" class="btn btn-info pull-right">Submit</button>
      </div>
    </div>
  </form>
  <hr>
</div>
     

 

Table İçinde Bootstrap Form Örneği

Bootstrap From Elemanları

<table class="table table-condensed table-hover table-responsive table-striped">
                                    <thead>
                                        <tr>
                                            <th>Banka Adı</th>
                                            <th>Onay</th>
                                            <th>Taksit Sayısı</th>
                                            <th>Banka Uyarısı</th>
                                            <th>Sıralanış Sira</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>{Banka}</td>
                                            <td>
                                                <input type="checkbox" class="form-control" name="banka_no[]" value=/>
                                            </td>
                                            <td>
                                                <select multiple class="form-control" name="taksitler[]">
                                                    <option>1</option>
                                                    <option>2</option>
                                                    <option>3</option>
                                                    <option>4</option>
                                                    <option>5</option>
                                                </select>
                                            </td>
                                            <td>
                                                <div class="form-group">
                                                    <div class="col-xs-12 col-sm-12">
                                                        <textarea class="form-control" id="title" name="baciklama[]" rows="3"></textarea>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="form-group">
                                                    <div class="col-xs-12 col-sm-3">
                                                        <input type="text" class="form-control" id="sira" name="sira[]" value=""/>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="5" class="text-right">
                                                <button type="button" class="btn btn-primary btn-xs">Kaydet</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

 

Yorumunuzu Ekleyin

Yükleniyor...