Güçlü, genişletilebilir ve özelliklerle dolu ön uç araç takımı. Sass ile oluşturun ve özelleştirin, önceden oluşturulmuş ızgara sistemi ve bileşenlerini kullanın ve güçlü JavaScript eklentileriyle projeleri hayata geçirin.
Şu anda v5.2.1 · İndirme · v4.6.x belgeleri · Tüm sürümler
Bootstrap ile doğrudan binaya atlayın; CDN'yi kullanın, paket yöneticisi aracılığıyla kurun veya kaynak kodunu indirin.
Bootstrap'in kaynak Sass ve JavaScript dosyalarını npm, RubyGems, Composer veya Meteor aracılığıyla yükleyin. Paket tarafından yönetilen yüklemeler, belgeleri veya tam derleme komut dosyalarımızı içermez. Ayrıca , npm aracılığıyla hızlı bir şekilde bir Bootstrap projesi oluşturmak için npm şablon depomuzu kullanabilirsiniz.
npm install [email protected]gem install bootstrap -v 5.2.1Daha fazla bilgi ve ek paket yöneticileri için kurulum belgelerimizi okuyun .
Yalnızca Bootstrap'in derlenmiş CSS veya JS'sini eklemeniz gerektiğinde jsDelivr kullanabilirsiniz . Basit hızlı başlangıcımızla eylem halinde görün veya bir sonraki projenize hızlı bir başlangıç yapmak için örneklere göz atın . Popper ve JS'mizi ayrı ayrı dahil etmeyi de seçebilirsiniz .
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
Resmi kılavuzlarımızla Bootstrap'in kaynak dosyalarını yeni bir projeye dahil etmeye başlayın.
Bootstrap, modüler ve özelleştirilebilir bir mimari için Sass'ı kullanır. Yalnızca ihtiyacınız olan bileşenleri içe aktarın, degradeler ve gölgeler gibi genel seçenekleri etkinleştirin ve değişkenlerimiz, haritalarımız, işlevlerimiz ve karışımlarımızla kendi CSS'nizi yazın.
Bir stil sayfasını içe aktarın ve CSS'mizin her özelliğiyle yarışa başlayın.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Küresel Sass seçeneklerimiz hakkında daha fazla bilgi edinin .
Bootstrap'i özelleştirmenin en kolay yolu—yalnızca ihtiyacınız olan CSS'yi ekleyin.
// Functions first
@import "../node_modules/bootstrap/scss/functions";
// Variable overrides second
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Required Bootstrap imports
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// Optional components
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";
Sass ile Bootstrap kullanma hakkında daha fazla bilgi edinin .
Bootstrap 5, global tema stilleri, bağımsız bileşenler ve hatta yardımcı programlar için CSS değişkenlerini daha iyi kullanmak için her sürümde gelişiyor. :rootHer yerde kullanım için bir düzeyde renkler, yazı tipi stilleri ve daha fazlası için düzinelerce değişken sağlıyoruz . Bileşenler ve yardımcı programlarda, CSS değişkenleri ilgili sınıfa dahil edilir ve kolayca değiştirilebilir.
Yeni stiller yazmak için global :rootdeğişkenlerimizden herhangi birini kullanın . CSS değişkenleri var(--bs-variableName)sözdizimini kullanır ve alt öğeler tarafından devralınabilir.
.component {
color: var(--bs-gray-800);
background-color: var(--bs-gray-100);
border: 1px solid var(--bs-gray-200);
border-radius: .25rem;
}
.component-header {
color: var(--bs-purple);
}Bootstrap'i istediğiniz gibi özelleştirmek için genel, bileşen veya yardımcı program sınıfı değişkenlerini geçersiz kılın. Her kuralı yeniden bildirmeye gerek yok, sadece yeni bir değişken değeri.
body {
--bs-body-font-family: var(--bs-font-monospace);
--bs-body-line-height: 1.4;
--bs-body-bg: var(--bs-gray-100);
}
.table {
--bs-table-color: var(--bs-gray-600);
--bs-table-bg: var(--bs-gray-100);
--bs-table-border-color: transparent;
}Bootstrap 5'te yeni olan yardımcı programlarımız artık Yardımcı Program API'miz tarafından oluşturuluyor . Hızlı ve kolay bir şekilde özelleştirilebilen, özelliklerle dolu bir Sass haritası olarak oluşturduk. Herhangi bir yardımcı program sınıfı eklemek, kaldırmak veya değiştirmek hiç bu kadar kolay olmamıştı. Yardımcı programları duyarlı hale getirin, sözde sınıf varyantları ekleyin ve bunlara özel adlar verin.
Yardımcı programlar hakkında daha fazla bilgi edinin Özelleştirilmiş bileşenleri keşfedin
// Create and extend utilities with the Utility API
@import "bootstrap/scss/bootstrap";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab,
)
)
);
Değiştirilebilir gizli öğeler, modlar ve tuval dışı menüler, açılır öğeler ve araç ipuçları ve çok daha fazlasını jQuery olmadan kolayca ekleyin. dataBootstrap'ta JavaScript, HTML önceliklidir, yani eklenti eklemek, nitelik eklemek kadar kolaydır . Daha fazla kontrole mi ihtiyacınız var? Tek tek eklentileri programlı olarak dahil edin.
HTML yazabiliyorken neden daha fazla JavaScript yazasınız? dataHemen hemen tüm Bootstrap JavaScript eklentileri, JavaScript'i yalnızca nitelikler ekleyerek kullanmanıza izin veren birinci sınıf bir veri API'sine sahiptir .
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
</ul>
</div>
Modüller olarak JavaScript'imiz ve programatik API'yi kullanma hakkında daha fazla bilgi edinin .
Bootstrap, herhangi bir projeye bırakabileceğiniz bir düzine eklentiye sahiptir. Hepsini bir kerede bırakın veya sadece ihtiyacınız olanları seçin.
Bootstrap Icons , her sürümde daha fazla eklenen 1.500'den fazla glif içeren açık kaynaklı bir SVG simge kitaplığıdır. Bootstrap kullansanız da kullanmasanız da herhangi bir projede çalışmak üzere tasarlanmıştır. Bunları SVG'ler veya simge yazı tipleri olarak kullanın; her iki seçenek de size vektör ölçekleme ve CSS aracılığıyla kolay özelleştirme sağlar.
Resmi Bootstrap Temaları pazarından premium temalarla Bootstrap'i bir sonraki seviyeye taşıyın . Temalar, yeni bileşenler ve eklentiler, belgeler ve güçlü oluşturma araçlarıyla zengin, kendi genişletilmiş çerçeveleri olarak Bootstrap üzerine kuruludur.
