Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
Check
in English

Bẹrẹ pẹlu Bootstrap

Bootstrap jẹ alagbara, ohun elo irinṣẹ iwaju iwaju ti ẹya. Kọ ohunkohun — lati apẹrẹ si iṣelọpọ — ni awọn iṣẹju.

Lori iwe yi

Ibẹrẹ kiakia

Bẹrẹ nipasẹ pẹlu pẹlu Bootstrap ti iṣelọpọ-ṣetan CSS ati JavaScript nipasẹ CDN laisi iwulo fun awọn igbesẹ kikọ eyikeyi. Wo ni adaṣe pẹlu Bootstrap CodePen demo yii .


  1. Ṣẹda index.htmlfaili titun ninu root ise agbese rẹ. Fi <meta name="viewport">aami sii daradara fun ihuwasi idahun to dara ninu awọn ẹrọ alagbeka.

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

  2. Pẹlu Bootstrap CSS ati JS. Fi <link>aami sii sinu <head>fun CSS wa, ati <script>tag fun lapapo JavaScript wa (pẹlu Popper fun gbigbe awọn silẹ, poppers, ati awọn itọsi irinṣẹ) ṣaaju pipade </body>. Kọ ẹkọ diẹ sii nipa awọn ọna asopọ CDN wa .

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

    O tun le pẹlu Popper ati JS wa lọtọ. Ti o ko ba gbero lati lo awọn isọ silẹ, popovers, tabi awọn itọnisọna irinṣẹ, ṣafipamọ diẹ ninu awọn kilobytes nipasẹ ko pẹlu 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>

  3. Mo ki O Ile Aiye! Ṣii oju-iwe ni ẹrọ aṣawakiri rẹ lati wo oju-iwe Bootstrapped rẹ. Bayi o le bẹrẹ kikọ pẹlu Bootstrap nipa ṣiṣẹda ipilẹ tirẹ , ṣafikun awọn dosinni ti awọn paati , ati lilo awọn apẹẹrẹ osise wa .

Gẹgẹbi itọkasi, eyi ni awọn ọna asopọ CDN akọkọ wa.

Apejuwe 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

O tun le lo CDN lati mu eyikeyi awọn itumọ afikun wa ti a ṣe akojọ si ni oju-iwe Awọn akoonu .

Next awọn igbesẹ

JS irinše

Ṣe iyanilenu iru awọn paati wo ni o nilo JavaScript ati Popper wa ni gbangba? Tẹ ọna asopọ awọn paati ifihan ni isalẹ. Ti o ko ba ni idaniloju rara nipa eto oju-iwe gbogbogbo, tẹsiwaju kika fun apẹrẹ oju-iwe apẹẹrẹ.

Ṣe afihan awọn paati ti o nilo JavaScript
  • Awọn itaniji fun yiyọ kuro
  • Awọn bọtini fun awọn ipinlẹ toggling ati apoti / iṣẹ redio
  • Carousel fun gbogbo awọn ihuwasi ifaworanhan, awọn idari, ati awọn olufihan
  • Collapse fun yiyi hihan akoonu
  • Awọn isubu fun iṣafihan ati ipo (tun nilo Popper )
  • Awọn awoṣe fun iṣafihan, ipo, ati ihuwasi yi lọ
  • Navbar fun faagun Collapse wa ati awọn afikun Offcanvas lati ṣe awọn ihuwasi idahun
  • Navs pẹlu ohun itanna Tab fun yiyi awọn pane akoonu
  • Offcanvases fun ifihan, ipo, ati ihuwasi yi lọ
  • Scrollspy fun ihuwasi lilọ kiri ati awọn imudojuiwọn lilọ kiri
  • Toasts fun ifihan ati yiyọ kuro
  • Awọn imọran irinṣẹ ati awọn agbejade fun iṣafihan ati ipo (tun nilo Popper )

Awọn agbaye pataki

Bootstrap nlo iwonba ti awọn aza agbaye pataki ati awọn eto, gbogbo eyiti o fẹrẹ jẹ iyasọtọ iyasọtọ si ọna deede ti awọn aṣa aṣawakiri aṣawakiri. Jẹ ká besomi ni.

HTML5 doctype

Bootstrap nilo lilo HTML5 doctype. Laisi rẹ, iwọ yoo rii diẹ ninu igbadun ati iselona pipe.

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

Idahun meta tag

Bootstrap jẹ idagbasoke alagbeka ni akọkọ , ilana kan ninu eyiti a ṣe iṣapeye koodu fun awọn ẹrọ alagbeka ni akọkọ ati lẹhinna ṣe iwọn awọn paati bi o ṣe pataki nipa lilo awọn ibeere media CSS. Lati rii daju imudara to dara ati fifọwọkan sun-un fun gbogbo awọn ẹrọ, ṣafikun ami ami oju opo wiwo idahun si faili rẹ <head>.

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

O le wo apẹẹrẹ eyi ni iṣe ni ibẹrẹ iyara .

Apoti-iwọn

Fun iwọn taara diẹ sii ni CSS, a yipada box-sizingiye agbaye lati content-boxsi border-box. Eyi ni idaniloju paddingko ni ipa lori iwọn iṣiro ipari ti ipin kan, ṣugbọn o le fa awọn iṣoro pẹlu diẹ ninu sọfitiwia ẹni-kẹta bii Google Maps ati Ẹrọ Iwadi Aṣa Google.

Ni iṣẹlẹ ti o ṣọwọn o nilo lati fagilee rẹ, lo nkan bi atẹle:

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

Pẹlu snippet ti o wa loke, awọn eroja itẹ-ẹiyẹ — pẹlu akoonu ti ipilẹṣẹ nipasẹ ::beforeati ::after— yoo gbogbo jogun pato box-sizingfun iyẹn.selector-for-some-widget .

Kọ ẹkọ diẹ sii nipa awoṣe apoti ati iwọn ni Awọn ẹtan CSS .

Atunbere

Fun imudara aṣawakiri aṣawakiri, a lo Atunbere lati ṣatunṣe awọn aiṣedeede kọja awọn aṣawakiri ati awọn ẹrọ lakoko ti o pese awọn atunto ero diẹ diẹ si awọn eroja HTML ti o wọpọ.

Agbegbe

Duro ni imudojuiwọn lori idagbasoke Bootstrap ki o de ọdọ agbegbe pẹlu awọn orisun iranlọwọ wọnyi.

  • Ka ati ṣe alabapin si Bulọọgi Bootstrap osise naa .
  • Beere ati ṣawari Awọn ijiroro GitHub wa .
  • Wiregbe pẹlu awọn Bootstrappers ẹlẹgbẹ ni IRC. Lori irc.libera.chatolupin, ni #bootstrapikanni.
  • Iranlọwọ imuse ni a le rii ni Stack Overflow (ti a samisibootstrap-5 ).
  • Awọn olupilẹṣẹ yẹ ki o lo koko-ọrọ bootstraplori awọn idii ti o yipada tabi ṣafikun si iṣẹ ṣiṣe ti Bootstrap nigbati o n pin kaakiri nipasẹ npm tabi awọn ọna ifijiṣẹ iru fun wiwa ti o pọju.

O tun le tẹle @getbootstrap lori Twitter fun olofofo tuntun ati awọn fidio orin oniyi.