Altın Konu Tailwind CSS ve Bootstrap: Hangisi Daha İyi Bir Çerçeve?

[Replicant]

ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!

​

Akışkan tasarım, duyarlı düzen ve etkileşimli stiller, birinci sınıf bir web sitesi oluşturmanın temel direkleridir. Anahtar, CSS'yi, web sitesinin daha sonraki geliştirme aşamalarında herhangi bir hasar olasılığını ortadan kaldıracak ve uygulama boyutu arttıkça çabayı önemli ölçüde en aza indirecek şekilde uygulamaktır.

İyi haber, şaşırtıcı derecede duyarlı UI, Bootstrap, Bulma, Foundation gibi popüler UI kitleri ve bazen medya sorguları oluşturmaktır. Ancak, özel bir kullanıcı arayüzü tasarımı uygulamak isterseniz ne olur? Tailwind CSS'nin artan popülaritesinin nedeni bu mu? Anlayalım.

Tailwind CSS Nedir?​

Tailwind CSS aslen Adam Wathan tarafından geliştirildi ve ilk olarak 1 Kasım 2017'de piyasaya sürüldü. CSS'yi uygulamak için ilk yardımcı program olan düşük seviyeli bir çerçevedir. Bu, çok fazla CSS yazmanıza gerek olmayacağı anlamına gelir. Bunun yerine, HTML öğeleriniz için çok sayıda sınıf yazacaksınız.

Tailwind CSS ile ilgili en iyi şey, son derece özelleştirilebilir olmasıdır. Özel tasarımlar ve mükemmel özel kullanıcı arayüzleri oluşturabilirsiniz. İlginç bir şekilde, olağanüstü kodlama çabası gerektirmeyecek. Kullanıcı arayüzünüzün talep ettiği şekilde her bir bileşenin stilinden ayrı ayrı kolayca yararlanabilirsiniz. Ek olarak, proje gereksinimlerine göre genişletilebilen benzersiz mikro etkileşimler oluşturabilirsiniz.

Tailwind CSS, öğelerin "görünümünü ve hissini" dönüştürmek için esneklik sunar. Çok fazla sınıf yazmanın hiç de uygun olmadığını düşünebilirsiniz. Bileşen çıkarmanın geldiği yer burasıdır. Bu sınıfları bir araya toplayabilir ve istediğiniz gibi adlandırabilirsiniz. Bootstrap benzeri bir çerçeve oluşturmaya benzer.

Bunlar, Tailwind CSS'nin çok fazla dikkat çekmesinin nedenlerinden bazıları. Bootstrap'a rakip olma olasılığı düşük olsa da, Tailwind CSS, zaman karşılığında esneklik sunar. Ancak, kod çakışmaları üzerinde durmadan özel bileşenler oluşturmak mantıklıdır.

Bootstrap CSS Çerçevesi Nedir?​

Bootstrap, 2010 yılının ortalarında Twitter iç tasarım araçlarının bir kolu olarak başlatıldı ve 19 Ağustos 2011'de açık kaynaklı bir çerçeve haline geldi. Nesne Yönelimli CSS'ye dayanmaktadır. Web sitesi şablonlarını hızlı bir şekilde tasarlamaya ve geliştirmeye yardımcı olan anlamsal/bileşen tabanlı bir çerçevedir.

Ek olarak, birden fazla cihaz ve tarayıcı arasında tutarlılığı öğrenmek ve sürdürmek çok kolaydır. Duyarlı 12 sütunlu ızgara sistemi, bileşenler ve düzenler sadece birkaç küçük değişiklik meselesidir. Hem değişken genişlikte hem de sabit mizanpajlarda sütunların kaydırılmasını ve iç içe yerleştirilmesini yapabilirsiniz. Belirli içeriği yalnızca belirli bir ekran boyutunda gizlemek veya görüntülemek için duyarlı yardımcı program sınıflarını kullanabilirsiniz.

Bootstrap'ta başlıklar, tablolar, düğmeler, listeler, formlar vb. gibi tüm temel HTML öğeleri, hızlı bir şekilde uygulanabilen temel stille önceden şekillendirilmiştir. Bootstrap, açılır menüler, gezinme çubuğu, sayfalandırma, kırıntılar vb. gibi hemen hemen her şeyi kapsar. CSS biliyorsanız , bunları özelleştirmek ve iyi bir web sitesi şablonu oluşturmak çok kolay olacaktır.

Önyükleme paketinde paketlenmiş çok sayıda JavaScript eklentisini kullanarak kullanıcı etkileşimli öğeleri kolayca oluşturabilirsiniz. Ancak, uygun belgeler ve geniş bir toplulukla Bootstrap, başlamak için hala daha iyi bir seçenek olarak kabul edilir.

Tailwind CSS ve Bootstrap: Geçiş Yapmanın Doğru Zamanı mı?​

Tailwind CSS ve Bootstrap arasındaki önemli fark, Tailwind'in hızlı UI geliştirme ile sıfırdan bir site oluşturmak için önceden tasarlanmış widget'lar sunması , Bootstrap'ın ise belirli bir UI kitine sahip önceden tasarlanmış duyarlı, mobil öncelikli bileşenlerle birlikte gelmesidir.

