ما کلاسهای اصلی Bootstrap را کار کردیم و یک پالت رنگ متفاوت و کمی شدیدتر انتخاب کردیم:

<button class = "btn btn-default" > پیش فرض </button> <button class = "btn btn-basic" > اصلی </ button> <button class = "btn btn-info" > اطلاعات </ button> <دکمه class = "btn btn -uccess" > موفقیت </ دکمه> <button class = "btn btn-warning" > هشدار </ دکمه> <button class = "btn btn-خطر" >خطر </ دکمه> <دکمه کلاس 
 
 
 
 
 
 = "btn btn-neutral" > دکمه خنثی >

دکمه ها در تمام اندازه های مورد نیاز وجود دارند:

<دکمه کلاس = "رمز عبور رمز عبور * اولیه BTN-LG" > بزرگ </ دکمه> <دکمه کلاس = "رمز عبور رمز عبور * اولیه" > عادی </ دکمه> <دکمه کلاس = "رمز عبور رمز عبور * اولیه BTN-SM" > کوچک </ دکمه> 
 
 

کلاسهای اضافی اضافه کردیم که می تواند به شما کمک کند ظاهر را بهتر تنظیم کنید. می توانید از دکمه های معمولی ، دکمه های گوشه های گرد یا دکمه های ساده ساده استفاده کنید. بیایید چند نمونه را ببینیم:

<button class = "btn btn-basic" > پیش فرض </ button> <button class = "btn btn-basic btn-round" > دور </ button> <button class = "btn btn-basic btn-round" > < i class = "zmdi zmdi-favorite-outline6" > </i> با نماد </ button> <button class = "btn btn- basic btn-icon btn-icon-mini btn-round" > <i class = "zmdi zmdi-favorite-outline " > </i></ دکمه> < کلاس دکمه = 
 
   
    
 "btn btn-basic btn-simple" > ساده </ دکمه>

برای استفاده از کادرهای انتخاب سفارشی ، نیازی به وارد کردن فایل Javascript جداگانه نیست ، فقط کد زیر را اضافه کنید:

<div class = "checkbox" > <input id = "checkbox1" type = "checkbox" > <label for = "checkbox1" > بدون علامت </ label> </div> 
      
     


عنصر <div کلاس = "را بردارید" > <ورودی شناسه = "checkbox2" نوع = "را بردارید" بررسی می شود = "" > <برچسب برای = checkbox2 "" > بررسی </ برچسب> </ DIV> 
       
     


<div class = "checkbox" > <input id = "checkbox3" type = "checkbox" disable = "" > <label for = "checkbox3" > غیرفعال نشده علامت گذاری نشده </ label> </div> 
       
     


<div class = "checkbox" > <input id = "checkbox4" type = "checkbox" تیک خورده = "" غیرفعال = "" > <label for = "checkbox4" > غیرفعال بودن برچسب </ label> </div> 
        
     

برای استفاده از دکمه های رادیویی سفارشی ، نیازی به وارد کردن فایل Javascript جداگانه نیست ، فقط کد زیر را اضافه کنید:

<div class = "radio" > <input type = "radio" name = "radio1" id = "radio1" value = "option1" > <label for = "radio1" > رادیو خاموش است </ label> </div> 
        
     


<div class = "radio" > <input type = "radio" name = "radio1" id = "radio2" value = "option2" تیک زده = "" > <label for = "radio2" > رادیو روشن است </ label> </div> 
         
     


عنصر <div کلاس = "رادیو" > <ورودی نوع = "رادیو" نام = "radio3" شناسه = "radio3" ارزش = "option3" غیر فعال = "" > <برچسب برای = "radio3" > رادیو غیر فعال خاموش است </ برچسب > </div> 
         
     


<div class = "radio" > <input type = "radio" name = "radio4" id = "radio4" value = "option4" تیک زده = "" غیرفعال = "" > <label for = "radio4" > رادیو غیرفعال است در <برچسب> </ div> 
          
     

ما ورودی Bootstrap را مجدداً مرتب کردیم تا ظاهری تخت و کمترین داشته باشد. می توانید از آنها با برچسب های معمولی ، حالت ها یا گروه های ورودی استفاده کنید.

<input class = "form-control form-control-lg" type = "text" placeholder = ".form-control-lg" > <input class = "form-control" type = "text" placeholder = "ورودی پیش فرض" > <input class = "form-control form-control-sm" type = "text" placeholder = ".form-control-sm" >   
   
   

Textarea سبک جدیدی دارد ، بنابراین به نظر می رسد مشابه سایر ورودی ها باشد.

    <textarea class = "form-control" placeholder = "در اینجا متن خوب شما می تواند باشد" rows = "5" > </textarea>   

