Kategori: BOOTSTRAP

Türkiye Güncel Üniversiteler Listesi (2022) Bootstrap 5 option value list (bootstrap select search example)

KHK ile kapanan üniversiteler listeden çıkarılmış olup eksik üniversite varsa lütfen yorumlardan belirtiniz.

            <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Üniversite" name="universite">
            <datalist id="datalistOptions">
                <option value="Abant İzzet Baysal Üniversitesi">Abant İzzet Baysal Üniversitesi</option>
                <option value="Abdullah Gül Üniversitesi">Abdullah Gül Üniversitesi</option>
                <option value="Acıbadem Üniversitesi">Acıbadem Üniversitesi</option>
                <option value="Adana Bilim ve Teknoloji Üniversitesi">Adana Bilim ve Teknoloji Üniversitesi</option>
                <option value="Adnan Menderes Üniversitesi">Adnan Menderes Üniversitesi</option>
                <option value="Adıyaman Üniversitesi">Adıyaman Üniversitesi</option>
                <option value="Afyon Kocatepe Üniversitesi">Afyon Kocatepe Üniversitesi</option>
                <option value="Ahi Evran Üniversitesi">Ahi Evran Üniversitesi</option>
                <option value="Akdeniz Üniversitesi">Akdeniz Üniversitesi</option>
                <option value="Akev Üniversitesi">Akev Üniversitesi</option>
                <option value="Aksaray Üniversitesi">Aksaray Üniversitesi</option>
                <option value="Alanya Alaaddin Keykubat Üniversitesi">Alanya Alaaddin Keykubat Üniversitesi</option>
                <option value="Alanya Hamdullah Emin Paşa Üniversitesi">Alanya Hamdullah Emin Paşa Üniversitesi</option>
                <option value="Amasya Üniversitesi">Amasya Üniversitesi</option>
                <option value="Anadolu Üniversitesi">Anadolu Üniversitesi</option>
                <option value="Anka Teknoloji Üniversitesi">Anka Teknoloji Üniversitesi</option>
                <option value="Ankara Sosyal Bilimler Üniversitesi">Ankara Sosyal Bilimler Üniversitesi</option>
                <option value="Ankara Üniversitesi">Ankara Üniversitesi</option>
                <option value="Ankara Hacı Bayram Veli Üniversitesi">Ankara Hacı Bayram Veli Üniversitesi</option>
                <option value="Ardahan Üniversitesi">Ardahan Üniversitesi</option>
                <option value="Artvin Çoruh Üniversitesi">Artvin Çoruh Üniversitesi</option>
                <option value="Atatürk Üniversitesi">Atatürk Üniversitesi</option>
                <option value="Atılım Üniversitesi">Atılım Üniversitesi</option>
                <option value="Avrasya Üniversitesi">Avrasya Üniversitesi</option>
                <option value="Ağrı İbrahim Çeçen Üniversitesi">Ağrı İbrahim Çeçen Üniversitesi</option>
                <option value="Bahçeşehir Üniversitesi">Bahçeşehir Üniversitesi</option>
                <option value="Balıkesir Üniversitesi">Balıkesir Üniversitesi</option>
                <option value="Bandırma Onyedi Eylül Üniversitesi">Bandırma Onyedi Eylül Üniversitesi</option>
                <option value="Bartın Üniversitesi">Bartın Üniversitesi</option>
                <option value="Batman Üniversitesi">Batman Üniversitesi</option>
                <option value="Bayburt Üniversitesi">Bayburt Üniversitesi</option>
                <option value="Başkent Üniversitesi">Başkent Üniversitesi</option>
                <option value="Beykent Üniversitesi">Beykent Üniversitesi</option>
                <option value="Bezmiâlem Vakıf Üniversitesi">Bezmiâlem Vakıf Üniversitesi</option>
                <option value="Bilecik Şeyh Edebali Üniversitesi">Bilecik Şeyh Edebali Üniversitesi</option>
                <option value="Bilkent Üniversitesi">Bilkent Üniversitesi</option>
                <option value="Bingöl Üniversitesi">Bingöl Üniversitesi</option>
                <option value="Biruni Üniversitesi">Biruni Üniversitesi</option>
                <option value="Bitlis Eren Üniversitesi">Bitlis Eren Üniversitesi</option>
                <option value="Bozok Üniversitesi">Bozok Üniversitesi</option>
                <option value="Boğaziçi Üniversitesi">Boğaziçi Üniversitesi</option>
                <option value="Bursa Teknik Üniversitesi">Bursa Teknik Üniversitesi</option>
                <option value="Bülent Ecevit Üniversitesi">Bülent Ecevit Üniversitesi</option>
                <option value="Celal Bayar Üniversitesi">Celal Bayar Üniversitesi</option>
                <option value="Cumhuriyet Üniversitesi">Cumhuriyet Üniversitesi</option>
                <option value="Çanakkale Onsekiz Mart Üniversitesi">Çanakkale Onsekiz Mart Üniversitesi</option>
                <option value="Çankaya Üniversitesi">Çankaya Üniversitesi</option>
                <option value="Çankırı Karatekin Üniversitesi">Çankırı Karatekin Üniversitesi</option>
                <option value="Çağ Üniversitesi">Çağ Üniversitesi</option>
                <option value="Çukurova Üniversitesi">Çukurova Üniversitesi</option>
                <option value="Deniz Harp Okulu">Deniz Harp Okulu</option>
                <option value="Dicle Üniversitesi">Dicle Üniversitesi</option>
                <option value="Dokuz Eylül Üniversitesi">Dokuz Eylül Üniversitesi</option>
                <option value="Doğuş Üniversitesi">Doğuş Üniversitesi</option>
                <option value="Dumlupınar Üniversitesi">Dumlupınar Üniversitesi</option>
                <option value="Düzce Üniversitesi">Düzce Üniversitesi</option>
                <option value="Ege Üniversitesi">Ege Üniversitesi</option>
                <option value="Erciyes Üniversitesi">Erciyes Üniversitesi</option>
                <option value="Erzincan Üniversitesi">Erzincan Üniversitesi</option>
                <option value="Erzurum Teknik Üniversitesi">Erzurum Teknik Üniversitesi</option>
                <option value="Eskişehir Osmangazi Üniversitesi">Eskişehir Osmangazi Üniversitesi</option>
                <option value="Fatih Sultan Mehmet Üniversitesi">Fatih Sultan Mehmet Üniversitesi</option>
                <option value="Fırat Üniversitesi">Fırat Üniversitesi</option>
                <option value="Galatasaray Üniversitesi">Galatasaray Üniversitesi</option>
                <option value="Gazi Üniversitesi">Gazi Üniversitesi</option>
                <option value="Gaziantep Üniversitesi">Gaziantep Üniversitesi</option>
                <option value="Gaziosmanpaşa Üniversitesi">Gaziosmanpaşa Üniversitesi</option>
                <option value="Gebze Teknik Üniversitesi">Gebze Teknik Üniversitesi</option>
                <option value="Gedik Üniversitesi">Gedik Üniversitesi</option>
                <option value="Giresun Üniversitesi">Giresun Üniversitesi</option>
                <option value="Gülhane Askeri Tıp Akademisi">Gülhane Askeri Tıp Akademisi</option>
                <option value="Gümüşhane Üniversitesi">Gümüşhane Üniversitesi</option>
                <option value="Hacettepe Üniversitesi">Hacettepe Üniversitesi</option>
                <option value="Hakkari Üniversitesi">Hakkari Üniversitesi</option>
                <option value="Haliç Üniversitesi">Haliç Üniversitesi</option>
                <option value="Harran Üniversitesi">Harran Üniversitesi</option>
                <option value="Hasan Kalyoncu Üniversitesi">Hasan Kalyoncu Üniversitesi</option>
                <option value="Hava Harp Okulu">Hava Harp Okulu</option>
                <option value="Hitit Üniversitesi">Hitit Üniversitesi</option>
                <option value="Iğdır Üniversitesi">Iğdır Üniversitesi</option>
                <option value="Işık Üniversitesi">Işık Üniversitesi</option>
                <option value="Kadir Has Üniversitesi">Kadir Has Üniversitesi</option>
                <option value="Kafkas Üniversitesi">Kafkas Üniversitesi</option>
                <option value="Kahramanmaraş Sütçü İmam Üniversitesi">Kahramanmaraş Sütçü İmam Üniversitesi</option>
                <option value="Kara Harp Okulu">Kara Harp Okulu</option>
                <option value="Karabük Üniversitesi">Karabük Üniversitesi</option>
                <option value="Karadeniz Teknik Üniversitesi">Karadeniz Teknik Üniversitesi</option>
                <option value="Karamanoğlu Mehmetbey Üniversitesi">Karamanoğlu Mehmetbey Üniversitesi</option>
                <option value="Karatay Üniversitesi">Karatay Üniversitesi</option>
                <option value="Kastamonu Üniversitesi">Kastamonu Üniversitesi</option>
                <option value="Kilis 7 Aralık Üniversitesi">Kilis 7 Aralık Üniversitesi</option>
                <option value="Kocaeli Üniversitesi">Kocaeli Üniversitesi</option>
                <option value="Konya Gıda Tarım Üniversitesi">Konya Gıda Tarım Üniversitesi</option>
                <option value="Konya Teknik Üniversitesi">Konya Teknik Üniversitesi</option>
                <option value="Koç Üniversitesi">Koç Üniversitesi</option>
                <option value="Kırklareli Üniversitesi">Kırklareli Üniversitesi</option>
                <option value="Kırıkkale Üniversitesi">Kırıkkale Üniversitesi</option>
                <option value="MEF Üniversitesi">MEF Üniversitesi</option>
                <option value="Maltepe Üniversitesi">Maltepe Üniversitesi</option>
                <option value="Mardin Artuklu Üniversitesi">Mardin Artuklu Üniversitesi</option>
                <option value="Marmara Üniversitesi">Marmara Üniversitesi</option>
                <option value="Mehmet Akif Ersoy Üniversitesi">Mehmet Akif Ersoy Üniversitesi</option>
                <option value="Mersin Üniversitesi">Mersin Üniversitesi</option>
                <option value="Mimar Sinan Güzel Sanatlar Üniversitesi">Mimar Sinan Güzel Sanatlar Üniversitesi</option>
                <option value="Mustafa Kemal Üniversitesi">Mustafa Kemal Üniversitesi</option>
                <option value="Muğla Sıtkı Koçman Üniversitesi">Muğla Sıtkı Koçman Üniversitesi</option>
                <option value="Muş Alparslan Üniversitesi">Muş Alparslan Üniversitesi</option>
                <option value="Namık Kemal Üniversitesi">Namık Kemal Üniversitesi</option>
                <option value="Necmettin Erbakan Üniversitesi**">Necmettin Erbakan Üniversitesi**</option>
                <option value="Nevşehir Hacı Bektaş Veli Üniversitesi">Nevşehir Hacı Bektaş Veli Üniversitesi</option>
                <option value="Niğde Üniversitesi">Niğde Üniversitesi</option>
                <option value="Nişantaşı Üniversitesi">Nişantaşı Üniversitesi</option>
                <option value="Nuh Naci Yazgan Üniversitesi">Nuh Naci Yazgan Üniversitesi</option>
                <option value="İbn-u Haldun Üniversitesi">İbn-u Haldun Üniversitesi</option>
                <option value="İnönü Üniversitesi">İnönü Üniversitesi</option>
                <option value="İskenderun Teknik Üniversitesi">İskenderun Teknik Üniversitesi</option>
                <option value="İstanbul 29 Mayıs Üniversitesi">İstanbul 29 Mayıs Üniversitesi</option>
                <option value="İstanbul Arel Üniversitesi">İstanbul Arel Üniversitesi</option>
                <option value="İstanbul Aydın Üniversitesi">İstanbul Aydın Üniversitesi</option>
                <option value="İstanbul Bilgi Üniversitesi">İstanbul Bilgi Üniversitesi</option>
                <option value="İstanbul Bilim Üniversitesi">İstanbul Bilim Üniversitesi</option>
                <option value="İstanbul Esenyurt Üniversitesi">İstanbul Esenyurt Üniversitesi</option>
                <option value="İstanbul Gelişim Üniversitesi">İstanbul Gelişim Üniversitesi</option>
                <option value="İstanbul Kemerburgaz Üniversitesi">İstanbul Kemerburgaz Üniversitesi</option>
                <option value="İstanbul Kültür Üniversitesi">İstanbul Kültür Üniversitesi</option>
                <option value="İstanbul Medeniyet Üniversitesi">İstanbul Medeniyet Üniversitesi</option>
                <option value="İstanbul Medipol Üniversitesi">İstanbul Medipol Üniversitesi</option>
                <option value="İstanbul Rumeli Üniversitesi">İstanbul Rumeli Üniversitesi</option>
                <option value="İstanbul Sabahattin Zaim Üniversitesi">İstanbul Sabahattin Zaim Üniversitesi</option>
                <option value="İstanbul Teknik Üniversitesi">İstanbul Teknik Üniversitesi</option>
                <option value="İstanbul Ticaret Üniversitesi">İstanbul Ticaret Üniversitesi</option>
                <option value="İstanbul Üniversitesi">İstanbul Üniversitesi</option>
                <option value="İstanbul Şehir Üniversitesi">İstanbul Şehir Üniversitesi</option>
                <option value="İstinye Üniversitesi">İstinye Üniversitesi</option>
                <option value="İzmir Ekonomi Üniversitesi">İzmir Ekonomi Üniversitesi</option>
                <option value="İzmir Kâtip Çelebi Üniversitesi">İzmir Kâtip Çelebi Üniversitesi</option>
                <option value="İzmir Yüksek Teknoloji Enstitüsü">İzmir Yüksek Teknoloji Enstitüsü</option>
                <option value="Okan Üniversitesi">Okan Üniversitesi</option>
                <option value="Ondokuz Mayıs Üniversitesi">Ondokuz Mayıs Üniversitesi</option>
                <option value="Ordu Üniversitesi">Ordu Üniversitesi</option>
                <option value="Orta Doğu Teknik Üniversitesi">Orta Doğu Teknik Üniversitesi</option>
                <option value="Osmaniye Korkut Ata Üniversitesi">Osmaniye Korkut Ata Üniversitesi</option>
                <option value="Özyeğin Üniversitesi">Özyeğin Üniversitesi</option>
                <option value="Pamukkale Üniversitesi">Pamukkale Üniversitesi</option>
                <option value="Piri Reis Üniversitesi">Piri Reis Üniversitesi</option>
                <option value="Polis Akademisi">Polis Akademisi</option>
                <option value="Recep Tayyip Erdoğan Üniversitesi">Recep Tayyip Erdoğan Üniversitesi</option>
                <option value="Sabancı Üniversitesi">Sabancı Üniversitesi</option>
                <option value="Sakarya Üniversitesi">Sakarya Üniversitesi</option>
                <option value="Sanko Üniversitesi">Sanko Üniversitesi</option>
                <option value="Sağlık Bilimleri Üniversitesi">Sağlık Bilimleri Üniversitesi</option>
                <option value="Selçuk Üniversitesi">Selçuk Üniversitesi</option>
                <option value="Siirt Üniversitesi">Siirt Üniversitesi</option>
                <option value="Sinop Üniversitesi">Sinop Üniversitesi</option>
                <option value="Süleyman Demirel Üniversitesi">Süleyman Demirel Üniversitesi</option>
                <option value="Şırnak Üniversitesi">Şırnak Üniversitesi</option>
                <option value="TED Üniversitesi">TED Üniversitesi</option>
                <option value="TOBB Ekonomi ve Teknoloji Üniversitesi">TOBB Ekonomi ve Teknoloji Üniversitesi</option>
                <option value="Toros Üniversitesi">Toros Üniversitesi</option>
                <option value="Trakya Üniversitesi">Trakya Üniversitesi</option>
                <option value="Tunceli Üniversitesi">Tunceli Üniversitesi</option>
                <option value="Türk Alman Üniversitesi">Türk Alman Üniversitesi</option>
                <option value="Türk Hava Kurumu Üniversitesi">Türk Hava Kurumu Üniversitesi</option>
                <option value="Türkiye Uluslararası İslam, Bilim ve Teknoloji Üniversitesi">Türkiye Uluslararası İslam, Bilim ve Teknoloji Üniversitesi</option>
                <option value="Ufuk Üniversitesi">Ufuk Üniversitesi</option>
                <option value="Uludağ Üniversitesi">Uludağ Üniversitesi</option>
                <option value="Uluslararası Antalya Üniversitesi">Uluslararası Antalya Üniversitesi</option>
                <option value="Uşak Üniversitesi">Uşak Üniversitesi</option>
                <option value="Üsküdar Üniversitesi">Üsküdar Üniversitesi</option>
                <option value="Yalova Üniversitesi">Yalova Üniversitesi</option>
                <option value="Yaşar Üniversitesi">Yaşar Üniversitesi</option>
                <option value="Yeditepe Üniversitesi">Yeditepe Üniversitesi</option>
                <option value="Yeni Yüzyıl Üniversitesi">Yeni Yüzyıl Üniversitesi</option>
                <option value="Yüksek İhtisas Üniversitesi**">Yüksek İhtisas Üniversitesi**</option>
                <option value="Yüzüncü Yıl Üniversitesi">Yüzüncü Yıl Üniversitesi</option>
                <option value="Yıldırım Beyazıt Üniversitesi">Yıldırım Beyazıt Üniversitesi</option>
                <option value="Yıldız Teknik Üniversitesi">Yıldız Teknik Üniversitesi</option>
            </datalist>