Bootstrap ile ilgili ana sorun, geliştiricilerin yalnızca belirli soyutlanmış kalıplara güvenmeleri gerektiğidir. İlk etapta bir çerçeve kullanma amacını tamamen ortadan kaldıran özel CSS ile çerçeveyi geçersiz kılmaya zorlar.

Bootstrap kullanılarak oluşturulan siteler, benzer görünmelerini sağlayan genel düzeni takip eder. Kuşkusuz, yaratıcılığı etkili bir şekilde birleştirme yeteneğini engeller. Ayrıca Bootstrap, ana dosya, Bootstrap JS, Popper.js ve jQuery dahil olmak üzere 308,25 kb dosya boyutu gerektirir.

Öte yandan, Tailwind CSS, daha fazla esnekliğe sahip temiz bir kullanıcı arayüzü oluşturmak için bir dizi yardımcı program sınıfı kullanır. Önceden tasarlanmış widget'lar, bir öğenin diğer ilgili öğeyi etkilemesi konusunda endişelenmeden tasarımın uygulanmasına yardımcı olur.

Örneğin, sınıfları kullanarak odak durumlarını, üzerine gelmeyi ve aktifi ayarlayabilirsiniz. Ayrıca PurgeCSS kullanarak kullanılmayan sınıfları kaldırarak dosya boyutunu önemli ölçüde azaltabilirsiniz. Bu nedenle hafif bir proje için Tailwind iyi bir seçim olabilir, çünkü yalnızca 27 kb boyutuna kadar temel stil sayfası dosyası gerektirir.

İki örnek alalım. Öncelikle Bootstrap ve Tailwind CSS kullanarak bir arama çubuğu oluşturun.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind Vs Bootstrap</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous"referrerpolicy="no-referrer" />
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"crossorigin="anonymous">
<!-- <link rel="stylesheet" href="styles.css" /> -->
</head>
<body >
<h3 class="text-center mt-5">Tailwind Search Bar</h3>
<div class="mt-3 w-1/4 mr-auto ml-auto ">
<div class="px-2 flex items-center border-1 bg-white shadow-sm rounded-full">
<input class="rounded-l-sm w-full py-2 px-6 text-gray-700 leading-tight focus:outline-none" id="search"
type="text"placeholder="Search">
<div class="p-2">
<button
class="bg-blue-500 text-white rounded-full p-2 hover:bg-blue-400 focus:outline-none w-12 h-12 flex items-center justify-center">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</div>
<h3 class=" text-center mt-5">Bootstrap Search Bar</h3>
<div class="input-group mb-3 mt-3 w-25 mx-auto">
<input type="text" class="form-control" placeholder="Search" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append ">
<span class="input-group-text p-3" id="basic-addon2"><i class="fas fa-search text-primary"></i></span>
</div>
</div>
</div>
</body>
</html>

Çıktı:

​

Şimdi, Tailwind ve Bootstrap kullanarak temel bir form şablonu oluşturun.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous"referrerpolicy="no-referrer" />
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"crossorigin="anonymous">
<!-- <link rel="stylesheet" href="styles.css" /> -->
</head>
<body class="">
<h2 class=" text-center mt-5 mb-4">Bootstrap Form</h2>
<form class="w-25 text-white mx-auto border px-4 py-4 rounded">
<div class="form-group pb-3">
<small id="emailHelp" class="form-text text-muted">Username</small>
<input type="email" class="form-control" id="username" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group pb-3">
<small id="password" class="form-text text-muted">Password</small>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<h2 class=" text-center mt-5 mb-4">Tailwind Form</h2>
<form class="bg-white border-1 shadow-xl rounded px-8 pt-6 pb-8 mb-4 w-1/4 mx-auto">
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="username">
Username
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
</div>
<div class="mb-6">
<label class="block text-gray-700 text-sm font-bold mb-2" for="password">
Password
</label>
<input class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************">
<p class="text-red-500 text-xs italic">Please choose a password.</p>
</div>
<div class="flex items-center justify-between">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
Sign In
</button>
<a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
Forgot Password?
</a>
</div>
</form>
<p class="text-center text-gray-500 text-xs">
&copy;2021 MUO All rights reserved.
</p>
</div>
</body>
</html>

Çıktı:

​

Farkları görebiliyor musunuz?

CSS ve Önyükleme: Seçim Sizin​

Bir arka uç geliştiricisiyseniz veya geliştirmede yeniyseniz, Bootstrap ile gitmek daha iyi bir seçimdir. Bootstrap'i başlatmak kolaydır ve güveninizi artıracak hızlı sonuçlar alırsınız. Öte yandan, zaten bir ön uç geliştiriciyseniz veya daha önce Bootstrap kullandıysanız, Tailwind CSS'yi en az bir kez denemek ve bunun sizin için işe yarayıp yaramadığını görmek harika olurdu.

İhtiyaçlarınız ve tercihleriniz diğerlerinden farklı olacağından Bootstrap veya Tailwind'in en iyisi olup olmadığına karar vermek özneldir.

 

[EsatOfficial]

Paylaşım için Teşekkürler Kirvem

 

[Replicant]

Paylaşım için Teşekkürler Kirvem

Rica ederim