جلسه هفدهم دوره Bootstrap : گروه های ورودی

گروه های ورودی

مؤلفه های چیدمان Bootstrap

در این فصل قصد داریم در مورد گروه های ورودی (Input Group) ، به عنوان یکی از قابلیت های دیگری که Bootstrap پشتیبانی می کند ، صحبت کنیم. گروه های ورودی از کنترل های فرم (Form Controls) تعمیم یافته اند. با استفاده از گروه های ورودی ، می توانیم به راحتی متن و یا کلیدها را به ورودی های مبتنی بر متن الحاق کنیم.

با استفاده از قابلیت اضافه کردن محتوای الحاق شده به یک فیلد ورودی ، می توانیم عناصر رایجی را به ورودی کاربر اضافه کنیم. به عنوان مثال ، می توانیم نماد دلار ، @ را به نام کاربری توییتر یا هر چیز دیگری را که ممکن است در رابط کاربری برنامه ما رایج باشد ، اضافه کنیم.

برای الحاق کردن عناصر به یک کلاس form-control. به صورت زیر عمل می کنیم :

• عنصر را در داخل تگ <div> با کلاس input-group. قرار می دهیم.
• در قدم بعدی ، در داخل همان تگ <div> ، محتوای اضافی خود را در داخل تگ <span> با کلاس input-group-addon. قرار می دهیم.
• اکنون این تگ <span> را قبل یا بعد از عنصر <input> قرار می دهیم.

جهت رعایت سازگاری مرورگرها ، در اینجا از استفاده از عناصر <select> اجتناب کنید ، زیرا این عناصر نمی را نمی توان به طور کامل در مرورگرهای WebKit سبک بندی نمود. هم چنین ، کلاس های گروه ورودی را به طور مستقیم به گروه های فرم اعمال نکنید. یک گروه ورودی ، یک مؤلفه جداگانه می باشد.

گروه ورودی پایه

مثال زیر ، گروه ورودی پایه را نشان می دهد :

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "input-group">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "twitterhandle">
      </div>
		
      <br>

      <div class = "input-group">
         <input type = "text" class = "form-control">
         <span class = "input-group-addon">.00</span>
      </div>
		
      <br>
      
      <div class = "input-group">
         <span class = "input-group-addon">$</span>
         <input type = "text" class =" form-control">
         <span class = "input-group-addon">.00</span>
      </div>
   </form>
   
</div>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

تغییر اندازه گروه ورودی

ما می توانیم اندازه گروه های ورودی را با اضافه کردن کلاس های سایز بندی نسبی فرم مانند
  input-group-lg ، .input-group-sm ، .input-group-xs. تغییر دهیم. اندازه محتویات درون فرم به صورت خودکار تغییر می کنند.

مثال زیر ، نحوه انجام این کار را نشان می دهد :

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "input-group input-group-lg">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
		
      <br>

      <div class = "input-group">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
		
      <br>

      <div class = "input-group input-group-sm">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
   </form>
   
</div>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

Checkbox ها و Radio Add-on ها

ما می توانیم کلیدهای رادیویی و checkbox ها را به جای متن الحاق کنیم ، همان طور که در مثال زیر نشان داده شده است :

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <span class = "input-group-addon">
                  <input type = "checkbox">
               </span>
               
               <input type = "text" class = "form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <span class = "input-group-addon">
                  <input type = "radio">
               </span>
               
               <input type = "text" class = "form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
         
      </div><!-- /.row -->
   </form>
   
</div>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

افزونه های کلید

ما حتی می توانیم کلیدها را در گروه های ورودی اضافه کنیم. به جای کلاس input-group-addon. ، باید از کلاس ininput-group-btn. ، برای قرار دادن کلیدها استفاده کنیم. این کار به دلیل سبک های پیش فرض مرورگر ، مورد نیاز است و قابل چشم پوشی نمی باشد. مثال های زیر ، نحوه انجام این کار را نشان می دهند :

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <span class = "input-group-btn">
                  <button class = "btn btn-default" type = "button">
                     Go!
                  </button>
               </span>
					
               <input type = "text" class = "form-control">
               
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         
         <div class = "col-lg-6">
            <div class = "input-group">
               <input type = "text" class = "form-control">
               
               <span class = "input-group-btn">
                  <button class = "btn btn-default" type = "button">
                     Go!
                  </button>
               </span>
               
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
         
      </div><!-- /.row -->
   </form>
   
