Manomboka amin'ny Bootstrap
Bootstrap dia fitaovam-pitaovan'ny frontend mahery sy feno endri-javatra. Manamboara na inona na inona — manomboka amin'ny prototype ka hatramin'ny famokarana — ao anatin'ny minitra.
Manomboka haingana
Manomboha amin'ny fampidirana CSS sy JavaScript efa vonona amin'ny famokarana Bootstrap amin'ny alàlan'ny CDN tsy mila dingana fananganana. Jereo izany amin'ny fampiharana miaraka amin'ity demo Bootstrap CodePen ity .
-
Mamorona
index.html
rakitra vaovao ao amin'ny fototry ny tetikasanao. Ampidiro ihany koa ny<meta name="viewport">
marika ho an'ny fitondran-tena mety amin'ny fitaovana finday.<!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>
-
Ampidiro ny CSS sy JS an'ny Bootstrap. Apetraho
<link>
ao amin'ny<head>
CSS ny tenifototra, ary ny<script>
tenifototra ho an'ny fonosana JavaScript (ao anatin'izany ny Popper ho an'ny fametrahana ny dropdowns, poppers, ary fitaovana) alohan'ny famaranana</body>
. Mianara bebe kokoa momba ny rohy CDN .<!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>
Azonao atao ihany koa ny mampiditra an'i Popper sy ny JS anay misaraka. Raha tsy mikasa ny hampiasa dropdowns, popovers, na tooltips ianao dia tehirizo kilobytes vitsivitsy amin'ny tsy fampidirana 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 World! Sokafy ny pejy amin'ny navigateur safidinao hahitanao ny pejinao Bootstrapped. Ankehitriny ianao dia afaka manomboka manangana miaraka amin'ny Bootstrap amin'ny alàlan'ny famoronana ny drafitrao manokana , manampy singa am-polony , ary mampiasa ny ohatra ofisialy .
Ireo singa mifandraika amin'ny CDN
Ho fanondroana, ireto ny rohy CDN voalohany.
Description | 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 |
Azonao atao ihany koa ny mampiasa ny CDN mba haka ny iray amin'ireo fananganana fanampiny voatanisa ao amin'ny pejy Votoaty .
Dingana manaraka
-
Vakio bebe kokoa momba ny toe-javatra manan-danja eran-tany izay ampiasain'i Bootstrap.
-
Vakio ny momba izay tafiditra ao amin'ny Bootstrap ao amin'ny fizarana atiny sy ny lisitry ny singa mila JavaScript eto ambany.
-
Mila hery bebe kokoa? Diniho ny fananganana miaraka amin'ny Bootstrap amin'ny fampidirana ireo rakitra loharano amin'ny alàlan'ny mpitantana fonosana .
-
Mikasa ny hampiasa Bootstrap ho modely miaraka amin'ny
<script type="module">
? Azafady, jereo ny fampiasanay Bootstrap ho fizarana module.
Ireo singa mifandraika amin'ny JS
Manontany tena hoe inona ny singa mitaky mazava ny JavaScript sy Popper? Kitiho ny rohy aseho eto ambany. Raha tsy azonao antoka ny momba ny firafitry ny pejy ankapobeny dia tohizo ny famakiana ny môdely pejy ohatra.
Asehoy ireo singa mila JavaScript
- Fanairana ho an'ny fandroahana
- Bokotra ho an'ny fampandehanana fanjakana sy ny fampandehanana ny boaty/radio
- Carousel ho an'ny fihetsika, fanaraha-maso ary tondro rehetra
- Mirodana noho ny famadihana ny fahitana ny atiny
- Dropdowns ho an'ny fampisehoana sy fametrahana toerana (mitaky Popper ihany koa )
- Modely amin'ny fampisehoana, ny fametrahana ary ny fihetsika amin'ny horonana
- Navbar amin'ny fanitarana ny Plugins Collapse sy Offcanvas mba hampiharana ny fitondrantena mandray andraikitra
- Navs miaraka amin'ny plugin Tab ho an'ny fanodikodinana ny votoaty
- Offcanvases amin'ny fampisehoana, ny fametrahana ary ny fitondran'ny horonana
- Scrollspy ho an'ny fihetsehan'ny horonana sy fanavaozana ny fitetezana
- Toasts aseho sy ariana
- Tooltips sy popovers amin'ny fampisehoana sy ny fametrahana (mitaky Popper ihany koa )
Globals manan-danja
Ny Bootstrap dia mampiasa fomba amam-panao manan-danja eran-tany vitsivitsy, izay saika miompana manokana amin'ny fanamafisan'ny navigateur cross avokoa. Andao hiroboka.
HTML5 doctype
Ny Bootstrap dia mitaky ny fampiasana ny HTML5 doctype. Raha tsy misy an'io dia hahita fomba mahatsikaiky sy tsy feno ianao.
<!doctype html>
<html lang="en">
...
</html>
Mamaly meta tag
Ny Bootstrap dia novolavolaina voalohany ho an'ny finday , paikady izay ahafahantsika manatsara ny kaody ho an'ny fitaovana finday aloha ary avy eo mampitombo ny singa araka izay ilaina amin'ny alàlan'ny fangatahana media CSS. Mba hiantohana ny famandrihana mety sy ny zooming mikasika ny fitaovana rehetra, ampio ny meta tag viewport mandray andraikitra amin'ny <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
Azonao atao ny mahita ohatra amin'ity hetsika ity amin'ny fanombohana haingana .
Fametahana boaty
box-sizing
Raha mila fandrefesana mahitsy kokoa amin'ny CSS dia avadika content-box
ho border-box
. Izany dia miantoka padding
fa tsy hisy fiantraikany amin'ny sakan'ny kajy farany amin'ny singa iray, fa mety hiteraka olana amin'ny rindrambaikon'ny antoko fahatelo toy ny Google Maps sy Google Custom Search Engine.
Amin'ny fotoana tsy fahita firy dia mila manafoana azy ianao, ampiasao zavatra toy izao manaraka izao:
.selector-for-some-widget {
box-sizing: content-box;
}
Miaraka amin'ity snippet etsy ambony ity, ireo singa misy akany—anisan'izany ny atiny novokarina tamin'ny alalan'ny ::before
sy ::after
— dia samy handova ny voatondro box-sizing
ho an'io .selector-for-some-widget
.
Mianara bebe kokoa momba ny maodely boaty sy ny habeny ao amin'ny CSS Tricks .
Avereno indray
Ho an'ny famandrihana mifanandrify amin'ny navigateur nohatsaraina, dia mampiasa Reboot izahay hanitsiana ny tsy fitovian-kevitra amin'ny navigateur sy fitaovana ary manome famerenana kely kokoa amin'ireo singa HTML mahazatra.
fiaraha-monina
Mijanòna hatrany amin'ny fivoaran'ny Bootstrap ary manatona ny vondrom-piarahamonina miaraka amin'ireo loharano mahasoa ireo.
- Vakio sy misoratra anarana amin'ny The Official Bootstrap Blog .
- Anontanio sy diniho ny Resadresakay GitHub .
- Miresaha amin'ireo Bootstrappers hafa ao amin'ny IRC. Ao amin'ny
irc.libera.chat
server, ao amin'ny#bootstrap
fantsona. - Ny fanampiana fampiharana dia azo jerena ao amin'ny Stack Overflow (tagged
bootstrap-5
). - Ny mpamorona dia tokony hampiasa ny teny fanalahidy
bootstrap
amin'ny fonosana izay manova na manampy amin'ny fiasan'ny Bootstrap rehefa mizara amin'ny alàlan'ny npm na mekanika fanaterana mitovitovy amin'izany mba hahitana haingana indrindra.
Azonao atao ihany koa ny manaraka @getbootstrap ao amin'ny Twitter ho an'ny fifosana farany sy horonan-tsary mahafinaritra.