pengenalan

Mulakan dengan Bootstrap, rangka kerja paling popular di dunia untuk membina tapak yang responsif, diutamakan mudah alih, dengan jsDelivr dan halaman permulaan templat.

Pada halaman ini

Permulaan pantas

Ingin menambah Bootstrap dengan cepat pada projek anda? Gunakan jsDelivr, CDN sumber terbuka percuma. Menggunakan pengurus pakej atau perlu memuat turun fail sumber? Pergi ke halaman muat turun .

CSS

Salin-tampal helaian gaya <link>ke dalam anda <head>sebelum semua helaian gaya lain untuk memuatkan CSS kami.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS

Banyak komponen kami memerlukan penggunaan JavaScript untuk berfungsi. Khususnya, mereka memerlukan pemalam JavaScript dan Popper kami sendiri . Letakkan salah satu daripada s berikut<script> berhampiran penghujung halaman anda, betul-betul sebelum teg penutup </body>, untuk membolehkannya.

himpunan

Sertakan setiap pemalam JavaScript Bootstrap dan pergantungan dengan salah satu daripada dua himpunan kami. Kedua -duanya bootstrap.bundle.jsdan bootstrap.bundle.min.jssertakan Popper untuk petua alat dan popover kami. Untuk mendapatkan maklumat lanjut tentang perkara yang disertakan dalam Bootstrap, sila lihat bahagian kandungan kami .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Berpisah

Jika anda memutuskan untuk menggunakan penyelesaian skrip yang berasingan, Popper mesti didahulukan (jika anda menggunakan petua alat atau popover), dan kemudian pemalam JavaScript kami.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Modul

Jika anda menggunakan <script type="module">, sila rujuk kami menggunakan Bootstrap sebagai bahagian modul .

Komponen

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 Runtuhkan kami untuk melaksanakan tingkah laku responsif
Offkanvas untuk memaparkan, meletakkan dan kelakuan tatal
Roti bakar untuk dipamerkan dan diketepikan
Petua alat dan popover untuk memaparkan dan meletakkan kedudukan (juga memerlukan Popper )
Scrollspy untuk tingkah laku tatal dan kemas kini navigasi

Templat permulaan

Pastikan halaman anda disediakan dengan reka bentuk dan piawaian pembangunan terkini. Ini bermakna menggunakan doctype HTML5 dan menyertakan teg meta viewport untuk tingkah laku responsif yang betul. Letakkan semuanya bersama-sama dan halaman anda sepatutnya kelihatan seperti ini:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Untuk langkah seterusnya, lawati dokumen Reka Letak atau contoh rasmi kami untuk mula menyusun kandungan dan komponen tapak anda.

Global yang penting

Bootstrap menggunakan segelintir gaya dan tetapan global penting yang perlu anda ketahui semasa menggunakannya, yang kesemuanya hampir secara eksklusif menjurus ke arah normalisasi gaya penyemak imbas silang. Jom selami.

doctype HTML5

Bootstrap memerlukan penggunaan doctype HTML5. Tanpa itu, anda akan melihat beberapa penggayaan tidak lengkap yang funky, tetapi memasukkannya tidak sepatutnya menyebabkan sebarang gangguan yang ketara.

<!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 ini dalam tindakan dalam templat pemula .

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 Bootstrap dan hubungi komuniti dengan sumber yang berguna ini.

Baca dan langgan Blog Rasmi Bootstrap .
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.