Langkau ke kandungan utama
Check
Baharu dalam v5.2 Pembolehubah CSS, offcanvas responsif, utiliti baharu dan banyak lagi! Bootstrap

Bina tapak yang pantas dan responsif dengan Bootstrap

Kit alat bahagian hadapan yang berkuasa, boleh dipanjangkan dan penuh ciri. Bina dan sesuaikan dengan Sass, gunakan sistem dan komponen grid prabina serta menghidupkan projek dengan pemalam JavaScript yang berkuasa.

npm i [email protected]
Baca dokumen

Pada masa ini v5.2.1 · Muat turun · v4.6.x dokumen · Semua keluaran

Mulakan apa-apa cara yang anda mahukan

Lompat terus ke dalam membina dengan Bootstrap—gunakan CDN, pasangkannya melalui pengurus pakej atau muat turun kod sumber.

Baca dokumen pemasangan

Pasang melalui pengurus pakej

Pasang fail Sass dan JavaScript sumber Bootstrap melalui npm, RubyGems, Composer atau Meteor. Pemasangan terurus pakej tidak termasuk dokumentasi atau skrip binaan penuh kami. Anda juga boleh menggunakan repo templat npm kami untuk menjana projek Bootstrap dengan cepat melalui npm.

npm install [email protected]
gem install bootstrap -v 5.2.1

Baca dokumen pemasangan kami untuk mendapatkan maklumat lanjut dan pengurus pakej tambahan.

Sertakan melalui CDN

Apabila anda hanya perlu memasukkan CSS atau JS yang dikompilasi Bootstrap, anda boleh menggunakan jsDelivr . Lihat ia beraksi dengan permulaan ringkas kami yang ringkas atau semak imbas contoh untuk memulakan projek anda yang seterusnya. Anda juga boleh memilih untuk memasukkan Popper dan JS kami secara berasingan .

<!-- 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>

Baca panduan permulaan kami

Dapatkan lompatan untuk memasukkan fail sumber Bootstrap dalam projek baharu dengan panduan rasmi kami.

Webpack Parcel Vite

Sesuaikan semuanya dengan Sass

Bootstrap menggunakan Sass untuk seni bina modular dan boleh disesuaikan. Import hanya komponen yang anda perlukan, dayakan pilihan global seperti kecerunan dan bayang-bayang, dan tulis CSS anda sendiri dengan pembolehubah, peta, fungsi dan campuran kami.

Ketahui lebih lanjut tentang menyesuaikan

Sertakan semua Sass Bootstrap

Import satu helaian gaya dan anda akan berlumba dengan setiap ciri CSS kami.

// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

Ketahui lebih lanjut tentang pilihan Sass global kami .

Sertakan apa yang anda perlukan

Cara paling mudah untuk menyesuaikan Bootstrap—serta hanya CSS yang anda perlukan.

// 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";

Ketahui lebih lanjut tentang menggunakan Bootstrap dengan Sass .

Bina dan lanjutkan dalam masa nyata dengan pembolehubah CSS

Bootstrap 5 berkembang dengan setiap keluaran untuk menggunakan pembolehubah CSS dengan lebih baik untuk gaya tema global, komponen individu dan juga utiliti. Kami menyediakan berpuluh-puluh pembolehubah untuk warna, gaya fon dan banyak lagi pada :roottahap untuk digunakan di mana-mana sahaja. Pada komponen dan utiliti, pembolehubah CSS diskop kepada kelas yang berkaitan dan boleh diubah suai dengan mudah.

Ketahui lebih lanjut tentang pembolehubah CSS

Menggunakan pembolehubah CSS

Gunakan mana-mana pembolehubah global:root kami untuk menulis gaya baharu. Pembolehubah CSS menggunakan var(--bs-variableName)sintaks dan boleh diwarisi oleh elemen kanak-kanak.

.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);
}

Menyesuaikan melalui pembolehubah CSS

Gantikan pembolehubah kelas global, komponen atau utiliti untuk menyesuaikan Bootstrap mengikut cara yang anda suka. Tidak perlu mengisytiharkan semula setiap peraturan, hanya nilai pembolehubah baharu.

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;
}

