Mulakan dengan Bootstrap

Bootstrap ialah kit alat hadapan yang penuh dengan ciri yang berkuasa. Bina apa sahaja—daripada prototaip hingga pengeluaran—dalam beberapa minit.

Pada halaman ini

Permulaan pantas

Bermula dengan menyertakan CSS dan JavaScript sedia pengeluaran Bootstrap melalui CDN tanpa memerlukan sebarang langkah binaan. Lihat dalam amalan dengan demo Bootstrap CodePen ini .

Buat index.htmlfail baharu dalam akar projek anda. Sertakan <meta name="viewport">teg juga untuk tingkah laku responsif yang betul dalam peranti mudah alih.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Sertakan CSS dan JS Bootstrap. Letakkan <link>teg dalam <head>untuk CSS kami dan <script>teg untuk berkas JavaScript kami (termasuk Popper untuk meletakkan lungsur turun, poppers dan petua alat) sebelum penutupan </body>. Ketahui lebih lanjut tentang pautan CDN kami .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <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">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Anda juga boleh memasukkan Popper dan JS kami secara berasingan. Jika anda tidak bercadang untuk menggunakan lungsur turun, popover atau petua alat, simpan beberapa kilobait dengan tidak memasukkan Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Hai dunia! Buka halaman dalam pelayar pilihan anda untuk melihat halaman Bootstrapped anda. Kini anda boleh mula membina dengan Bootstrap dengan mencipta susun atur anda sendiri , menambah berpuluh-puluh komponen , dan menggunakan contoh rasmi kami .

pautan CDN

Sebagai rujukan, berikut ialah pautan CDN utama kami.

Penerangan	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Anda juga boleh menggunakan CDN untuk mengambil mana-mana binaan tambahan kami yang disenaraikan dalam halaman Kandungan .

Langkah seterusnya

Baca lebih lanjut tentang beberapa tetapan persekitaran global penting yang Bootstrap gunakan.
Baca tentang perkara yang disertakan dalam Bootstrap dalam bahagian kandungan kami dan senarai komponen yang memerlukan JavaScript di bawah.
Perlukan sedikit lagi kuasa? Pertimbangkan untuk membina dengan Bootstrap dengan memasukkan fail sumber melalui pengurus pakej .
Ingin menggunakan Bootstrap sebagai modul dengan <script type="module">? Sila rujuk kami menggunakan Bootstrap sebagai bahagian modul .

komponen JS

Ingin tahu komponen mana yang secara eksplisit memerlukan JavaScript dan Popper kami? Klik pautan tunjukkan komponen di bawah. Jika anda sama sekali tidak pasti tentang struktur halaman umum, teruskan membaca untuk contoh templat halaman.

Tunjukkan komponen yang memerlukan JavaScript

Makluman untuk menolak
Butang untuk menogol keadaan dan kotak semak/fungsi radio
Karusel untuk semua gelagat, kawalan dan penunjuk slaid
Runtuhkan untuk menogol keterlihatan kandungan
Jatuh turun untuk memaparkan dan meletakkan kedudukan (juga memerlukan Popper )
Modal untuk memaparkan, meletakkan kedudukan dan tingkah laku tatal
Navbar untuk melanjutkan pemalam Collapse dan Offcanvas kami untuk melaksanakan gelagat responsif
Navs dengan pemalam Tab untuk menogol anak tetingkap kandungan
Offkanvas untuk memaparkan, meletakkan dan kelakuan tatal
Scrollspy untuk tingkah laku tatal dan kemas kini navigasi
Roti bakar untuk dipamerkan dan diketepikan
Petua alat dan popover untuk memaparkan dan meletakkan kedudukan (juga memerlukan Popper )

Global yang penting

Bootstrap menggunakan segelintir gaya dan tetapan global yang penting, yang kesemuanya hampir secara eksklusif ditujukan kepada penormalan gaya penyemak imbas silang. Jom selami.

doctype HTML5

Bootstrap memerlukan penggunaan doctype HTML5. Tanpanya, anda akan melihat beberapa penggayaan yang funky dan tidak lengkap.

<!doctype html>
<html lang="en">
  ...
</html>

Tag meta responsif

Bootstrap dibangunkan mudah alih dahulu , strategi di mana kami mengoptimumkan kod untuk peranti mudah alih dahulu dan kemudian meningkatkan komponen seperti yang diperlukan menggunakan pertanyaan media CSS. Untuk memastikan pemaparan yang betul dan zum sentuh untuk semua peranti, tambahkan teg meta port pandangan responsif pada <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Anda boleh melihat contoh tindakan ini dalam permulaan pantas .

Bersaiz kotak

Untuk saiz yang lebih mudah dalam CSS, kami menukar nilai global box-sizingdaripada content-boxkepada border-box. Ini memastikan paddingtidak menjejaskan lebar pengiraan akhir elemen, tetapi ia boleh menyebabkan masalah dengan beberapa perisian pihak ketiga seperti Peta Google dan Enjin Carian Tersuai Google.

Pada kesempatan yang jarang berlaku anda perlu mengatasinya, gunakan sesuatu seperti berikut:

.selector-for-some-widget {
  box-sizing: content-box;
}

Dengan coretan di atas, elemen bersarang—termasuk kandungan yang dijana melalui ::beforedan ::after—semua akan mewarisi yang ditentukan box-sizinguntuk itu .selector-for-some-widget.

Ketahui lebih lanjut tentang model kotak dan saiz di CSS Tricks .

But semula

Untuk pemaparan silang penyemak imbas yang dipertingkatkan, kami menggunakan But semula untuk membetulkan ketidakkonsistenan merentas penyemak imbas dan peranti sambil menyediakan tetapan semula yang lebih berpandangan kepada elemen HTML biasa.

Komuniti

Ikuti perkembangan terkini tentang pembangunan Bootstrap dan hubungi komuniti dengan sumber yang berguna ini.

Baca dan langgan Blog Rasmi Bootstrap .
Tanya dan terokai Perbincangan GitHub kami .
Berbual dengan rakan Bootstrapper di IRC. Pada irc.libera.chatpelayan, dalam #bootstrapsaluran.
Bantuan pelaksanaan boleh didapati di Stack Overflow (ditandakan bootstrap-5).
Pembangun harus menggunakan kata kunci bootstrappada pakej yang mengubah suai atau menambah kefungsian Bootstrap apabila mengedarkan melalui npm atau mekanisme penghantaran yang serupa untuk kebolehtemuan maksimum.

Anda juga boleh mengikuti @getbootstrap di Twitter untuk gosip terkini dan video muzik yang hebat.