Ön yüz geliştiriciler için arayüz geliştirmeyi oldukça kolaylaştıran Bootstrap’in dördüncü sürümü yakın bir zamanda yayınlandı. Peki Bootstrap 4’ün getirdiği yeniliklerden yararlanmak için Bootstrap 3 arayüzünüzü yükseltmek istiyorsanız bunu kolay yoldan nasıl yapabilirsiniz?
Bu yöntem için Regular Expression komutları kullanacağız. Kısa adıyla RegExp, içinde farklı parametreler olan metinleri bulmaya yarayan bir betimleme dili. Javascript’ten PHP’ye çok farklı platformlarda kullanılabilen RegExp karmaşık olduğu için çoğu kez kullanılamıyor.
Bu makalede Bootstrap 3 arayüzünü Bootstrap 4’e yükseltmek için kopyala yapıştır kolaylığı ile kullanabileceğiniz Bootstrap RegExp dönüşüm kodlarını paylaşacağız.
Bu işi RegExp desteklemesi koşulu ile herhangi bir IDE kullanarak yapabilirsiniz. Biz ise bu işi Atom IDE kullanarak yapacağız.
Birinci Adım: Dönüşüm Yapacağınız Projeyi ATOM’da Proje olarak açın
Tema dosyalarınızın olduğu klasörleri kapsayacak şekilde Open / Aç menüsünden ilgili klasörü herhangi bir dosya seçmeden açın. ATOM’da sol kolonda Project adı altında açtığınız klasördeki dosyalar gözükecektir. Bu sayede az sonra yapacağımız bul değiştir fonksiyonlarını bu alanda görünen dosyalarda uygulayacağız.
İkinci Adım: Projede Bul Değiştir Menüsünü Açın
Find menüsünden Find in Project’e tıklayarak sayfanın altında dönüşüm parametrelerini yazacağımız alanı açın.
Üçüncü Adım: İlk Denemeyi Yapalım
Projemizde en çok kullanılan kodlardan biriyle başlayalım. Muhtemelen arayüzünüzde col-lg-offset-2 sınıfı kullanmış olabilirsiniz. Genelde çoğu arayüzde hizalama ile kullanılmaktadır. Eğer yoksa da olanlardan biriyle değiştirebilirsiniz.
Örnekteki kod arayüzlerimiz içinde geçen Bootstrap 3 uyumlu col-md-offset-2 gibi sınıfı Bootstrap 4 uyumlu offset-md-2 formata bu şekilde dönüştürülebilmektedir.
Dönüşümün doğru olarak yapıldığına emin olmak için öncelikle Find ALL butonu ile yapılacak değişiklikleri önceden görüntülemeniz iyi olur.
Bootstrap 3’ten Bootstrap 4’e Dönüşüm Tablosu
| .col-*-offset-* | .offset-* |
| .col-*-push-* | .order-*-2 |
| .col-*-pull-* | .order-*-1 |
| .panel | .card |
| .panel-heading | .card-header |
| .panel-title | .card-title |
| .panel-body | .card-body |
| .panel-footer | .card-footer |
| .panel-primary | .card.bg-primary.text-white |
| .panel-success | .card.bg-success.text-white |
| .panel-info | .card.text-white.bg-info |
| .panel-warning | .card.bg-warning |
| .panel-danger | .card.bg-danger.text-white |
| .well | .card.card-body |
| .thumbnail | .card.card-body |
| .list-inline > li | .list-inline-item |
| .dropdown-menu > li | .dropdown-item |
| .nav navbar > li | .nav-item |
| .nav navbar > li > a | .nav-link |
| .navbar-right | .ml-auto |
| .navbar-btn | .nav-item |
| .navbar-fixed-top | .fixed-top |
| .nav-stacked | .flex-column |
| .btn-default | .btn-secondary |
| .img-responsive | .img-fluid |
| .img-circle | .rounded-circle |
| .img-rounded | .rounded |
| .form-horizontal | (ku) |
| .radio | .form-check |
| .checkbox | .form-check |
| .input-lg | .form-control-lg |
| .input-sm | .form-control-sm |
| .control-label | .col-form-label |
| .table-condensed | .table-sm |
| .pagination > li | .page-item |
| .pagination > li > a | .page-link |
| .item | .carousel-item |
| .help-block | .form-text |
| .pull-right | .float-right |
| .pull-left | .float-left |
| .center-block | .mx-auto.d-block |
| .hidden-xs | .d-none |
| .hidden-sm | .d-sm-none |
| .hidden-md | .d-md-none |
| .hidden-lg | .d-lg-none |
| .visible-xs | .d-block.d-sm-none |
| .visible-sm | .d-none.d-sm-block.d-md-none |
| .visible-md | .d-none.d-md-block.d-lg-none |
| .visible-lg | .d-none.d-lg-block.d-xl-none |
| .label | .badge |
| .badge | .badge.badge-pill |