ما طراحی قرص های بوت استرپ را به چیزی تازه تر تبدیل کردیم. ما همچنین کلاسهای رنگی بیشتری را برای سفارشی سازی مانند .nav-pills-primary، .nav-pills-info، .nav-pills-success، .nav-pills-warning، .nav-pills-danger

<ul class = "nav nav-pills nav-pills- basic " role = "tablist" > <li class = "nav-item" > <a class = "nav-link" data-toggle = "tab" href = " #active " role = " tablist " > <i class = " zmdi zmdi-favorite " > </i> </a> </li> <li class = " nav-item " > <a class = "nav-link فعال " data-toggle = " tab " href  
     
            
             
        
    
     
           = "#link" role = "tablist" > <i class = "zmdi zmdi-library" > </i> </a> </li> <li class = "nav-item" > <a class = "nav -link " data-toggle = " tab " href = " #link " role = " tablist " > <i class = " zmdi zmdi-lamp " > </i> </a> </li> <li class = "nav-item " > <a class = " nav-link غیر فعال است " 
             
        
    
     
            
             
        
    
     
          data-toggle = "tab" href = "#disabled" role = "tablist" > <i class = "zmdi zmdi-lock" > </i> </a> </li> </ul>  
             
        
    

عناصر صفحه بندی بوت استرپ متناسب با موضوع کلی سفارشی شده اند. علاوه بر ظاهر کلاسیک ، ما کلاس های رنگی را نیز اضافه کردیم تا سفارشی سازی بیشتری مانند .pagination-info، .pagination-success، .pagination-warning، .pagination-danger، .pagination-primary.

// صفحه بندی ساده < ul class = "pagination pagination-basic" > < li class = "page-item active" > < a class = "page-link" href = "javascript: void (0)؛" > 1 < / a> </ li > < li class = "page-item" > < a class = "page-link" href = "javascript: void (0)؛" > 2 < / a> <

    
    
    class = "page-item" > < a class = "page-link" href = "javascript: void (0)؛" > 3 < / a> </ li > < li class = "page-item" > < a class = "page-link" href = "javascript: void (0)؛" > 4 < / a> </ li > < li class = "page-item" > < a class = "
    
    "javascript: void (0)؛" > 5 < / a> </ li > </ ul >



// صفحه صفحه بندی کامل < div class = "justify-content-center" > < ul class = "pagination pagination-basic" > < li class = "page-item arrow-margin-left" > < a class = "page -link " href = " javascript: void (0)؛ " aria - label = "قبلی" > < span aria - hidden = "true" > <

    
        
            
                - hidden = "true" > < / i> </ span > </ a > </ li >
            
        


        < li class = "page-item" > < a class = "page-link" href = "javascript: void (0)؛" > 1 < / a> </ li > < li class = "page-item" > < a class = "page-link" href = "javascript: void (0)؛" > 2 < / a> </ li > < li class = "page-item active" > <
        
        = "javascript: void (0)؛" > 3 < / a> </ li > < li class = "page-item" > < a class = "page-link" href = "javascript: void (0)؛" > 4 < / a> </ li > < li class = "page-item" > < a class = "page-link" href = "javascript: void (0)؛" > 5 < / a> <
        
        



        < li class = "page-item arrow-margin-right" > < a class = "page-link" href = "javascript: void (0)؛" aria - label = "Next" > < span aria - hidden = "true" > < i class = "zmdi zmdi-chevron-right" aria - hidden = "true" > < / i> </ span > </ a > <
            
                
            
        
    
</ div >

نوارهای پیشرفت Bootstrap دارای کلاسها و عملکردهای یکسانی هستند. افزودن این کیت به پروژه موجود فقط تمیزتر به نظر می رسد. خط به طور پیش فرض خاکستری است، هر نوار دارای یک رنگ خاص اما شما می توانید برخی از رنگ برای خطوط پس زمینه با استفاده از کلاس بعدی اضافه کنید .progress-primary، .progress-info، .progress-success، .progress-warning، .progress-danger،

<div class = "progress-container" > <span class = "progress-badge" > پیش فرض </ span> <div class = "progress" > <div class = "progress-bar" role = "progressbar" aria-Nirxenow = "60" aria-Nirxemin = "0" aria-Nirxemax = "100" style = " عرض : 25 ٪؛ " > <span class = "progress-value" > 
     
     
               
             25٪ </span> </div> </div> </div>
        
    


<div class = "progress-container progress-basic" > <span class = "progress-badge" > مقدماتی </ span> <div class = "progress" > <div class = "progress-bar progress-bar-warning" role = "progressbar" aria-Nirxenow = "60" aria-Nirxemin = "0" aria-Nirxemax = "100" style = " عرض : 60 ٪؛ " >< کلاس span = 
     
     
               
             "progress-value" > 60٪ </span> </div> </div> </div>
        
    


