Source

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, nga gihatag nga libre sa mga tawo sa jsDelivr. 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Daghan sa among mga sangkap nanginahanglan sa paggamit sa JavaScript aron molihok. Sa piho, nagkinahanglan sila og jQuery , Popper.js , ug among kaugalingong JavaScript nga mga plugins. Ibutang ang mosunod <script>nga 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.js, ug dayon ang among mga plugin sa JavaScript.

Gigamit namo ang slim nga pagtukod sa jQuery , apan ang tibuok nga bersyon gisuportahan usab.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

Ang among bootstrap.bundle.jsug bootstrap.bundle.min.jsnaglakip sa Popper , apan dili jQuery . Alang sa dugang nga kasayuran bahin sa kung unsa ang gilakip sa Bootstrap, palihug tan-awa ang among seksyon sa sulud .

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.js )
  • 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
  • Mga tooltip ug popover alang sa pagpakita ug pagpoposisyon (gikinahanglan usab ang Popper.js )
  • Scrollspy alang sa scroll behavior ug navigation updates

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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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.

  • Sunda ang @getbootstrap sa Twitter .
  • Pagbasa ug pag-subscribe sa The Official Bootstrap Blog .
  • Pakig-chat sa mga kaubang Bootstrappers sa IRC. Sa irc.freenode.netserver, 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 kadaghan nga pagkadiskubre.

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