Mimitian kalayan Bootstrap

Bootstrap mangrupikeun toolkit frontend anu kuat sareng pinuh fitur. Ngawangun naon waé — tina prototipe ka produksi — dina sababaraha menit.

Dina kaca ieu

Mimitian gancang

Mimitian ku ngalebetkeun CSS sareng JavaScript anu siap produksi Bootstrap via CDN tanpa peryogi léngkah-léngkah ngawangun. Tempo éta dina prakna jeung demo Bootstrap CodePen ieu .

Jieun index.htmlfile anyar dina akar proyék Anjeun. Kalebet <meta name="viewport">tag ogé pikeun paripolah responsif anu leres dina alat sélulér.

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

Kaasup Bootstrap urang CSS jeung JS. Teundeun <link>tag dina <head>keur CSS kami, sarta <script>tag pikeun kebat JavaScript urang (kaasup Popper pikeun posisi dropdowns, poppers, sarta tooltips) saméméh nutup </body>. Diajar langkung seueur ngeunaan tautan 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>

Anjeun ogé tiasa ngalebetkeun Popper sareng JS kami nyalira. Upami anjeun henteu ngarencanakeun ngagunakeun dropdowns, popovers, atanapi tooltips, simpen sababaraha kilobytes ku henteu kalebet 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>

Halo Dunya! Buka halaman dina panyungsi pilihan anjeun pikeun ningali halaman Bootstrapped anjeun. Ayeuna anjeun tiasa ngamimitian ngawangun sareng Bootstrap ku cara nyiptakeun perenah anjeun nyalira , nambihan puluhan komponén , sareng nganggo conto resmi kami .

Tumbu CDN

Salaku rujukan, ieu mangrupikeun tautan CDN primér kami.

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

Anjeun ogé tiasa nganggo CDN pikeun nyandak salah sahiji wangunan tambahan kami anu didaptarkeun dina halaman Eusi .

Léngkah saterusna

Baca sakedik langkung seueur ngeunaan sababaraha setélan lingkungan global penting anu dianggo ku Bootstrap.
Baca ngeunaan naon anu kalebet dina Bootstrap dina bagian eusi kami sareng daptar komponén anu peryogi JavaScript di handap.
Butuh kakuatan saeutik deui? Pertimbangkeun ngawangun sareng Bootstrap ku ngalebetkeun file sumber ngalangkungan manajer pakét .
Pilari nganggo Bootstrap salaku modul sareng <script type="module">? Punten tingal kami nganggo Bootstrap salaku bagian modul .

komponén JS

Panasaran komponén mana anu sacara eksplisit ngabutuhkeun JavaScript sareng Popper kami? Klik tautan acara komponén di handap. Upami anjeun henteu yakin ngeunaan struktur halaman umum, teraskeun maca pikeun conto template halaman.

Témbongkeun komponén merlukeun JavaScript

Siaga pikeun ngabubarkeun
Tombol pikeun togling kaayaan sareng kotak centang / fungsionalitas radio
Carousel pikeun sakabéh paripolah slide, kadali, sarta indikator
Runtuhkeun pikeun toggling pisibilitas eusi
Dropdowns pikeun mintonkeun sarta positioning (ogé merlukeun Popper )
Modél pikeun mintonkeun, posisi, jeung kabiasaan ngagulung
Navbar pikeun ngalegaan plugins Collapse sareng Offcanvas kami pikeun ngalaksanakeun paripolah responsif
Navs kalawan plugin Tab pikeun toggling jandela eusi
Offcanvases pikeun mintonkeun, posisi, jeung kabiasaan ngagulung
Scrollspy pikeun kabiasaan ngagugulung sareng apdet navigasi
Toasts pikeun mintonkeun sarta dismissing
Tooltips sareng popovers pikeun mintonkeun sareng posisi (ogé peryogi Popper )

Globals penting

Bootstrap nganggo sakeupeul gaya sareng setelan global anu penting, sadayana ampir sacara éksklusif diarahkeun kana normalisasi gaya browser silang. Hayu urang teuleum ka jero.

HTML5 doctype

Bootstrap merlukeun pamakéan doctype HTML5. Tanpa éta, anjeun bakal ningali sababaraha gaya anu lucu sareng teu lengkep.

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

Meta tag responsif

Bootstrap dikembangkeun mobile munggaran , strategi nu urang ngaoptimalkeun kode pikeun alat nu bagerak munggaran lajeng skala up komponén sakumaha perlu ngagunakeun queries média CSS. Pikeun mastikeun rendering anu leres sareng zum touch pikeun sadaya alat, tambahkeun tag meta viewport responsif kana <head>.

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

Anjeun tiasa ningali conto ieu dina aksi dina mimiti gancang .

Ukuran kotak

Pikeun ukuran anu langkung lugas dina CSS, urang ngalihkeun box-sizingnilai global tina content-boxka border-box. Ieu ensures paddingteu mangaruhan lebar diitung ahir hiji unsur, tapi bisa ngabalukarkeun masalah sareng sababaraha software pihak-katilu kawas Google Maps sarta Google Adat Search Engine.

Dina kasempetan langka anjeun kudu override eta, make hal kawas kieu:

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

Jeung snippet luhur, nested elemen-kaasup dihasilkeun eusi via ::beforena ::after-sadaya bakal inherit nu dieusian box-sizingpikeun éta .selector-for-some-widget.

Diajar langkung seueur ngeunaan modél kotak sareng ukuran dina Trik CSS .

Reboot

Pikeun ningkatkeun rendering cross-browser, kami nganggo Reboot pikeun ngabenerkeun inconsistencies dina panyungsi sareng alat bari nyayogikeun reset anu langkung saé pikeun elemen HTML umum.

Komunitas

Tetep up-to-date dina ngembangkeun Bootstrap sarta ngahontal ka masarakat kalawan sumberdaya mantuan ieu.

Baca jeung ngalanggan The Resmi Bootstrap Blog .
Tanya sareng jelajah Diskusi GitHub kami .
Ngobrol jeung sasama Bootstrappers di IRC. Dina irc.libera.chatserver, dina #bootstrapsaluran.
Pitulung palaksanaan tiasa dipendakan di Stack Overflow (tagged bootstrap-5).
Pamekar kedah nganggo kecap konci bootstrapdina bungkusan anu ngarobih atanapi nambihan kana pungsionalitas Bootstrap nalika nyebarkeun ngaliwatan npm atanapi mékanisme pangiriman anu sami pikeun kamampuan maksimal.

Anjeun ogé tiasa ngiringan @getbootstrap dina Twitter pikeun gosip panganyarna sareng video musik anu saé.