<div class = "progress-container progress-info" > <span class = "progress-badge" > اطلاعات </ span> <div class = "progress" > <div class = "progress-bar progress-bar-warning" role = "progressbar" aria-Nirxenow = "60" aria-Nirxemin = "0" aria-Nirxemax = "100" style = " عرض : 60 ٪؛ " >< کلاس span = 
     
     
               
             "progress-value" > 60٪ </span> </div> </div> </div>
        
    


<div class = "progress-container progress -uccess" > <span class = "progress-badge" > موفقیت </ span> <div class = "progress" > <div class = "نوار پیشرفت-هشدار میله پیشرفت" role = "progressbar" aria-Nirxenow = "60" aria-Nirxemin = "0" aria-Nirxemax = "100" style = " عرض : 60 ٪؛ " >< کلاس span = 
     
     
               
             "progress-value" > 60٪ </span> </div> </div> </div>
        
    


<div class = "progress-container progress-خطر" > <span class = "progress-badge" > خطر </ span> <div class = "progress" > <div class = "progress-bar progress-bar-warning" role = "progressbar" aria-Nirxenow = "60" aria-Nirxemin = "0" aria-Nirxemax = "100" style = " عرض : 60 ٪؛ " >< کلاس span = 
     
     
               
             "progress-value" > 60٪ </span> </div> </div> </div>
        
    


<div class = "progress-container progress-warning" > <span class = "progress-badge" > هشدار </ span> <div class = "progress" > <div class = "نوار پیشرفت-نوار پیشرفت-هشدار" role = "progressbar" aria-Nirxenow = "60" aria-Nirxemin = "0" aria-Nirxemax = "100" style = " عرض : 60 ٪؛ " >< کلاس span = 
     
     
               
             "progress-value" > 60٪ </span> </div> </div> </div>
        
    

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

<span class = "badge badge-default" > پیش فرض </ span> <span class = "badge badge-basic" > مقدماتی </ span> <span class = "badge badge -uccess" > موفقیت </ span> <span class = "badge badge-info" > اطلاعات </ span> <span class = "badge badge-warning" > هشدار </ span> <span class = "badge badge-خطر" >خطر </ span> 
 
 
 
 
 

اعلان های جدید تازه و تمیز به نظر می رسند. آنها با نوار عالی همکاری می کنند. برای این نمونه اعلان ها ما از .container-fluidکلاس استفاده کرده ایم ، بنابراین سیال خواهند بود ، لطفاً .containerوقتی از کلاس خارج از کلاس استفاده می کنید از کلاس استفاده کنید .wrapperتا با ظرف صفحه عمومی همخوانی داشته باشند

<div class = "alert alert-success" role = "alert" > <div class = "container" > <div class = "alert-icon" > <i class = "zmdi zmdi-thumb-up" > </ i > </div> <strong> آفرین! </ strong> شما با موفقیت این پیام هشدار مهم را خواندید.
        <button type = "button" class = "close" data-remove = "alert"  
     
         
             
        
            
                 aria-hidden = "true" > <i class = "zmdi zmdi-close" > </i> </span> </button> </div> </div>
                 
            
        
    


<div class = "alert alert-info" role = "alert" > <div class = "container" > <div class = "alert-icon" > <i class = "zmdi zmdi-alert-circle-o" > < / i> </div> <strong> سر بالا! </ strong> این هشدار به توجه شما نیاز دارد ، اما خیلی مهم نیست.
        <button type = "button" class = "close" data-remove = "alert"  
     
         
             
        
            
                <span aria-hidden = "true" > <i class = "zmdi zmdi-close" > </i> </span> </button> </div> </div> 
                 
            
        
    


<div class = "alert alert-warning" role = "alert" > <div class = "container" > <div class = "alert-icon" > <i class = "zmdi zmdi-notifications" > </i> < / div> <strong> هشدار! </ strong> بهتر است خودتان را بررسی کنید ، خیلی خوب به نظر نمی رسید.
        <button type = "button" class = "close" data-remove = "alert"  
     
         
             
        
            
             aria-hidden = "true" > <i class = "zmdi zmdi-close" > </i> </span> </button> </div> </div>
                 
            
        
    


<div class = "alert alert-خطر" role = "alert" > <div class = "container" > <div class = "alert-icon" > <i class = "zmdi zmdi-block" > </i> < / div> <strong> اوه! </ strong> چند مورد را تغییر دهید و دوباره ارسال کنید.
        <button type = "button" class = "close" data-remove = "alert"  
     
         
             
        
            
             aria-hidden = "true" > <i class = "zmdi zmdi-close" > </i> </span> </button> </div> </div>