Սկսեք Bootstrap-ով
Bootstrap-ը հզոր, առանձնահատկություններով հագեցած ճակատային գործիքակազմ է: Կառուցեք որևէ բան՝ նախատիպից մինչև արտադրություն, րոպեների ընթացքում:
Արագ մեկնարկ
Սկսեք ներառելով Bootstrap-ի արտադրության համար պատրաստ CSS-ը և JavaScript-ը CDN-ի միջոցով՝ առանց որևէ կառուցման քայլերի անհրաժեշտության: Դիտեք այն գործնականում այս Bootstrap CodePen ցուցադրության միջոցով :
-
Ստեղծեք նոր
index.html
ֆայլ ձեր նախագծի արմատում: Ներառեք<meta name="viewport">
պիտակը նաև շարժական սարքերում պատշաճ արձագանքող վարքագծի համար:<!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>
-
Ներառեք Bootstrap-ի CSS-ը և JS-ը: Տեղադրեք
<link>
պիտակը<head>
մեր CSS-ի մեջ, և<script>
պիտակը մեր JavaScript փաթեթի համար (ներառյալ Popper-ը՝ բացվող ցանկերի, popper-ների և գործիքների հուշումների համար) փակումից առաջ</body>
: Իմացեք ավելին մեր 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>
Դուք կարող եք նաև առանձին ներառել Popper- ը և մեր JS-ը: Եթե չեք նախատեսում օգտագործել բացվող պատուհաններ, պոպովեր կամ գործիքի հուշումներ, խնայեք որոշ կիլոբայթներ՝ չներառելով 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>
-
Բարեւ աշխարհ! Բացեք էջը ձեր ընտրած բրաուզերում՝ տեսնելու ձեր Bootstrapped էջը: Այժմ դուք կարող եք սկսել կառուցել Bootstrap-ով` ստեղծելով ձեր սեփական դասավորությունը , ավելացնելով տասնյակ բաղադրիչներ և օգտագործելով մեր պաշտոնական օրինակները :
CDN հղումներ
Որպես հղում, ահա մեր հիմնական CDN հղումները.
Նկարագրություն | 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 |
Դուք կարող եք նաև օգտագործել CDN- ն՝ Բովանդակության էջում թվարկված մեր լրացուցիչ կառուցվածքներից որևէ մեկը ստանալու համար :
Հաջորդ քայլերը
-
Կարդացեք մի փոքր ավելին որոշ կարևոր գլոբալ միջավայրի պարամետրերի մասին , որոնք օգտագործում է Bootstrap-ը:
-
Կարդացեք այն մասին, թե ինչ է ներառված Bootstrap-ում մեր բովանդակության բաժնում և այն բաղադրիչների ցանկը, որոնք պահանջում են JavaScript ստորև:
-
Պետք է մի քիչ ավելի շատ ուժ? Մտածեք Bootstrap-ով կառուցելը` ներառելով աղբյուրի ֆայլերը փաթեթի կառավարչի միջոցով :
-
Փնտրու՞մ եք օգտագործել Bootstrap-ը որպես մոդուլ
<script type="module">
: Խնդրում ենք վերաբերել մեր Bootstrap-ի օգտագործմանը որպես մոդուլի բաժին:
JS բաղադրիչներ
Հետաքրքրու՞մ եք, թե որ բաղադրիչներն են հստակ պահանջում մեր JavaScript-ը և Popper-ը: Սեղմեք ցուցադրման բաղադրիչների հղումը ստորև: Եթե դուք ընդհանրապես վստահ չեք էջի ընդհանուր կառուցվածքի մասին, շարունակեք կարդալ էջի օրինակելի ձևանմուշ:
Ցույց տալ բաղադրիչները, որոնք պահանջում են JavaScript
- Ծանուցումներ աշխատանքից հեռացնելու համար
- Կոճակներ՝ վիճակները փոխելու և վանդակ/ռադիո ֆունկցիոնալությունը փոխելու համար
- Կարուսել սլայդի բոլոր վարքագծերի, հսկիչների և ցուցիչների համար
- Ծալել՝ բովանդակության տեսանելիությունը փոխելու համար
- Ցուցադրման և դիրքավորման բացվող պատուհաններ (նաև պահանջում է Popper )
- Մոդալներ ցուցադրման, դիրքավորման և ոլորման վարքագծի համար
- Navbar՝ մեր Collapse և Offcanvas պլագինները ընդլայնելու համար՝ արձագանքող վարքագծի իրականացման համար
- Նավարկվում է Tab հավելվածի միջոցով՝ բովանդակության վահանակները փոխարկելու համար
- Կտավներից դուրս՝ ցուցադրման, դիրքավորման և ոլորման վարքագիծը
- Scrollspy ոլորման վարքագծի և նավիգացիայի թարմացումների համար
- Կենացներ ցուցադրելու և մերժելու համար
- Գործիքների հուշումներ և փոփերներ ցուցադրման և դիրքավորման համար (նաև պահանջում է Popper )
Կարևոր գլոբալներ
Bootstrap-ն օգտագործում է մի քանի կարևոր գլոբալ ոճեր և կարգավորումներ, որոնք բոլորը գրեթե բացառապես ուղղված են բրաուզերի խաչաձեւ ոճերի նորմալացմանը : Եկեք սուզվենք:
HTML5 doctype
Bootstrap-ը պահանջում է օգտագործել HTML5 doctype: Առանց դրա, դուք կտեսնեք զվարճալի և թերի ոճավորում:
<!doctype html>
<html lang="en">
...
</html>
Պատասխանատու մետա թեգ
Bootstrap-ը մշակվել է առաջին հերթին շարժական սարքերի համար, ռազմավարություն, որում մենք օպտիմիզացնում ենք կոդը սկզբում շարժական սարքերի համար, այնուհետև անհրաժեշտության դեպքում մեծացնում ենք բաղադրիչները՝ օգտագործելով CSS մեդիա հարցումները: Բոլոր սարքերի համար պատշաճ ցուցադրում և հպումով խոշորացում ապահովելու համար ավելացրեք արձագանքող տեսադաշտի մետա թեգը ձեր <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
Դուք կարող եք տեսնել դրա օրինակը գործողության մեջ արագ մեկնարկում :
Տուփի չափսեր
CSS-ում ավելի պարզ չափագրման համար մենք փոխում ենք գլոբալ box-sizing
արժեքը ից content-box
դեպի border-box
: Սա երաշխավորում padding
է, որ չի ազդի տարրի վերջնական հաշվարկված լայնության վրա, բայց դա կարող է խնդիրներ առաջացնել որոշ երրորդ կողմի ծրագրերի հետ, ինչպիսիք են Google Maps-ը և Google Custom Search Engine:
Հազվագյուտ դեպքերում, երբ դուք պետք է անտեսեք այն, օգտագործեք հետևյալը.
.selector-for-some-widget {
box-sizing: content-box;
}
Վերոնշյալ հատվածով, nested տարրերը, ներառյալ գեներացված բովանդակությունը ::before
և, ::after
բոլորը կժառանգեն դրա box-sizing
համար նախատեսվածը .selector-for-some-widget
:
Իմացեք ավելին տուփի մոդելի և չափերի մասին CSS Tricks-ում :
Վերագործարկեք
Բրաուզերների միջև բարելավված մատուցման համար մենք օգտագործում ենք Reboot- ը՝ բրաուզերների և սարքերի միջև անհամապատասխանությունները շտկելու համար՝ միևնույն ժամանակ տրամադրելով սովորական HTML տարրերի մի փոքր ավելի կարծիքի վերակայումներ:
Համայնք
Եղեք արդիական Bootstrap-ի զարգացման վերաբերյալ և կապվեք համայնքի հետ այս օգտակար ռեսուրսների միջոցով:
- Կարդացեք և բաժանորդագրվեք The Official Bootstrap բլոգին :
- Հարցրեք և ուսումնասիրեք մեր GitHub քննարկումները :
- Զրուցեք ընկերակից Bootstrappers-ի հետ IRC-ում:
irc.libera.chat
Սերվերի վրա, ալիքում#bootstrap
: - Իրականացման օգնությունը կարող եք գտնել Stack Overflow-ում (պիտակավորված
bootstrap-5
): - Մշակողները պետք է օգտագործեն հիմնաբառը
bootstrap
փաթեթների վրա, որոնք փոփոխում կամ ավելացնում են Bootstrap-ի ֆունկցիոնալությունը npm-ի կամ նմանատիպ առաքման մեխանիզմների միջոցով տարածելիս՝ առավելագույն հայտնաբերման համար:
Դուք կարող եք նաև հետևել @getbootstrap-ին Twitter-ում ՝ վերջին բամբասանքների և հիանալի երաժշտական տեսահոլովակների համար: