Ifaara
Bẹrẹ pẹlu Bootstrap, ilana olokiki julọ ni agbaye fun kikọ idahun, awọn aaye alagbeka-akọkọ, pẹlu jsDelivr ati oju-iwe ibẹrẹ awoṣe.
Ibẹrẹ kiakia
Ṣe o n wa lati yara ṣafikun Bootstrap si iṣẹ akanṣe rẹ? Lo jsDelivr, CDN orisun ṣiṣi ọfẹ. Lilo oluṣakoso package tabi nilo lati ṣe igbasilẹ awọn faili orisun bi? Lọ si oju-iwe gbigba lati ayelujara .
CSS
Daakọ-lẹẹmọ iwe aṣa naa <link>
sinu rẹ <head>
ṣaaju gbogbo awọn iwe aṣa miiran lati gbe CSS wa.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
JS
Ọpọlọpọ awọn paati wa nilo lilo JavaScript lati ṣiṣẹ. Ni pato, wọn nilo jQuery , Popper , ati awọn afikun JavaScript tiwa. A lo jQuery's slim build , ṣugbọn ẹya kikun tun ṣe atilẹyin.
Fi ọkan ninu awọn atẹle wọnyi <script>
si opin awọn oju-iwe rẹ, ni kete ṣaaju </body>
tag pipade, lati mu wọn ṣiṣẹ. jQuery gbọdọ wa ni akọkọ, lẹhinna Popper, ati lẹhinna awọn afikun JavaScript wa.
Lapapo
Fi gbogbo ohun itanna JavaScript Bootstrap pẹlu ọkan ninu awọn edidi meji wa. Mejeeji bootstrap.bundle.js
ati bootstrap.bundle.min.js
pẹlu Popper fun awọn imọran irinṣẹ ati awọn agbejade, ṣugbọn kii ṣe jQuery . Ṣafikun jQuery ni akọkọ, lẹhinna lapapo JavaScript Bootstrap kan. Fun alaye diẹ sii nipa ohun ti o wa ninu Bootstrap, jọwọ wo apakan awọn akoonu wa.
<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>
Lọtọ
Ti o ba pinnu lati lọ pẹlu ojutu awọn iwe afọwọkọ lọtọ, Popper gbọdọ wa ni akọkọ (ti o ba nlo awọn imọran irinṣẹ tabi awọn agbejade), ati lẹhinna awọn afikun JavaScript wa.
<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>
Awọn eroja
Ṣe iyanilenu iru awọn paati wo ni o nilo taara jQuery, JavaScript wa, ati Popper? Tẹ ọna asopọ awọn paati ifihan ni isalẹ. Ti o ko ba ni idaniloju nipa eto oju-iwe naa, 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 ohun itanna Collapse wa lati ṣe ihuwasi idahun
- Scrollspy fun ihuwasi lilọ kiri ati awọn imudojuiwọn lilọ kiri
- Awọn imọran irinṣẹ ati awọn agbejade fun iṣafihan ati ipo (tun nilo Popper )
Awoṣe ibẹrẹ
Rii daju pe o ṣeto awọn oju-iwe rẹ pẹlu apẹrẹ tuntun ati awọn iṣedede idagbasoke. Iyẹn tumọ si lilo iwe-ẹkọ HTML5 kan ati pẹlu tag meta wiwo wiwo fun awọn ihuwasi idahun to dara. Fi gbogbo rẹ papọ ati awọn oju-iwe rẹ yẹ ki o dabi eyi:
<!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>
Iyẹn ni gbogbo ohun ti o nilo fun awọn ibeere oju-iwe gbogbogbo. Ṣabẹwo si awọn iwe aṣẹ Ifilelẹ tabi awọn apẹẹrẹ osise wa lati bẹrẹ fifi akoonu ati awọn paati aaye rẹ jade.
Awọn agbaye pataki
Bootstrap nlo iwonba ti awọn aza agbaye pataki ati awọn eto ti iwọ yoo nilo lati mọ nigba lilo rẹ, gbogbo eyiti o fẹrẹ jẹ iyasọtọ iyasọtọ si ọna deede ti awọn aṣa aṣawakiri agbelebu. Jẹ ká besomi ni.
HTML5 doctype
Bootstrap nilo lilo HTML5 doctype. Laisi rẹ, iwọ yoo rii diẹ ninu aṣa iselona ti ko pe, ṣugbọn pẹlu rẹ ko yẹ ki o fa awọn osuke nla eyikeyi.
<!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, shrink-to-fit=no">
O le wo apẹẹrẹ eyi ni iṣe ni awoṣe ibẹrẹ .
Apoti-iwọn
Fun iwọn taara diẹ sii ni CSS, a yipada box-sizing
iye agbaye lati content-box
si border-box
. Eyi ni idaniloju padding
ko 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 ẹnikẹ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ẹ ::before
ati ::after
— yoo gbogbo jogun pato box-sizing
fun 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 titi di oni 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 .
- Wiregbe pẹlu awọn Bootstrappers ẹlẹgbẹ ni IRC. Lori
irc.libera.chat
olupin, ni#bootstrap
ikanni. - Iranlọwọ imuse ni a le rii ni Stack Overflow (ti samisi
bootstrap-4
). - Awọn olupilẹṣẹ yẹ ki o lo koko-ọrọ
bootstrap
lori awọn idii eyiti o yipada tabi ṣafikun si iṣẹ ṣiṣe ti Bootstrap nigbati o n pin kaakiri nipasẹ npm tabi awọn ọna ifijiṣẹ ti o jọra fun wiwa ti o pọju.
O tun le tẹle @getbootstrap lori Twitter fun olofofo tuntun ati awọn fidio orin oniyi.
Awọn CSPs ati awọn SVG ti a fi sii
Orisirisi awọn paati Bootstrap pẹlu awọn SVG ti a fi sinu CSS wa si awọn paati ara nigbagbogbo ati irọrun kọja awọn aṣawakiri ati awọn ẹrọ. Fun awọn ẹgbẹ pẹlu awọn atunto CSP ti o muna diẹ sii , a ti ṣe akọsilẹ gbogbo awọn iṣẹlẹ ti awọn SVG ti a fi sii (gbogbo eyiti a lo nipasẹ background-image
) nitorinaa o le ṣe atunyẹwo awọn aṣayan rẹ daradara siwaju sii.
- Bọtini pipade (lo ninu awọn titaniji ati awọn awoṣe)
- Awọn apoti ayẹwo aṣa ati awọn bọtini redio
- Fọọmu yipada
- Awọn aami afọwọsi fọọmu
- Aṣa yan awọn akojọ aṣayan
- Awọn iṣakoso Carousel
- Awọn bọtini lilọ kiri Navbar
Da lori ibaraẹnisọrọ agbegbe , diẹ ninu awọn aṣayan fun sisọ eyi ni koodu koodu tirẹ pẹlu rirọpo awọn URL pẹlu awọn ohun-ini ti a gbalejo ni agbegbe, yiyọ awọn aworan kuro ati lilo awọn aworan inline (ko ṣee ṣe ni gbogbo awọn paati), ati iyipada CSP rẹ. Iṣeduro wa ni lati farabalẹ ṣayẹwo awọn eto imulo aabo tirẹ ati pinnu lori ọna ti o dara julọ siwaju, ti o ba jẹ dandan.