pengenalan

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

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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Banyak komponen kami memerlukan penggunaan JavaScript untuk berfungsi. Khususnya, mereka memerlukan jQuery , Popper dan pemalam JavaScript kami sendiri. Kami menggunakan jQuery's slim build , tetapi versi penuh juga disokong.

Letakkan salah satu daripada s berikut<script> berhampiran penghujung halaman anda, betul-betul sebelum teg penutup </body>, untuk membolehkannya. jQuery mesti didahulukan, kemudian Popper, dan kemudian pemalam JavaScript kami.

himpunan

Sertakan setiap pemalam JavaScript Bootstrap dengan salah satu daripada dua berkas kami. Kedua -duanya bootstrap.bundle.jsdan bootstrap.bundle.min.jssertakan Popper untuk petua alat dan popover kami, tetapi bukan jQuery . Sertakan jQuery dahulu, kemudian berkas JavaScript Bootstrap. 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/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Komponen

Ingin tahu komponen mana yang secara eksplisit memerlukan jQuery, JavaScript kami dan Popper? Klik pautan tunjukkan komponen di bawah. Jika anda tidak pasti tentang struktur halaman, 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
Scrollspy untuk tingkah laku tatal dan kemas kini navigasi
Petua alat dan popover untuk memaparkan dan meletakkan kedudukan (juga memerlukan Popper )

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, shrink-to-fit=no">

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Itu sahaja yang anda perlukan untuk keperluan halaman keseluruhan. 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, shrink-to-fit=no">

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-4).
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.

CSP dan SVG terbenam

Beberapa komponen Bootstrap menyertakan SVG terbenam dalam CSS kami untuk menggayakan komponen secara konsisten dan mudah merentas pelayar dan peranti. Untuk organisasi yang mempunyai konfigurasi CSP yang lebih ketat , kami telah mendokumenkan semua kejadian SVG terbenam kami (semuanya digunakan melalui background-image) supaya anda boleh menyemak pilihan anda dengan lebih teliti.

Butang tutup (digunakan dalam makluman dan modal)
Kotak semak tersuai dan butang radio
Suis borang
Ikon pengesahan borang
Menu pilihan tersuai
Kawalan karusel
Butang togol Navbar

Berdasarkan perbualan komuniti , beberapa pilihan untuk menangani perkara ini dalam pangkalan kod anda sendiri termasuk menggantikan URL dengan aset yang dihoskan secara setempat, mengalih keluar imej dan menggunakan imej sebaris (tidak mungkin dalam semua komponen) dan mengubah suai CSP anda. Syor kami adalah untuk menyemak dengan teliti dasar keselamatan anda sendiri dan memutuskan jalan terbaik ke hadapan, jika perlu.