قسمت بیست و سوم bootstrap : نحوه ی ساخت گروه ورودی در بوت استرپ ۴

در قسمت بیست و سوم از آموزش‌های بوت استرپ 4 به این خواهیم پرداخت که گروهی از ورودی را طراحی کنیم. انواع فرم‌های ورودی در این قسمت به شما بزرگواران آموزش داده خواهد شد.

پیشنهاد می‌شود برای درک بهتر این جلسه، قسمت‌های پیشین دوره‌ی بوت استرپ 4 را مطالعه فرمایید.

گروه فرم‌های ورودی

شما با استفاده از کلاس.input-group می‌توانید یک راهنما به فرم‌های خود اضافه کنید. این فرم‌ها متنی یا آیکونی خواهند بود.

برای اضافه کردن متن راهنما در مقابل ورودی از کلاس.input-group-prepend و برای اضافه کردن متن راهنما در پشت ورودی از کلاس.input-group-append استفاده می‌شود.

برای استفاده از یک راهنمای متنی خاص از کلاس .input-group-text باید استفاده کرد.

برای درک بهتر این موضوع به سورس کد زیر توجه کنید.

 

  

    

      @
    
    
  

  

    
    

      @example.com
    
  
 

در رابطه باکلاس.mb-3 در ویدیوی قبلی صبحت کردیم که به خاطر فاصله گرفتن از پایین از این کلاس استفاده می‌شود.

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

برای استفاده از ابعاد مختلف می‌توانید از کلاس‌های.input-group-sm برای کوچک کردن گروه ورودی و کلاس.input-group-lg برای بزرگنمایی استفاده کرد.

برای درک بهتر این موضوع به سورس کد زیر توجه کنید:

 

  

     

       Small
    
    
  


  

    

      Default
    
    
  


  

    

      Large
    
    
  
 

ورودی‌های چندگانه و راهنماها

در سورس کد زیر دو مورد ورودی‌های چندگانه و راهنماهای چندگانه را قرار داده‌ایم:

  

    

      Person
    
    
    
  




  

    

      One
      Two
      Three
    
    
  

گروه فرم همراه با چک باکس یا دکمه‌های رادیویی

شما می‌توانید بجای متن از چک باکس و دکمه‌های رادیویی استفاده کنید. برای درک بهتر این موضوع به سورس کد زیر توجه کنید:

گروه ورودی به همراه دکمه

  

    Basic Button
  
  



  
  

    Go
  



  
  

    OK
    Cancel
  

گروه ورودی به همراه لیست بازشونده

یک دکمه کشویی را در گروه ورودی اضافه کنید. توجه داشته باشید که طبق روال معمول شما به بسته بندی .dropdown احتیاج ندارید.

 

  

    
      Dropdown button
    
    

      Link 1
      Link 2
      Link 3
    
  
  
 

برچسب در گروه ورودی

برچسب‌ها را خارج از گروه ورودی قرار دهید و به یاد داشته باشید که مقدار ویژگی باید با شناسه ورودی مطابقت داشته باشد.

برای درک بهتر این موضوع به سورس کد زیر توجه کنید:

 Write your email here:

  
  

    @example.com
  
 

برای مطالعه موارد بیشتر می‌توانید به سایت getbootstrap مراجعه کنید.

پیشنهاد می‌شود برای مطالعه موارد بیشتر به دوره آموزش بوت استرپ 4 مراجعه فرمایید.

پایدار باشید.