Pasiuna

Pagsugod sa Bootstrap, ang pinakasikat nga framework sa kalibutan para sa paghimo og responsive, mobile-first nga mga site, nga adunay jsDelivr ug template starter page.

Dali nga pagsugod

Nangita aron dali nga idugang ang Bootstrap sa imong proyekto? Gamita ang jsDelivr, usa ka libre nga open source CDN. Gigamit ang usa ka manager sa package o kinahanglan nga i-download ang gigikanan nga mga file? Lakaw ngadto sa pahina sa pag-download .

CSS

Kopyaha-paste ang stylesheet <link>sa imong <head>atubangan sa tanan nga uban pang stylesheet aron makarga ang among CSS.

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

JS

Daghan sa among mga sangkap nanginahanglan sa paggamit sa JavaScript aron molihok. Sa piho, nanginahanglan sila jQuery , Popper , ug among kaugalingon nga mga plugin sa JavaScript. Gigamit namo ang slim nga pagtukod sa jQuery , apan ang tibuok nga bersyon gisuportahan usab.

Ibutang ang usa sa mosunod nga <script>s duol sa katapusan sa imong mga panid, sa wala pa ang panapos nga </body>tag, aron mahimo kini. Kinahanglang mag-una ang jQuery, dayon ang Popper, ug dayon ang among mga plugin sa JavaScript.

Bundle

Ilakip ang matag Bootstrap JavaScript plugin sa usa sa among duha ka bugkos. Ang duha bootstrap.bundle.jsug bootstrap.bundle.min.jsnaglakip sa Popper alang sa among mga tooltip ug popovers, apan dili jQuery . Ilakip una ang jQuery, dayon usa ka hugpong sa Bootstrap JavaScript. Alang sa dugang nga kasayuran bahin sa kung unsa ang gilakip sa Bootstrap, palihug tan-awa ang among seksyon sa sulud .

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

Magbulag

Kung magdesisyon ka nga mag-uban sa bulag nga solusyon sa script, kinahanglan nga mag-una ang Popper (kung naggamit ka mga tooltip o popovers), ug dayon ang among mga plugin sa JavaScript.

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

Mga sangkap

Natingala kung unsang mga sangkap ang klaro nga nanginahanglan jQuery, among JavaScript, ug Popper? I-klik ang link sa pagpakita sa mga sangkap sa ubos. Kung dili ka sigurado bahin sa istruktura sa panid, ipadayon ang pagbasa alang sa usa ka panig-ingnan nga template sa panid.

Ipakita ang mga sangkap nga nanginahanglan og JavaScript

Mga alerto sa pag-dismiss
Mga buton para sa pag-toggling sa mga estado ug checkbox/radio functionality
Carousel para sa tanang gawi sa slide, kontrol, ug indikasyon
Pag-collapse para sa pag-toggle sa visibility sa sulod
Mga dropdown para sa pagpakita ug pagposisyon (gikinahanglan usab ang Popper )
Mga modala alang sa pagpakita, pagposisyon, ug pamatasan sa pag-scroll
Navbar alang sa pagpalapad sa among Collapse plugin aron mapatuman ang responsive nga pamatasan
Scrollspy alang sa scroll behavior ug navigation updates
Mga tooltip ug popover para sa pagpakita ug pagpoposisyon (kinahanglan usab ang Popper )

Panimulang template

Siguruha nga i-set up ang imong mga panid sa pinakabag-o nga mga sumbanan sa disenyo ug pag-uswag. Kana nagpasabut sa paggamit sa usa ka HTML5 doctype ug naglakip sa usa ka viewport meta tag alang sa husto nga responsive nga mga kinaiya. Ibutang kini tanan ug ang imong mga panid kinahanglan nga ingon niini:

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

Kana ra ang imong kinahanglan alang sa kinatibuk-ang kinahanglanon sa panid. Bisitaha ang Layout docs o ang among opisyal nga mga ehemplo aron masugdan ang pagbutang sa sulod ug mga sangkap sa imong site.

Importante nga mga global

Ang Bootstrap naggamit og pipila ka importante nga global nga mga estilo ug mga setting nga kinahanglan nimong masayran kung gamiton kini, nga ang tanan halos gitumong sa pag- normalize sa cross browser styles. Magsalom ta.

HTML5 nga doctype

