آموزش گروه های ورودی در بوت استرپ

4 سال پیش

امتیاز دهید post

آموزش گروه های ورودی در بوت استرپ

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش گروه های ورودی در بوت استرپ خواهیم پرداخت.

این درس در مورد یک ویژگی دیگر که بوت استرپ پشتیبانی می کند، گروه های ورودی صحبت می کنیم. گروههای ورودی کنترلهای فرم را گسترش می دهند. با استفاده از گروه های ورودی می توانید متن یا دکمه ها را به راحتی بر ورودی های متن متصل کرده و اضافه کنید.

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

برای مقدمه یا افزودن عناصر به یک کنترل formform.

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

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

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

مثال زیر گروه ورودی اساسی را نشان می دهد –

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

      &lt;div class = "input-group"&gt;
         &lt;input type = "text" class = "form-control"&gt;
         &lt;span class = "input-group-addon"&gt;.00&lt;/span&gt;
      &lt;/div&gt;
        
      &lt;br&gt;
      
      &lt;div class = "input-group"&gt;
         &lt;span class = "input-group-addon"&gt;$&lt;/span&gt;
         &lt;input type = "text" class =" form-control"&gt;
         &lt;span class = "input-group-addon"&gt;.00&lt;/span&gt;
      &lt;/div&gt;
   &lt;/form&gt;
   
&lt;/div&gt;

</div>

<br>

</div>

<br>

</div>

</form>

</div>

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

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

مثالهای زیر این را نشان می دهد –

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

      &lt;div class = "input-group"&gt;
         &lt;span class = "input-group-addon"&gt;@&lt;/span&gt;
         &lt;input type = "text" class = "form-control" placeholder = "Twitterhandle"&gt;
      &lt;/div&gt;
        
      &lt;br&gt;

      &lt;div class = "input-group input-group-sm"&gt;
         &lt;span class = "input-group-addon"&gt;@&lt;/span&gt;
         &lt;input type = "text" class = "form-control" placeholder = "Twitterhandle"&gt;
      &lt;/div&gt;
   &lt;/form&gt;
   
&lt;/div&gt;

</div>

<br>

</div>

<br>

</div>

</form>

</div>

کادرهای تأیید و افزونه های رادیویی

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

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

</span>

</div>

</div><br>

</span>

</div>

</div>

</div>

</form>

</div>

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

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

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

Go!

</button>

</span>

</div>

</div><br>

Go!

</button>

</span>

</div>

</div>

</div>

</form>

</div>

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

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

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

<button type = "button" class = "btn btn-default dropdown-toggle"

data-toggle = "dropdown">

DropdownMenu

</button>

<li><a href = "#">Action</a></li>

<li><a href = "#">Another action</a></li>

<li><a href = "#">Something else here</a></li>

<li><a href = "#">Separated link</a></li>

</ul>

</div>

</div>

</div><br>

<button type = "button" class = "btn btn-default dropdown-toggle"

data-toggle = "dropdown">

DropdownMenu

</button>

<li><a href = "#">Action</a></li>

<li><a href = "#">Another action</a></li>

<li><a href = "#">Something else here</a></li>

<li><a href = "#">Separated link</a></li>

</ul>

</div>

</div>

</div>

</div>

</form>

</div>

دکمه های تقسیم شده

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

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

<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 = "sr-only">Toggle Dropdown</span>

</button>

<li><a href = "#">Action</a></li>

<li><a href ="#">Another action</a></li>

<li><a href = "#">Something else here</a></li>

<li><a href = "#">Separated link</a></li>

</ul>

</div>

</div>

</div><br>

Dropdown Menu

</button>

<button type = "button" class = "btn btn-default dropdown-toggle"

data-toggle = "dropdown" tabindex = "-1">

<span class = "sr-only">Toggle Dropdown</span>

</button>

<li><a href = "#">Action</a></li>

<li><a href = "#">Another action</a></li>

<li><a href = "#">Something else here</a></li>

<li><a href = "#">Separated link</a></li>

</ul>

</div>

</div>

</div>

</div>

</form>

</div>

منبع.

لیست جلسات قبل آموزش بوت استرپ

امتیاز دهید post

برچسب ها : آموزش بوت استرپ آموزش طراحی وب سایت

نویسنده مطلب saber

آموزش گروه های ورودی در بوت استرپ

آموزش گروه های ورودی در بوت استرپ

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

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

کادرهای تأیید و افزونه های رادیویی

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

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

دکمه های تقسیم شده

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

بدون دیدگاه

آموزش گروه های ورودی در بوت استرپ

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

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

کادرهای تأیید و افزونه های رادیویی

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

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

دکمه های تقسیم شده

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه