آموزش Bootstrap جلسه بیست و ششم (Inputs2)

بازدید
10609

دسته بندی :آموزش Bootstrap,آموزش طراحی وب

در خدمت شما هستیم با آموزش Bootstrap جلسه بیست و ششم (Inputs2)

آموزش Bootstrap جلسه بیست و ششم (Inputs2) از سری آموزش های تک قسمتی است

سلام برنامه در خدمت شماست با ادامه بحث رسپانسیو کردن Input ها

در جلسه گذشته درباره input ، textarea ،checkbox ، radio و select صحبت کردیم

در این جلسه درباره input Group و Button group و همچنین کنترل های آنها صحبت می کنیم

مواردی مثل فعال و غیر فعال کردن المان های input و اضافه کردن addon به Input

در این جلسه مبحث Input ها را تمام میکنیم و هر موردی که مانده است گفته می شود

همچنین به صورت کامل درباره ساخت باکس سرچ صحبت می کنیم

Static control

اولین موضوعی که در قسمت دوم Input راجب آن بحث میکنیم static control است. اگر ساده بخواهیم این مورد را توضیح بدهیم باید بگوییم به واسطه کنترل گر های استاتیک همانطور که از نامشان مشخص است میتوانید یک بخش را به صورت استاتیک پر کنید و به آن مقدار ثابت دستی بدهید. به عنوان مثال ما در کد زیر به قسمت ایمیل به کمک کلاس form-control-static مقدار دستی داده ایم که ثابت است و توسط کاربر تغییر نمیکند.

<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Horizontal form with static control</h2>
  <form class="form-horizontal" action="/action_page.php">
    <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" name="pwd">
      </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>

اگر از کد بالا خروجی بگیرید میبینید که کاربر فقط میتواند قسمت پسوورد را پر کند و مقدار ایمیل از قبل برای او تعریف شده است و قابل تغییر نیست کاربرد این عنصر این است که گاهی شما در فرم هایتان یک قسمت را میخواهید کاربر نتواند تغییر دهد و مقدار ثابت باشد به راحتی میتوانید از این مورد استفاده کنید.

input Group

باکس های گروهی یا input Group برای مواردی استفاده میشود که شما علاوه بر یک input ساده از موارد دیگری نیز در input های خود استفاده میکنید معمولا این موارد آیکن ها هستند که جلوه ی بهتری با فرم های ما میدهند و یا توضیحاتی قبل input که به باکس شما متصل هستند برای واضح تر شدن موضوع بهتر است از کد 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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Input Groups</h3>
  <p>The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind it as a "help text".</p>
  <p>The .input-group-addon class attaches an icon or help text next to the input field.</p>
  
  <form>
    <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
      <input id="email" type="text" class="form-control" name="email" placeholder="Email">
    </div>
    <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
      <input id="password" type="password" class="form-control" name="password" placeholder="Password">
    </div>
    <br>
    <div class="input-group">
      <span class="input-group-addon">Text</span>
      <input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
    </div>
  </form>
  <br>

  <p>It can also be used on the right side of the input:</p>
  <form>
    <div class="input-group">
      <input id="email" type="text" class="form-control" name="email" placeholder="Email">
      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>   
    </div>
    <div class="input-group">
      <input id="password" type="password" class="form-control" name="password" placeholder="Password">
      <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
    </div>
  </form>
</div>

</body>
</html>

در کد بالا ما برای ایجاد Input های گروهی از کلاس input-group و برای اضافه کردن آیکن های تصویری از کلاس input-group-addon استفاده کردیم. توجه داشته باشید که کلاس input-group-addon تنها برای آیکن ها نیست اگر متنی هم قبل input و متصل به Input میخواهید ایجاد کنید باید از این کلاس استفاده کنید.

اگر قصد دارید دکمه ای را به input متصل کنید باید از کلاس input-group-btn استفاده کنید به تصویر زیر توجه کنید در این تصویر دکمه سرچ به باکس متصل است.

برای ساخت دکمه سرچ بالا و درک کلاس input-group-btn میتوانید از کد زیر استفاده کنید:

<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
  
<div class="container">
  <h1>Input Group Button</h1>
  <p>The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind it as a "help text".</p>
  <p>The .input-group-btn class attaches a button next to an input field. This is often used as a search bar:</p>
  <form action="/action_page.php">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search" name="search">
      <div class="input-group-btn">
        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
      </div>
    </div>
  </form>
</div>

</body>
</html>

بوت استرپ form control

بوت استرپ برای جذاب کردن فرم ها و input ها نیز کلاس هایی را ایجاد کرده که آن ها را برای شما لیست میکنیم:

input focus : همانطور که از نامش مشخص است برای توجه روی input ها استفاده میشود.
disabled input : برای غیر فعال کردن input ها میتوانید از این کلاس استفاده کنید.
disabled fieldsets: برای غیر فعال کردن فیلد های از این کلاس استفاده میشود.
readonly inputs : این بخش تنها اطلاعات داخل Input را برای کاربر خواندنی میکند و کاربر نمیتواند تغییر دهد.
validation states : همانند دکمه ها که در جلسه های قبل توضیح دادیم برای input ها هم میتوانید کلاس های رنگی تعیین کنید.
icons : به کمک این کلاس شما میتوانید آیکن هایی مربوط به مرحله validation states را اضافه کنید.
hidden labels : اضافه کردن یک لیبل مخفی روی input ها که معمولا برای توضیحات استفاده میشود.

شما میتوانید مواردی که بالا توضیح دادیم را در کد زیر ببینید و از آن استفاده کنید:

<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Horizontal form: control states</h2>
  <form class="form-horizontal">
    <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="disabledInput" 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>

در جلسه قبلی درباره نوشتن input ها در حالت های خطی و یا عمودی صحبت کردیم که آن موارد برای آموزش های این جلسه نیز صدق میکند و میتوانید از آن استفاده کنید. ما در طی ۲ جلسه هر آنچه برای فرم ها و Input ها در بوت استرپ لازم بود را خدمت شما عرض کردیم البته مبحث input ها هم چنان ادامه دارد و در جلسات آینده به موارد بیشتری میپردازیم.
می توانید دیگر قسمت ها را در لینک زیر ببینید

آموزش Bootstrap جلسه بیست و پنجم (Inputs)

آموزش Bootstrap جلسه بیست و هفتم (Input Sizing)

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید

و یا آن را در آپارات مشاهده کنید:

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید

سلام برنامه | HiProgram

مرجع آموزش برنامه نویسی وب و اندروید

مطالب پربازدید

آخرین ارسالی ها

آموزش رفع محدودیت سایز آپلود در وردپرس

آموزش Bootstrap 4 جلسه بیست و هشتم (ScrollSpy)

آموزش Bootstrap 4 جلسه بیست و هفتم (popover)

آموزش Bootstrap 4 جلسه بیست و ششم (Tooltip)

آموزش Bootstrap 4 جلسه بیست و پنجم (Modal)

پکیج های آموزشی

پکیج طراحی قالب وردپرس

اتوماتیک کردن کارها در وردپرس

پکیج طراحی قالب جوملا ۳

آموزش تصویری html5

آموزش تصویری css3