Bootstrap Sık Kullanılan CSS Class ve Anlamları

Bootstrap Classları ve Anlamları:

justify-content-center içeriği ortalamak için
no-gutters : sütunlar arası boşluk olmaması için
mb-5 : margin-bottom:5px anlamına gelir alttan 5px boşluk bırakır.
mb-lg-0 : büyük ekranlarda margin bottom 0 yapar.
col-md-6 : 6 sütunluk alan oluşturmak
img-fluid : görseli responsive yapmak için mutlaka img etiketleri içinde kullanılmalıdır.
h-100 : içerik yükseklik olarak tamamını kapsaması için
my-auto : y ekseninde margin’i otomatik olarak ayarlasın. (ortalamak)
mx-auto : x ekseni üzerinde ortalamak
rounded-circle : görseli yuvarlak yapmak
text-muted : yazıyı biraz gri yapmak
social-buttons : sosyal medyaları tanımlarken
list-inline-item : li etiketine tanımlanır, elemanları yanyana dizer.

— Harici CSS Özellikleri:

border-radius:100% : kenarlık çizgisinizi yuvarlak yapmak

Javascript ile Scroll’a göre CSS Class vermek

Navbar yapımında en çok kullanacağımız yapılardan biri de scrolll aşağı kaydırıldığında gerçekleşecek olaylar zinciridir. Javascript ile CSS vermek, Javascript ile Class vermek,