Ang Bootstrap nagkinahanglan sa paggamit sa HTML5 doctype. Kung wala kini, makakita ka og pipila ka funky nga dili kompleto nga estilo, apan ang paglakip niini dili kinahanglan nga hinungdan sa bisan unsang daghang mga hiccups.

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

Responsive nga meta tag

Ang Bootstrap gihimong mobile una , usa ka estratehiya diin atong gi-optimize una ang code para sa mga mobile device ug dayon i-scale ang mga component kung gikinahanglan gamit ang CSS media query. Aron masiguro ang husto nga paghubad ug pag-zoom sa paghikap alang sa tanan nga mga aparato, idugang ang responsive viewport meta tag sa imong <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Makita nimo ang usa ka pananglitan niini sa aksyon sa template sa pagsugod .

Ang gidak-on sa kahon

Para sa mas prangka nga pagsukod sa CSS, gibalhin namo ang global box-sizingvalue gikan content-boxsa border-box. Gipaneguro niini paddingnga dili makaapekto sa katapusang nakalkula nga gilapdon sa usa ka elemento, apan mahimo kini nga hinungdan sa mga problema sa pipila nga software sa ikatulo nga partido sama sa Google Maps ug Google Custom Search Engine.

Sa talagsaon nga okasyon kinahanglan nimo nga i-override kini, gamita ang usa ka butang sama sa mosunod:

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

Uban sa ibabaw nga snippet, ang mga nested nga elemento—lakip ang namugna nga content pinaagi sa ::beforeug— ::afterang tanan makapanunod sa gipiho box-sizingalang niana .selector-for-some-widget.

Pagkat-on og dugang mahitungod sa modelo sa kahon ug pagsukod sa CSS Tricks .

Pag-reboot

Para sa gipaayo nga cross-browser rendering, among gigamit ang Reboot para matul-id ang mga inconsistency sa mga browser ug device samtang naghatag ug gamay nga mas opinyon nga mga pag-reset sa komon nga HTML nga mga elemento.

Komunidad

Magpabilin nga updated sa pag-uswag sa Bootstrap ug pag-abot sa komunidad uban niining makatabang nga mga kapanguhaan.

Pagbasa ug pag-subscribe sa The Official Bootstrap Blog .
Pakig-chat sa mga kaubang Bootstrappers sa IRC. Sa irc.libera.chatserver, sa #bootstrapchannel.
Ang tabang sa pagpatuman mahimong makit-an sa Stack Overflow (tag bootstrap-4).
Kinahanglang gamiton sa mga developers ang keyword bootstrapsa mga pakete nga nagbag-o o nagdugang sa pagpaandar sa Bootstrap kung nag-apod-apod pinaagi sa npm o parehas nga mga mekanismo sa paghatud alang sa labing kataas nga pagkadiskobre.

Mahimo usab nimo sundan ang @getbootstrap sa Twitter alang sa labing bag-o nga tsismis ug katingad-an nga mga music video.

Mga CSP ug naka-embed nga SVG

Daghang mga sangkap sa Bootstrap ang nag-apil sa mga naka-embed nga SVG sa among CSS aron ma-estilo ang mga sangkap nga makanunayon ug dali sa mga browser ug aparato. Para sa mga organisasyon nga adunay mas estrikto nga mga configuration sa CSP , among gidokumento ang tanan nga mga higayon sa among mga naka-embed nga SVG (nga ang tanan gipadapat pinaagi sa background-image) aron mas masusi nimo ang imong mga kapilian.

Close button (gigamit sa mga alert ug modals)
Mga custom nga checkbox ug radio button
Mga switch sa porma
Mga icon sa pag-validate sa porma
Pasadya nga pagpili sa mga menu
Mga kontrol sa carousel
Navbar toggle buttons

Base sa panag-istoryahanay sa komunidad , pipila ka mga kapilian sa pagsulbad niini sa imong kaugalingong codebase naglakip sa pag-ilis sa mga URL sa lokal nga gi-host nga mga kabtangan, pagtangtang sa mga hulagway ug paggamit sa inline nga mga hulagway (dili mahimo sa tanang component), ug pag-usab sa imong CSP. Ang among rekomendasyon mao ang pagrepaso pag-ayo sa imong kaugalingong mga polisiya sa seguridad ug pagdesisyon sa pinakamaayong dalan sa unahan, kon gikinahanglan.