Miwiti Bootstrap

Bootstrap minangka toolkit frontend sing kuat lan dilengkapi fitur. Mbangun apa wae-saka prototipe nganti produksi-ing menit.

Ing kaca iki

Miwiti cepet

Miwiti kanthi kalebu CSS lan JavaScript sing siap produksi Bootstrap liwat CDN tanpa mbutuhake langkah-langkah mbangun. Deleng ing laku karo demo Bootstrap CodePen iki .

Gawe index.htmlfile anyar ing ROOT proyek sampeyan. Kalebu <meta name="viewport">tag uga kanggo prilaku responsif sing tepat ing piranti seluler.

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

Kalebu CSS lan JS Bootstrap. Selehake <link>tag ing <head>CSS kita, lan <script>tag kanggo paket JavaScript kita (kalebu Popper kanggo posisi dropdowns, poppers, lan tooltips) sadurunge nutup </body>. Sinau luwih lengkap babagan pranala CDN kita .

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

Sampeyan uga bisa nyakup Popper lan JS kita kanthi kapisah. Yen sampeyan ora rencana nggunakake dropdown, popovers, utawa tooltips, simpen sawetara kilobyte kanthi ora kalebu 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>

Hello, donya! Bukak kaca ing browser pilihan kanggo ndeleng kaca Bootstrapped. Saiki sampeyan bisa miwiti mbangun nganggo Bootstrap kanthi nggawe tata letak dhewe , nambahake puluhan komponen , lan nggunakake conto resmi kita .

pranala CDN

Minangka referensi, iki pranala CDN utami.

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

Sampeyan uga bisa nggunakake CDN kanggo njupuk samubarang bangunan tambahan sing kadhaptar ing kaca Isi .

Langkah sabanjure

Waca liyane babagan sawetara setelan lingkungan global penting sing digunakake Bootstrap.
Waca babagan apa sing kalebu ing Bootstrap ing bagean konten lan dhaptar komponen sing mbutuhake JavaScript ing ngisor iki.
Perlu daya liyane? Coba mbangun nganggo Bootstrap kanthi nyakup file sumber liwat manajer paket .
Nggolek nggunakake Bootstrap minangka modul karo <script type="module">? Mangga deleng kita nggunakake Bootstrap minangka bagean modul .

komponen JS

Penasaran komponen endi sing mbutuhake JavaScript lan Popper kita? Klik link nuduhake komponen ing ngisor iki. Yen sampeyan ora yakin babagan struktur kaca umum, terus maca kanggo conto template kaca.

Tampilake komponen sing mbutuhake JavaScript

Tandha kanggo ngilangi
Tombol kanggo ngowahi status lan kothak centhang / fungsi radio
Carousel kanggo kabeh prilaku slide, kontrol, lan indikator
Ambruk kanggo ngowahi visibilitas konten
Dropdowns kanggo nampilake lan posisi (uga mbutuhake Popper )
Modal kanggo nampilake, posisi, lan prilaku gulung
Navbar kanggo nggedhekake plugin Collapse lan Offcanvas kanggo ngetrapake prilaku responsif
Navs karo plugin Tab kanggo ngganti panel isi
Offcanvases kanggo nampilake, posisi, lan prilaku gulung
Scrollspy kanggo prilaku gulung lan nganyari navigasi
Toasts kanggo nampilake lan ngilangi
Tooltips lan popovers kanggo nampilake lan posisi (uga mbutuhake Popper )

Globals penting

Bootstrap nggunakake sawetara gaya lan setelan global sing penting, kabeh iki meh khusus kanggo normalisasi gaya browser silang. Ayo nyilem.

HTML5 doctype

Bootstrap mbutuhake nggunakake doctype HTML5. Tanpa iku, sampeyan bakal weruh sawetara gaya funky lan ora lengkap.

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

Meta tag responsif

Bootstrap dikembangake luwih dhisik kanggo seluler , strategi ing ngendi kita ngoptimalake kode kanggo piranti seluler luwih dhisik lan banjur nggedhekake komponen yen perlu nggunakake pitakon media CSS. Kanggo mesthekake rendering lan zoom tutul sing tepat kanggo kabeh piranti, tambahake tag meta viewport responsif menyang <head>.

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

Sampeyan bisa ndeleng conto iki ing tumindak ing wiwitan cepet .

Ukuran kothak

Kanggo ukuran sing luwih gampang ing CSS, kita ngalih box-sizingnilai global saka content-boxmenyang border-box. Iki mesthekake paddingora mengaruhi jembaré komputasi pungkasan saka sawijining unsur, nanging bisa nimbulaké masalah karo sawetara piranti lunak pihak katelu kaya Google Maps lan Google Custom Search Engine.

Ing wusana langka sampeyan kudu override iku, nggunakake kaya ing ngisor iki:

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

Kanthi cuplikan ing ndhuwur, unsur-unsur bersarang-kalebu konten sing digawe liwat ::beforelan- ::afterkabeh bakal oleh warisan box-sizingsing ditemtokake kanggo .selector-for-some-widget.

Sinau luwih lengkap babagan model kothak lan ukuran ing Trik CSS .

Urip maneh

Kanggo rendering lintas-browser sing luwih apik, kita nggunakake Urip maneh kanggo mbenerake inconsistencies antarane browser lan piranti nalika nyediakake reset sing rada luwih apik kanggo unsur HTML umum.

Masyarakat

Tetep nganyari babagan pangembangan Bootstrap lan tekan komunitas kanthi sumber daya sing migunani iki.

Waca lan langganan Blog Bootstrap Resmi .
Takon lan jelajahi Diskusi GitHub kita .
Ngobrol karo fellow Bootstrappers ing IRC. Ing irc.libera.chatserver, ing #bootstrapsaluran.
Bantuan implementasine bisa ditemokake ing Stack Overflow (tagged bootstrap-5).
Pangembang kudu nggunakake tembung kunci bootstraping paket sing ngowahi utawa nambah fungsi Bootstrap nalika nyebarake liwat npm utawa mekanisme pangiriman sing padha supaya bisa ditemokake kanthi maksimal.

Sampeyan uga bisa tindakake @getbootstrap ing Twitter kanggo gosip paling anyar lan video musik apik tenan.