örnek classımızın içeriği de padding

 $(window).scroll(function(){
 if($(document).scrollTop() > 50) { 
  	$('nav').addClass('shrink');
 	 } else {
  		$('nav').removeClass('shrink');
  		}
})

ornek css

nav.shrink {
	padding: 0;
	background-color:#f74c3c!important;
}

* bu örneğimizde scrollTop 50 den büyük olduğunda shrink classı uygulanmaya başlayacaktır.

Şık Tasarımlar için CSS ile Parallax Efekt Vermek

Ekrandaki resmi birazcık karartarak ve Scrool aşağı kayarken resmin harici alanlarını kullanıcıya yansıtarak şık bir görünüm elde edebilirsiniz. Buna basit parallax efekt diyenler de var soranlara duyurulur 🙂

HTML Kodları:

    <section id="statement" class="section-box">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h4 class="text-black lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolor illo soluta nulla, <br>doloremque necessitatibus dolorem, suscipit omnis et maxime. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </h4>
                </div>
            </div>
            </div>
    </section>

Örnek css Kod:
(Aşağıda Örnek linear-gradient kullanımı da bulunmaktadır bu olmadan da parallax yapabilirsiniz.)

#statement {
	background: linear-gradient( rgba(20, 20, 20, .8), rgba(20,20,20, .8)),
    url("../img/ornekbg.jpg");
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: center;
    background-size: cover;
}

Örnek Görünüm:

CSS Hover İşlemine Slow Efekti Vermek

Bootstrap ile yapılan yada diğer projelerde mutlaka bir linke yada dive hover uygularız. Hover işleminin tasarımda şık durması için slow efekti ile yani yavaşça gerçekleşmesi gerekir.
Bunun için hover tanımladığımız nesnenin direk kendisine css transition uygulamamız gerekir

Örnek CSS Transition kullanımı;

div:hover {
  width: 300px;
/*Yazılacak standar diğer kodlar*/
}
div {
 transition: all .5s ease-in-out;
}

Diğer transition efektleri:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Resimleri Responsive Yapmak (BOOTSRAP)

Webtasarım yapıyorsanız ve HTML CSS kodu yazıyorsanız Ekran çözünürlüğü değiştiğinde resimlerin ekrana göre tekrar boyutlanması sizin için önemli bir detaydır. Görsellerin otomatik boyutlanması için ekstradan css kodu yazmanıza gerek yok bootsrap kütüphanesini projenize dahil ettiyseniz kullanmanız gereken class img-fluid

örnek kod:

<img src="..." class="img-fluid" alt="Responsive image">