گروه مقاله : Bootstrap
تاريخ انتشار : 1394/06/03 - 16:21
كد :6089

ورودی های Bootstrap (بخش 2)

کنترل استاتیک
چنانچه می خواهید مقداری متن ساده را بعد از یک برچسب فرم در داخل یک فرم افقی قرار دهید، می توانید
از کلاس form-control-static. در یک عنصر <p> استفاده کنید:
 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Horizontal form with static control</h2>
  <form class="form-horizontal" role="form">
    <div class="form-group">
      <label class="control-label col-sm-2" for="email">Email:</label>
      <div class="col-sm-10">
        <p class="form-control-static">someone@example.com</p>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="pwd">Password:</label>
      <div class="col-sm-10">          
        <input type="password" class="form-control" id="pwd" placeholder="Enter password">
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
    </div>
  </form>
</div>
 
</body>
</html>
 
حالت های کنترل فرم در Bootstrap
  • حالت   INPUT FOCUS- خط بیرونی input حذف شده است و یک box-shadow بر روی focus اضافه شده است.
  • حالت DISABLED INPUTS (ورودی های غیر فعال) - برای غیرفعال کردن یک فیلد ورودی (input)، خصوصیت disabled را اضافه کنید.
  •  FIELDSETS غیر فعال – برای غیر فعال کردن تمام کنترل های یک fieldset می توانید یک خصوصیت disabled را به آن اضافه کنید.
  • حالت READONLY INPUTS (ورودی های فقط خواندنی) - یک خصوصیت readonly را به یک فیلد ورودی(input) اضافه کنید تا از نوشتن ورودی توسط کاربر اجتناب کنید.
  • حالت VALIDATION (اعتبار سنجی) - Bootstrap شامل استایل هایی برای حالات اعتبار سنجی می باشد، این حالات عبارتند از پیام های error(خطا) و warning(اخطار) و success(موفقیت). برای استفاده از این حالات، کلاس های has-warning. و has-error. و has-success. را استفاده کنید.
  • آیکن ها - شما می توانید آیکن های فیدبک را به وسیله ی کلاس has-feedback. و یک آیکن، اضافه کنید.
  • HIDDEN LABELS (برچسب های مخفی) -  بر روی برچسب های مخفی، می توانید از کلاس sr-only. استفاده کنید.
 
مثال زیر برخی حالت های فرم را در یک فرم افقی نشان می دهد:
 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Horizontal form: control states</h2>
  <form class="form-horizontal" role="form">
    <div class="form-group">
      <label class="col-sm-2 control-label">Focused</label>
      <div class="col-sm-10">
        <input class="form-control" id="focusedInput" type="text" value="Click to focus...">
      </div>
    </div>
    <div class="form-group">
      <label for="inputPassword" class="col-sm-2 control-label">Disabled</label>
      <div class="col-sm-10">
        <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
      </div>
    </div>
    <fieldset disabled>
      <div class="form-group">
        <label for="disabledTextInput" class="col-sm-2 control-label">Disabled input and select list (Fieldset disabled)</label>
        <div class="col-sm-10">
          <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
        </div>
      </div>
      <div class="form-group">
        <label for="disabledSelect" class="col-sm-2 control-label"></label>
        <div class="col-sm-10">
          <select id="disabledSelect" class="form-control">
            <option>Disabled select</option>
          </select>
        </div>
      </div>
    </fieldset>
    <div class="form-group has-success has-feedback">
      <label class="col-sm-2 control-label" for="inputSuccess">Input with success and glyphicon</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="inputSuccess">
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
    </div>
    <div class="form-group has-warning has-feedback">
      <label class="col-sm-2 control-label" for="inputWarning">Input with warning and glyphicon</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="inputWarning">
        <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
      </div>
    </div>
    <div class="form-group has-error has-feedback">
      <label class="col-sm-2 control-label" for="inputError">Input with error and glyphicon</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="inputError">
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>
    </div>
  </form>
</div>
 
</body>
</html>
 
در مثال زیر از مقداری کنترل کننده های فرم در یک فرم خطی استفاده شده است:
 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Inline form: control states</h2>
  <form class="form-inline" role="form">
    <div class="form-group">
      <label for="focusedInput">Focused</label>
      <input class="form-control" id="focusedInput" type="text">
    </div>
    <div class="form-group">
      <label for="inputPassword">Disabled</label>
      <input class="form-control" id="disabledInput" type="text" disabled>
    </div>
    <div class="form-group has-success has-feedback">
      <label for="inputSuccess2">Input with success</label>
      <input type="text" class="form-control" id="inputSuccess2">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
    <div class="form-group has-warning has-feedback">
      <label for="inputWarning2">Input with warning</label>
      <input type="text" class="form-control" id="inputWarning2">
      <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
    </div>
    <div class="form-group has-error has-feedback">
      <label for="inputError2">Input with error</label>
      <input type="text" class="form-control" id="inputError2">
      <span class="glyphicon glyphicon-remove form-control-feedback"></span>
    </div>
  </form>
</div>
 
</body>
</html>
نظرات كاربران :