</div>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

منوهای کشویی با کلیدها

اضافه کردن کلیدها با منوی کشویی در گروه های ورودی می تواند به سادگی با قرار دادن کلید و منوی کشویی در کلاس input-group-btn. انجام شود ، همان طور که در مثال زیر نشان داده شده است :

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <div class = "input-group-btn">
                  <button type = "button" class = "btn btn-default dropdown-toggle" 
                     data-toggle = "dropdown">
                     DropdownMenu 
                     <span class = "caret"></span>
                  </button>
                  
                  <ul class = "dropdown-menu">
                     <li><a href = "#">Action</a></li>
                     <li><a href = "#">Another action</a></li>
                     <li><a href = "#">Something else here</a></li>
                     
                     <li class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                  </ul>
               </div><!-- /btn-group -->
               
               <input type = "text" class = "form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <input type = "text" class = "form-control">
               <div class = "input-group-btn">
                  
                  <button type = "button" class = "btn btn-default dropdown-toggle" 
                     data-toggle = "dropdown">
                     DropdownMenu 
                     <span class = "caret"></span>
                  </button>
                  
                  <ul class = "dropdown-menu pull-right">
                     <li><a href = "#">Action</a></li>
                     <li><a href = "#">Another action</a></li>
                     <li><a href = "#">Something else here</a></li>
                     
                     <li class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                  </ul>
               </div><!-- /btn-group -->
               
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
         
      </div><!-- /.row -->
   </form>
   
</div>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

کلیدهای قطعه بندی شده

برای قطعه بندی کلیدهای کشویی در گروه های ورودی ، از همان سبک عمومی به عنوان کلید کشویی استفاده می کنیم ، اما یک عمل اصلی همراه با حالت کشویی را اضافه می نماییم ، همان طور که در مثال زیر نشان داده شده است :

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <div class = "input-group-btn">
                  <button type = "button" class = "btn btn-default" 
                     tabindex = "-1">Dropdown Menu</button>
                  
                  <button type = "button" class = "btn btn-default dropdown-toggle" 
                     data-toggle = "dropdown" tabindex = "-1">
                     <span class = "caret"></span>
                     <span class = "sr-only">Toggle Dropdown</span>
                  </button>
                  
                  <ul class = "dropdown-menu">
                     <li><a href = "#">Action</a></li>
                     <li><a href ="#">Another action</a></li>
                     <li><a href = "#">Something else here</a></li>
                     
                     <li class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                  </ul>
                  
               </div><!-- /btn-group -->
               <input type = "text" class = "form-control">
               
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         
         <div class = "col-lg-6">
            <div class = "input-group">
               <input type = "text" class = "form-control">
               <div class = "input-group-btn">
                  
                  <button type = "button" class = "btn btn-default" tabindex = "-1">
                     Dropdown Menu
                  </button>
                  
                  <button type = "button" class = "btn btn-default dropdown-toggle" 
                     data-toggle = "dropdown" tabindex = "-1">
                     
                     <span class = "caret"></span>
                     <span class = "sr-only">Toggle Dropdown</span>
                  </button>
                  
                  <ul class = "dropdown-menu pull-right">
                     <li><a href = "#">Action</a></li>
                     <li><a href = "#">Another action</a></li>
                     <li><a href = "#">Something else here</a></li>
                     
                     <li class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                  </ul>
               
               </div><!-- /btn-group -->
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
         
      </div><!-- /.row -->
   </form>
   
</div>

خروجی قطعه کد فوق ، به صورت زیر می باشد :