Komponen, memenuhi API Utiliti

Baru dalam Bootstrap 5, utiliti kami kini dijana oleh API Utiliti kami . Kami membinanya sebagai peta Sass yang penuh ciri yang boleh disesuaikan dengan cepat dan mudah. Ia tidak pernah menjadi lebih mudah untuk menambah, mengalih keluar atau mengubah suai mana-mana kelas utiliti. Jadikan utiliti responsif, tambahkan varian kelas pseudo dan berikan mereka nama tersuai.

Ketahui lebih lanjut tentang utiliti Terokai komponen tersuai

Sesuaikan komponen dengan cepat
// 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,
    )
  )
);

Pemalam JavaScript yang berkuasa tanpa jQuery

Tambahkan elemen tersembunyi, mod dan offcanvas, popover dan petua alat boleh togol dengan mudah, dan banyak lagi—semuanya tanpa jQuery. JavaScript dalam Bootstrap adalah HTML-first, yang bermaksud menambah pemalam adalah semudah menambah dataatribut. Perlukan lebih kawalan? Sertakan pemalam individu secara pengaturcaraan.

Ketahui lebih lanjut tentang JavaScript Bootstrap

API atribut data

Mengapa menulis lebih banyak JavaScript apabila anda boleh menulis HTML? Hampir semua pemalam JavaScript Bootstrap menampilkan API data kelas pertama, membolehkan anda menggunakan JavaScript hanya dengan menambahkan dataatribut.

<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>

Ketahui lebih lanjut tentang JavaScript kami sebagai modul dan menggunakan API terprogram .

Set pemalam yang komprehensif

Bootstrap mempunyai sedozen pemalam yang boleh anda masukkan ke dalam mana-mana projek. Letakkan semuanya sekali gus, atau pilih yang anda perlukan sahaja.

Amaran

Tunjukkan dan sembunyikan mesej amaran kepada pengguna anda.

Butang

Kawal secara atur cara keadaan aktif untuk butang.

karusel

Tambahkan tayangan slaid ke mana-mana halaman, termasuk sokongan untuk silang pudar.

Runtuh

Kembangkan dan runtuhkan kawasan kandungan, atau buat akordion.

Jatuh turun

Buat menu pautan, tindakan, borang dan banyak lagi.

Modal

Tambahkan dialog yang fleksibel dan responsif pada projek anda.

Luar Kanvas

Bina dan togol bar sisi tersembunyi ke dalam mana-mana halaman.

Popover

Buat tindanan tersuai. Dibina pada Popper.

Scrollspy

Kemas kini pautan navigasi aktif secara automatik berdasarkan tatal halaman.

Tab

Benarkan komponen nav Bootstrap untuk menogol kandungan.

Roti bakar

Tunjukkan dan sembunyikan pemberitahuan kepada pelawat anda.

Petua alat

Gantikan petua alat penyemak imbas dengan yang tersuai. Dibina pada Popper.

Peribadikannya dengan Ikon Bootstrap

Ikon Bootstrap ialah perpustakaan ikon SVG sumber terbuka yang menampilkan lebih 1,500 mesin terbang, dengan lebih banyak lagi ditambahkan setiap keluaran. Mereka direka untuk berfungsi dalam mana-mana projek, sama ada anda menggunakan Bootstrap sendiri atau tidak. Gunakannya sebagai SVG atau fon ikon—kedua-dua pilihan memberi anda penskalaan vektor dan penyesuaian mudah melalui CSS.

Dapatkan Ikon Bootstrap

Ikon Bootstrap

Jadikan ia milik anda dengan Tema Bootstrap rasmi

Bawa Bootstrap ke peringkat seterusnya dengan tema premium daripada pasaran Tema Bootstrap rasmi . Tema dibina di atas Bootstrap sebagai rangka kerja lanjutan mereka sendiri, kaya dengan komponen dan pemalam baharu, dokumentasi dan alat binaan yang berkuasa.

Semak imbas Tema Bootstrap

Tema Bootstrap